Prettier多个插件冲突：如何同时启用prettier-plugin-self-closing-tags和prettier-plugin-transform-imports？

解决Prettier多个插件冲突的方法

本文分析一个Prettier配置难题：当同时使用多个自定义插件时，为何仅最后一个插件生效，以及如何调整配置使所有插件都能生效。

问题描述：

.prettierrc.js文件同时配置了prettier-plugin-self-closing-tags和prettier-plugin-transform-imports两个自定义插件。这两个插件都使用了withPluginsPreprocess方法，并在preprocess函数中处理代码。然而，只有prettier-plugin-self-closing-tags生效，prettier-plugin-transform-imports的代码转换未执行。

.prettierrc.js配置如下：

// .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插件代码片段：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

// prettier-plugin-self-closing-tags
// ... (省略部分代码) ...
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),
  },
};

问题根源：

Prettier的插件加载机制和withPluginsPreprocess的使用方式导致了冲突。preprocess函数顺序执行，后一个插件的处理结果会覆盖前一个。因此，只有最后一个插件的转换生效。

解决方案：

为了让两个插件都生效，需要修改插件的实现逻辑，避免结果覆盖。 一种方法是修改preprocess函数，使其累积所有插件的处理结果，而不是简单覆盖。另一种方法是将插件功能细化，使用不同的处理阶段（例如preprocessor和postprocessor）执行不同的转换，避免冲突。 具体实现需要根据prettier-plugin-transform-imports的代码进行调整。 这可能需要修改prettier-plugin-transform-imports插件，使其不依赖于preprocess函数，或者修改其preprocess函数使其与prettier-plugin-self-closing-tags的preprocess函数兼容，例如通过链式调用或其他协调机制。

以上就是Prettier多个插件冲突：如何同时启用prettier-plugin-self-closing-tags和prettier-plugin-transform-imports？的详细内容，更多请关注php中文网其它相关文章！