自定义Prettier插件前置处理异常：VSCode保存时import排序不生效求助

问题描述 #

编写Prettier插件的自定义前置处理逻辑调整import语句顺序，AST重排和转码过程正常，但VSCode保存文件时import排序未生效。

代码问题分析 #

1. Prettier配置文件错误 #

你的prettier.config.js中使用了单数的plugin配置项，但Prettier要求的是复数形式plugins，这是导致插件未被加载的核心原因。

2. Preprocess逻辑的潜在问题 #

虽然你的AST修改和代码生成逻辑能输出正确结果，但preprocess函数的设计存在局限性：

• 未判断program.body的长度是否足够，若文件只有1个import或非import语句会报错；
• 仅交换前两个元素，无法实现通用的import排序逻辑。

修正后的代码 #

修正后的 prettier.config.js #

module.exports = {
  plugins: ["./plugin.js"] // 改为复数形式plugins
};

优化后的 plugin.js（通用import排序） #

如果需要按模块类型排序（比如第三方模块在前，本地模块在后），可以修改preprocess逻辑如下：

const { parsers } = require("prettier/parser-babel");
const { default: generate } = require("@babel/generator");

const parseIt = (text, options) => {
  const ast = parsers.babel.parse(text);
  
  // 分离import语句和其他语句
  const imports = [];
  const others = [];
  ast.program.body.forEach(node => {
    if (node.type === "ImportDeclaration") {
      imports.push(node);
    } else {
      others.push(node);
    }
  });

  // 排序规则：第三方模块（非./../开头）在前，本地模块在后；同类型按模块名排序
  imports.sort((a, b) => {
    const aIsExternal = !a.source.value.startsWith(".");
    const bIsExternal = !b.source.value.startsWith(".");
    if (aIsExternal && !bIsExternal) return -1;
    if (!aIsExternal && bIsExternal) return 1;
    return a.source.value.localeCompare(b.source.value);
  });

  // 重新组合AST节点
  ast.program.body = [...imports, ...others];
  
  return generate(ast, options).code;
};

module.exports = {
  parsers: {
    babel: {
      ...parsers.babel,
      preprocess: parseIt,
    },
  },
};

验证步骤 #

1. 确认VSCode的Prettier插件已启用，且设置中editor.formatOnSave为true；
2. 重启VSCode以确保配置和插件加载生效；
3. 保存测试文件，查看import语句是否按预期排序。

内容的提问来源于stack exchange，提问作者Y.S .Jenifer Singh