跳转到主要内容
让扩展代码库的格式以最少的手工投入保持一致。Prettier 通过脚本、编辑器集成以及持续集成(CI)来运行,不会跑在 Extension.js 的构建管线里。

什么场景适合用 Prettier

  • 你希望在本地和 CI 工作流中保持确定性的格式化。
  • 你在引导新贡献者,希望以低摩擦保持风格一致。
  • 你想让 ESLint 专注于正确性,把格式化交给 Prettier。

Prettier 的能力

能力它能带来什么
一致的格式化JS、TS、JSON、CSS 和 Markdown 共用一套风格
脚本与编辑器工作流本地保存即格式化,并在 CI 中强制执行
减少 lint 冲突搭配 eslint-config-prettier,避免规则重叠
低维护的默认值以极少配置就能采用一套稳定的基准

模板示例

Prettier 配置模板

为新项目预配置好的格式化设置。 new-config-prettier screenshot
npx extension@latest create my-extension --template=new-config-prettier
仓库:examples/new-config-prettier

在现有扩展中使用

安装 Prettier: 创建一个配置文件(例如 .prettierrc):
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}
通过脚本或手动运行 Prettier:
npm run format
如果还没有 format 脚本:

与 ESLint 集成

为避免 ESLint 中的格式化规则冲突,安装: 然后在 ESLint 配置链中加入 eslint-config-prettier,让 ESLint 把格式化相关的问题交给 Prettier 处理。

最佳实践

  • 让格式化在编辑器和 CI 中自动完成,而不是手工。
  • 在 CI 中使用 --check,在本地使用 --write
  • 在更大的仓库里,对暂存文件做 pre-commit 格式化。

下一步