> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.

# 为浏览器扩展使用 Prettier

> 用 Prettier 在浏览器扩展代码库中保持格式一致。它从脚本、编辑器插件以及 CI 运行，独立于 Extension.js 的构建管线。

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

## 什么场景适合用 Prettier

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

## Prettier 的能力

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

## 模板示例

### Prettier 配置模板

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

<img src="https://mintcdn.com/extensionjs/VCnDd7fX2Nza24SE/images/examples/new-config-prettier/screenshot.png?fit=max&auto=format&n=VCnDd7fX2Nza24SE&q=85&s=b48ace5ccae5c7e9c68056905a0e436e" alt="new-config-prettier screenshot" width="2400" height="1800" data-path="images/examples/new-config-prettier/screenshot.png" />

<CodeGroup>
  ```bash npm theme={null}
  npx extension@latest create my-extension --template=new-config-prettier
  ```

  ```bash pnpm theme={null}
  pnpx extension@latest create my-extension --template=new-config-prettier
  ```

  ```bash yarn theme={null}
  yarn dlx extension@latest create my-extension --template=new-config-prettier
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=new-config-prettier
  ```

  ```bash bun theme={null}
  bunx extension@latest create my-extension --template=new-config-prettier
  ```
</CodeGroup>

仓库：[examples/new-config-prettier](https://github.com/extension-js/examples/tree/main/examples/new-config-prettier)

## 在现有扩展中使用

安装 Prettier：

<PackageManagerTabs command="install -D prettier" />

创建一个配置文件（例如 `.prettierrc`）：

```json theme={null}
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}
```

通过脚本或手动运行 Prettier：

<CodeGroup>
  ```bash npm theme={null}
  npm run format
  ```

  ```bash pnpm theme={null}
  pnpm format
  ```

  ```bash yarn theme={null}
  yarn format
  ```

  ```bash bun theme={null}
  bun run format
  ```

  ```bash bun theme={null}
  bun run format
  ```
</CodeGroup>

如果还没有 format 脚本：

<PackageManagerTabs command="prettier --write ." />

## 与 ESLint 集成

为避免 ESLint 中的格式化规则冲突，安装：

<PackageManagerTabs command="install -D eslint-config-prettier" />

然后在 ESLint 配置链中加入 `eslint-config-prettier`，让 ESLint 把格式化相关的问题交给 Prettier 处理。

## 最佳实践

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

## 下一步

* 学习如何配置 [ESLint](/docs/integrations/eslint)。
* 用 [Stylelint](/docs/integrations/stylelint) 给样式表做 lint。