为浏览器扩展使用 Prettier

让扩展代码库的格式以最少的手工投入保持一致。Prettier 通过脚本、编辑器集成以及持续集成（CI）来运行，不会跑在 Extension.js 的构建管线里。

什么场景适合用 Prettier

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

Prettier 的能力

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

模板示例

Prettier 配置模板

为新项目预配置好的格式化设置。

npx extension@latest create my-extension --template=new-config-prettier

pnpx extension@latest create my-extension --template=new-config-prettier

yarn dlx extension@latest create my-extension --template=new-config-prettier

bunx extension@latest create my-extension --template=new-config-prettier

bunx 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

pnpm format

yarn format

bun run format

bun run format

如果还没有 format 脚本：

与 ESLint 集成

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

最佳实践

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

下一步

学习如何配置 ESLint。
用 Stylelint 给样式表做 lint。

用 ESLint 集成保障代码质量在浏览器扩展中使用 PostCSS

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Debugging

Implementation guide

Community

为浏览器扩展使用 Prettier

什么场景适合用 Prettier

Prettier 的能力

模板示例

Prettier 配置模板

在现有扩展中使用

与 ESLint 集成

最佳实践

下一步

​什么场景适合用 Prettier

​Prettier 的能力

​模板示例

​Prettier 配置模板

​在现有扩展中使用

​与 ESLint 集成

​最佳实践

​下一步

什么场景适合用 Prettier

Prettier 的能力

模板示例

Prettier 配置模板

在现有扩展中使用

与 ESLint 集成

最佳实践

下一步