【实战指南】如何写一款小程序 Prettier 插件

// index.ts
import { SupportLanguage, Parser, Printer, SupportOption, ParserOptions } from 'prettier';
// 支持的语言列表
export const languages: Partial<SupportLanguage>[];
// 每个语言对应的 parser
export const parsers: Record<string, Parser>;
// 核心的格式化逻辑
export const printers: Record<string, Printer>;
// 可选，插件的自定义配置项，此处 PluginOptions 需自行定义
export const options: Record<keyof PluginOptions, SupportOption>;
// 可选，默认配置项
export const defaultOptions: Partial<ParserOptions>;
复制代码

// index.ts
import { SupportLanguage } from 'prettier';
export const languages: Partial<SupportLanguage>[] = [
  {
    name: 'axml',
    parsers: ['axml'], // (a.1)
    extensions: ['.axml'], // (a.2)
  },
];
复制代码

// index.ts
import { SupportLanguage, Parser } from 'prettier';
import parse from './parse';
// prettier 指定 `node` 参数为 any，因为不同 parser 返回的 node 类型不尽相同
function locStart(node: any): number {
  return node.startIndex;
}
function locEnd(node: any): number {
  return node.endIndex;
}
export const languages: Partial<SupportLanguage>[] = [
  {
    name: 'axml',
    parsers: ['axml'],
    extensions: ['.axml'],
  },
];
export const parsers: Record<string, Parser> = {
  // 注意此处的 key 必须要与 languages 的 parsers 对应
  axml: {
    parse, // (b.1)
    locStart,
    locEnd,
    // 为 ast 格式命个名，后面会用到
    astFormat: 'axml-ast',
  },
};
复制代码

// parse.ts
import { parseDOM } from 'htmlparser2';
import { Node } from 'domhandler';
export default function parse(text: string): Node[] {
  const dom = parseDOM(text, {
    xmlMode: true,
    withStartIndices: true,
    withEndIndices: true,
  });
  return dom;
}
复制代码

// index.ts
import { SupportLanguage, Parser, Printer } from 'prettier';
import parse from './parse';
import print from './print';
import embed from './embed';
// ... 省略
export const printers: Record<string, Printer> = {
  // 对应 parsers 中的 astFormat
  'axml-ast': {
    print, // (c.1)
    embed, // (c.2)
  },
};
复制代码

// print.ts
import { FastPath, Doc, ParserOptions, doc } from 'prettier';
const { concat } = doc.builders;
export default function print(
  path: FastPath,
  _options: ParserOptions,
  _print: (path: FastPath) => Doc // (c.3)
): Doc {
  // 获取 AST 中的 node
  const node = path.getValue();
  if (!node) return '';
  // htmlparser2 的 AST 是一个数组，因此我们需要调用 _print，它会递归调用我们自己定义的 print
  if (Array.isArray(node)) {
    return concat(path.map(_print));
  }
  // 继续判断 node.type，返回不同内容，限于篇幅，省略
}
复制代码

// embed.ts
import { FastPath, Doc, ParserOptions, Options, doc } from 'prettier';
import { DataNode, Element } from 'domhandler';
import { parse } from 'mustache';
const {
  group,  // (d.1) Prettier 最基本的方法，会根据 printWidth 等配置项自动换行（或不换行）
  concat, // 拼接 Doc 的方法，类似 Array.prototype.concat
  line,   // 一个换行，如果父级 group(d.1) 后不需换行，则将其转换为一个空格
  indent, // 一个缩进，如果父级 group(d.1) 后不需换行，则忽略
  softline, // 一个换行，如果父级 group(d.1) 后不需换行，则忽略
} = doc.builders;
export default function embed(
  path: FastPath,
  print: (path: FastPath) => Doc,
  textToDoc: (text: string, options: Options) => Doc, // (d.2)
  options: ParserOptions // (d.3)
): Doc | null {
  const node = path.getValue();
  // 返回 null，则交给 print(c.1) 继续执行
  if (!node || !node.type) return null;
  switch (node.type) {
    // 文本类型
    case 'text':
      const text = (node as DataNode).data;
      // 1. 调用 mustache.parse 解析文本
      // 2. 调用 textToDoc(d.2) 格式化 JS 表达式（如有）
      // 3. 拼接 `{{`、格式化好的表达式、`}}`（如有）
      // 4. 调用 group(d.1) 方法包裹前面拼接好的内容
    // 标签类型
    case 'tag':
      // 1. 如果有 children，递归调用
      // 2. 提取 attribute，调用 mustache.parse 解析文本
      // 3. 调用 textToDoc(d.2) 格式化 JS 表达式（如有）
      // 4. 拼接 `{{`、格式化好的表达式、`}}`（如有）
      // 5. 调用 group(d.1) 方法包裹前面拼接好的内容
    default:
      // 返回 null，则交给 print(c.1) 继续执行
      return null;
  }
}
复制代码

// embed.ts
// ...
const doc: Doc = textToDoc(expressionExtractedByMustache, {
  parser: 'babel',
  semi: false,
  singleQuote: true,
});
return indent(concat([softline, doc]));
复制代码

// index.ts
import { SupportLanguage, Parser, Printer, SupportOption, ParserOptions } from 'prettier';
// ... 省略
interface PluginOptions {
  axmlBracketSameLine: boolean;
}
// 插件自定义的配置项
export const options: Record<keyof PluginOptions, SupportOption> = {
  axmlBracketSameLine: {
    name: 'axmlBracketSameLine',
    category: 'Global',
    type: 'boolean',
    default: false,
    description: 'Put the `>` of a multiline AXML element on a new line',
  },
};
复制代码

// index.ts
import { SupportLanguage, Parser, Printer, SupportOption, ParserOptions } from 'prettier';
// ... 省略
export const defaultOptions: Partial<ParserOptions> = {
  tabWidth: 2, // 2 个空格缩进
  printWidth: 80, // 打印宽度 80
};
复制代码

npm i --save-dev prettier prettier-plugin-axml
复制代码

./node_modules/.bin/prettier --write "src/**/*.axml"
复制代码