Prettier多个插件只最后一个生效原因及解决方案

本文针对Prettier多个插件仅最后一个生效的问题，深入分析了其根本原因：Prettier的插件加载机制导致后加载的插件会覆盖先前插件的`preprocess`函数。文章以`prettier-plugin-self-closing-tags`和`prettier-plugin-transform-imports`两个插件为例，详细阐述了问题重现及`.prettierrc.js`配置。并提出了两种解决方案：合并插件，以及修改插件逻辑实现串行执行（包括使用不同处理阶段、链式调用`preprocess`和自定义处理函数）。选择哪种方案取决于插件的复杂度和代码结构，合并插件通常是更简洁高效的选择。

多个Prettier插件仅最后一个生效的根本原因及解决方案

本文分析了Prettier多个自定义插件仅最后一个生效的问题，并提供详细的解决方案。

问题描述：

用户开发了两个Prettier插件：prettier-plugin-self-closing-tags 和 prettier-plugin-transform-imports。在.prettierrc.js配置文件中，这两个插件均已列入plugins数组，但实际运行时，只有prettier-plugin-transform-imports生效，prettier-plugin-self-closing-tags失效。两个插件的内部逻辑相似，都通过withPluginsPreprocess函数在preprocess阶段处理代码。

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

// prettier-plugin-self-closing-tags
// ... (代码省略) ...
const withPluginsPreprocess = (parser) => {
  return {
    ...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的插件加载机制导致了这个问题。后加载的插件会覆盖先前加载插件的preprocess函数。在本例中，prettier-plugin-transform-imports后加载，其preprocess函数覆盖了prettier-plugin-self-closing-tags的preprocess函数，因此只有prettier-plugin-transform-imports的处理生效。

解决方案：

由于两个插件都修改了preprocess方法，导致冲突。 解决方法有两种：

1. 合并插件: 将两个插件的逻辑合并成一个插件。这是最简洁的方案，避免了插件间的冲突。

2. 修改插件逻辑，实现串行执行: 避免直接覆盖preprocess。 可以考虑以下方法：

   • 使用不同的处理阶段: Prettier 提供了多个处理阶段，例如preparse, parse, print等。 可以将两个插件的逻辑分别分配到不同的处理阶段，避免冲突。
   • 链式调用 preprocess: 在一个插件的preprocess函数中，调用另一个插件的preprocess函数，从而实现串行执行。 这需要修改插件代码，确保处理顺序正确。
   • 自定义处理函数: 避免直接修改preprocess，而是创建自定义的处理函数，并在插件中调用这些函数。

选择哪种方法取决于插件的复杂性和代码结构。 合并插件通常是最简单和最有效的解决方案，如果插件逻辑简单且相关，则强烈推荐此方法。 如果插件逻辑复杂且相互独立，则需要仔细分析并选择合适的处理阶段或自定义处理函数来避免冲突。 这需要对Prettier的插件机制有深入的了解。

理论要掌握，实操不能落！以上关于《Prettier多个插件只最后一个生效原因及解决方案》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！