一天速成：从零到一开发Prettier自定义格式化插件

引言：为什么需要自定义Prettier插件？

Prettier作为主流代码格式化工具，通过统一代码风格提升团队协作效率。然而，其内置规则无法覆盖所有场景（如特定框架的模板语法、自定义注释规范等）。当团队需要强制某些非标准格式时，扩展Prettier成为必要选择。本文以“花了一天时间”为时间约束，探讨如何在极短时间内完成一个功能完整的Prettier插件开发。

插件目标：解决特定场景的格式化需求

假设团队要求所有Vue单文件组件（.vue）中的<script>块必须遵循以下规则：

1. 导入语句按第三方库、本地模块分组，组间空一行
2. 导出语句前强制空一行
3. 禁止在import和export之间插入其他代码

原生Prettier无法实现此类复杂逻辑，因此需要自定义插件。

开发准备：环境与工具链搭建（1小时）

1. 初始化项目

mkdir prettier-plugin-vue-script && cd prettier-plugin-vue-script
npm init -y
npm install prettier --save-dev

2. 创建插件入口文件

在src/index.js中实现插件核心逻辑，需导出符合Prettier规范的函数：

module.exports = {
  languages: [{
    name: "vue-script",
    parsers: ["vue-script-parser"],
    vscodeLanguageIds: ["vue"]
  }],
  parsers: {
    "vue-script-parser": require("./parser")
  },
  printers: {
    "vue-script-parser": require("./printer")
  }
};

核心开发：解析器与打印器实现（5小时）

1. 解析器设计：AST转换

解析器需将Vue的<script>内容转换为Prettier可处理的AST。这里采用@babel/parser解析JavaScript代码，并添加自定义节点类型：

const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
module.exports = {
  parse(text) {
    const ast = parser.parse(text, {
      sourceType: "module",
      plugins: ["jsx"]
    });
    // 添加自定义标记（示例简化）
    traverse(ast, {
      ImportDeclaration(path) {
        path.node.isImport = true;
      },
      ExportDefaultDeclaration(path) {
        path.node.isExport = true;
      }
    });
    return { ast, type: "vue-script" };
  }
};

2. 打印器实现：格式化逻辑

打印器根据AST生成格式化后的代码。关键逻辑包括：

• 分组处理：通过节点标记识别导入/导出语句
• 空行控制：在组间插入\n\n

• 顺序校验：抛出错误如果发现非法代码位置

  module.exports = {
  print(path, options, print) {
    const parts = [];
    let hasImports = false;
    let hasExports = false;
    path.each(nodePath => {
      const node = nodePath.node;
      if (node.isImport) {
        if (hasExports) {
          parts.push("\n\n"); // 非法位置，实际应报错
        }
        parts.push(print(nodePath));
        hasImports = true;
      } else if (node.isExport) {
        if (hasImports && !hasExports) {
          parts.push("\n\n");
        }
        parts.push("\n" + print(nodePath));
        hasExports = true;
      }
    });
    return parts.join("");
  }
  };

调试与测试：快速验证（2小时）

1. 本地测试

创建测试文件test.vue：

<script>
import lodash from 'lodash'; // 应为第一组
import api from './api';
const foo = 1; // 非法代码，应报错
export default { name: 'Test' }
</script>

通过prettier --plugin ./src test.vue验证输出是否符合预期。

2. 单元测试框架

使用Jest编写测试用例：

const prettier = require("prettier");
const plugin = require("../src");
test("imports grouped correctly", () => {
  const code = `import a from 'a';\nconst x = 1;\nimport b from 'b';`;
  const formatted = prettier.format(code, {
    parser: "vue-script",
    plugins: [plugin],
    printWidth: 80
  });
  expect(formatted).toContain("import a from 'a';\n\nimport b from 'b';");
});

优化与发布（1小时）

1. 性能优化

• 使用memoize-fs缓存解析结果
• 限制AST遍历范围

2. 发布准备

• 编写README.md说明插件用途与配置方法
• 配置package.json的files字段仅包含必要文件
• 发布到npm：

  npm login
  npm publish

一天开发的经验总结

1. 聚焦核心功能：优先实现80%用户场景，次要功能后续迭代
2. 善用现有工具：复用Babel等成熟解析器减少工作量
3. 快速验证循环：每完成一个模块立即测试，避免集成问题
4. 文档先行：开发前明确输入输出规范，减少返工

对开发者的实用建议

1. 模板项目：基于prettier-plugin-starter快速搭建
2. 调试技巧：使用prettier --debug-check定位问题
3. 性能监控：通过--timer标志分析耗时操作
4. 社区协作：在Prettier的GitHub Discussions寻求帮助

未来扩展方向

1. 支持更多框架（如Svelte、Angular）
2. 添加自动修复功能（通过--fix标志）
3. 集成ESLint规则实现更复杂的校验

结语

通过一天的高强度开发，我们验证了Prettier插件开发的可行性。关键在于：明确需求边界、复用现有生态、采用增量开发策略。对于需要深度定制代码风格的团队，这种轻量级插件开发模式提供了高效的解决方案。完整代码已开源至GitHub，欢迎贡献与反馈。