Prettier multiple plugin conflict: How to enable prettier-plugin-self-closing-tags and prettier-plugin-transform-imports at the same time?

How to resolve conflicts between multiple plug-ins in Prettier

This article analyzes a Prettier configuration problem: why only the last plugin takes effect when multiple custom plugins are used at the same time, and how to adjust the configuration to make all plugins work.

Problem description:

The .prettierrc.js file also configures two custom plugins prettier-plugin-self-closing-tags and prettier-plugin-transform-imports . Both plugins use the withPluginsPreprocess method and handle the code in the preprocess function. However, only prettier-plugin-self-closing-tags are in effect, and the code conversion of prettier-plugin-transform-imports is not executed.

The .prettierrc.js configuration is as follows:

 // .prettierrc.js
const prettierPluginSelfClosingTags = require('./.prettier-plugins/prettier-plugin-self-closing-tags.js');
const prettierPluginTransformImports = require('./.prettier-plugins/prettier-plugin-transform-imports.js');
module.exports = {
  singleQuote: true,
  plugins: [
    prettierPluginTransformImports,
    prettierPluginSelfClosingTags,
  ],
};

prettier-plugin-self-closing-tags plugin code snippet:

 // prettier-plugin-self-closing-tags
// ... (Omit some code) ...
const withPluginsPreprocess = (parser) => ({
  ...parser,
  preprocess: (code, options) =>
    selfClosingTagsPreprocessor(
      parser.preprocess ? parser.preprocess(code, options): code,
      options
    ),
});
module.exports = {
  parsers: {
    babel: withPluginsPreprocess(babelParsers.babel),
    'babel-ts': withPluginsPreprocess(babelParsers['babel-ts']),
    typescript: withPluginsPreprocess(typescriptParsers.typescript),
  },
};

The root of the problem:

Prettier's plug-in loading mechanism and how withPluginsPreprocess are used lead to conflicts. The preprocess function is executed sequentially, and the processing results of the latter plug-in will overwrite the previous one. Therefore, only the conversion of the last plugin takes effect.

Solution:

In order for both plug-ins to take effect, the implementation logic of the plug-in needs to be modified to avoid result overwriting. One way is to modify the preprocess function so that it accumulates the processing results of all plugins instead of simply overwriting. Another way is to refine the plugin functionality, perform different transformations using different processing stages such as preprocessor and postprocessor to avoid conflicts. The specific implementation needs to be adjusted according to prettier-plugin-transform-imports code. This may require modifying prettier-plugin-transform-imports plugin so that it does not depend on the preprocess function, or modifying its preprocess function to be compatible with prettier-plugin-self-closing-tags ' preprocess functions, such as through chained calls or other coordination mechanisms.

The above is the detailed content of Prettier multiple plugin conflict: How to enable prettier-plugin-self-closing-tags and prettier-plugin-transform-imports at the same time?. For more information, please follow other related articles on the PHP Chinese website!