花了一天开发：Prettier自定义插件全解析

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

Prettier作为前端代码格式化工具，凭借其开箱即用的配置和强一致性规则，已成为开发者社区的标配。然而，当团队面临特殊代码风格需求（如自定义模板字符串格式、特定框架的语法糖处理）时，默认规则往往无法满足。此时，开发一个自定义插件成为高效解决方案。本文将以实际案例，拆解如何在一天内从零构建一个Prettier插件，覆盖从需求分析到上线的完整流程。

一、需求分析与技术选型：明确插件的边界

1.1 痛点定位：解决什么具体问题？

假设团队需要统一处理React组件中的JSX属性换行规则。默认Prettier会将多属性JSX强制换行，但团队希望根据属性数量动态决定是否换行。这一需求无法通过配置文件实现，必须通过插件扩展。

1.2 技术选型：为何选择Prettier插件机制？

Prettier插件基于AST（抽象语法树）操作，通过解析、转换、重新生成代码实现格式化。其核心优势在于：

• 轻量级：无需修改Prettier源码，通过@prettier/plugin-*命名空间发布。
• 可组合性：支持与其他插件共存，规则优先级可控。
• 生态兼容：兼容TypeScript、Vue、Svelte等主流语法。

二、开发环境搭建：1小时速成指南

2.1 初始化项目

mkdir prettier-plugin-jsx-dynamic-wrap && cd $_
npm init -y
npm install prettier @types/prettier --save-dev

2.2 项目结构

prettier-plugin-jsx-dynamic-wrap/
├── src/
│   └── index.ts       # 插件入口
├── package.json
└── tsconfig.json

2.3 配置TypeScript（可选）

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    "esModuleInterop": true
  }
}

三、核心功能实现：关键代码解析

3.1 插件入口文件

import type { Plugin } from "prettier";
const plugin: Plugin = {
  languages: [
    {
      name: "JavaScript",
      parsers: ["jsx-dynamic-wrap"],
    },
  ],
  parsers: {
    "jsx-dynamic-wrap": {
      parse: parseJSX,
      astFormat: "jsx-dynamic-wrap",
    },
  },
  printers: {
    "jsx-dynamic-wrap": {
      print: printJSX,
    },
  },
};
export default plugin;

3.2 解析器：捕获JSX节点

使用@babel/parser解析JSX语法树，标记需要处理的节点：

import { parse as babelParse } from "@babel/parser";
function parseJSX(text: string) {
  const ast = babelParse(text, {
    sourceType: "module",
    plugins: ["jsx"],
  });
  // 遍历AST，标记需要动态换行的JSX节点
  return transformAST(ast);
}

3.3 打印机：动态换行逻辑

核心算法根据属性数量决定是否换行：

function printJSX(path: any, options: any, print: any) {
  const node = path.node;
  if (node.type === "JSXOpeningElement") {
    const attributeCount = node.attributes.length;
    const shouldWrap = attributeCount > options.jsxMaxAttributesPerLine;
    if (shouldWrap) {
      return printAttributesWithNewlines(node.attributes, print);
    }
  }
  // 默认打印逻辑
  return defaultPrint(path, options, print);
}

四、测试与优化：确保质量

4.1 单元测试

使用jest验证不同场景下的输出：

import plugin from "../src";
import prettier from "prettier";
test("JSX with 3 attributes should wrap", async () => {
  const code = `<div className="foo" id="bar" data-test="baz" />`;
  const formatted = await prettier.format(code, {
    parser: "jsx-dynamic-wrap",
    plugins: [plugin],
    jsxMaxAttributesPerLine: 2,
  });
  expect(formatted).toContain('\n  ');
});

4.2 性能优化

• AST缓存：避免重复解析相同文件。
• 规则懒加载：仅在检测到JSX时加载完整逻辑。

五、发布与集成：10分钟上线

5.1 打包配置

{
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "prepublish": "npm run build"
  }
}

5.2 发布到npm

npm login
npm publish --access public

5.3 团队集成

在prettier.config.js中配置：

module.exports = {
  plugins: ["prettier-plugin-jsx-dynamic-wrap"],
  jsxMaxAttributesPerLine: 3,
};

六、经验总结：一天开发的启示

1. 最小可行产品（MVP）思维：优先实现核心功能，迭代完善边缘场景。
2. AST操作门槛：熟悉Babel/TypeScript AST结构可大幅提升开发效率。
3. 测试驱动开发（TDD）：通过单元测试快速验证规则正确性。
4. 文档先行：编写清晰的README和API文档，降低团队使用成本。

七、进阶建议：插件的扩展方向

1. 多框架支持：扩展至Vue、Angular等模板语法。
2. 性能监控：集成Benchmark.js测量格式化耗时。
3. 可视化配置：开发Web界面动态生成配置文件。

结语：从一天到持续价值

通过一天的高效开发，我们不仅解决了团队的格式化痛点，更验证了Prettier插件机制的灵活性。对于开发者而言，掌握此类工具开发能力，既能提升个人技术影响力，也能为团队创造长期价值。未来，随着前端生态的演进，自定义格式化规则将成为规模化团队的标配能力。