Prettier

Prettier 是什么？

Prettier 是一个「代码格式化工具」，专注于通过解析代码并重新生成符合统一风格的代码，消除开发者因代码风格（如缩进、换行、引号等）产生的分歧，提升团队协作效率。它支持 JavaScript、TypeScript、CSS、HTML、JSON、Markdown 等多种语言，并提供高度可配置的选项。

Prettier 所有 API 配置及说明

以下是 Prettier 的核心配置选项（基于 Prettier 官方文档，截至 2025 年）：

一、基本格式配置

配置项	类型	默认值	说明
printWidth	number	80	每行代码的最大字符数，超过时自动换行。
tabWidth	number	2	一个制表符对应的空格数（用于缩进）。
useTabs	boolean	false	是否使用制表符（\t）缩进，否则使用空格。
singleQuote	boolean	false	是否使用单引号（默认双引号）。
doubleQuote	boolean	true	是否使用双引号（与 singleQuote 互斥）。
trailingComma	enum	"es5"	末尾逗号规则："none"（无）、"es5"（ES5 允许对象末尾逗号）、"all"（所有情况）。
bracketSpacing	boolean	true	对象字面量的大括号内是否保留空格（如 { a: 1 } vs {a: 1}）。
jsxBracketSameLine	boolean	false	JSX 标签的右大括号是否与最后一行代码同线（适用于多行 JSX）。
arrowParens	enum	"avoid"	箭头函数参数是否需要括号："avoid"（可选时省略，如 x => x）、"always"（总是保留）。

二、代码风格配置

配置项	类型	默认值	说明
semi	boolean	true	是否在语句末尾添加分号。
quoteProps	enum	"as-needed"	对象属性引号规则："as-needed"（仅必要时加引号）、"always"（总是加引号）、"never"（从不加引号）。
jsxSingleQuote	boolean	false	JSX 中是否使用单引号（默认双引号）。
requirePragma	boolean	false	是否仅格式化包含 @format 注释的文件。
insertPragma	boolean	false	是否在文件顶部插入 @format 注释（需配合 requirePragma）。
proseWrap	enum	"preserve"	Markdown 文本换行规则："preserve"（保留原换行）、"always"（强制按 printWidth 换行）。
htmlWhitespaceSensitivity	enum	"css"	HTML 空白敏感度："css"（类似 CSS 规则）、"strict"（严格模式）、"ignore"（忽略空白）。

三、特殊语言处理

配置项	类型	默认值	说明
vueIndentScriptAndStyle	boolean	false	Vue 组件中 <script> 和 <style> 标签是否单独缩进。
singleAttributePerLine	boolean	false	HTML/JSX 中是否将单个属性放在新行（适用于多属性标签）。
tsxSingleQuote	boolean	false	TSX 中是否使用单引号（默认双引号）。
tabToSpaceConversion	object	{}	制表符转空格的规则（高级配置，用于混合缩进场景）。

四、插件与扩展

Prettier 支持通过插件扩展对特定语言的格式化（如 CSS 预处理器、GraphQL 等），需单独安装插件（如 prettier-plugin-sass），无需额外配置项，插件会自动生效。

如何配置 Prettier？

Prettier 支持多种配置方式，优先级从高到低：

1. 命令行参数（临时覆盖配置）
2. 项目本地配置文件（推荐）
3. 用户全局配置文件
4. 默认值

1. 创建配置文件

在项目根目录创建以下任意一个文件：

• .prettierrc（JSON 格式）

{
  "printWidth": 100,
  "singleQuote": true,
  "semi": false
}

• .prettierrc.json（JSON 格式，更清晰）
• .prettierrc.yml/.prettierrc.yaml（YAML 格式）

printWidth: 100
singleQuote: true
semi: false

• .prettierrc.js（JavaScript 格式，支持函数或动态配置）

module.exports = {
  printWidth: 100,
  singleQuote: true,
  plugins: ['prettier-plugin-sass'] // 引用插件
};

• package.json（在 package.json 中添加 prettier 字段）

{
  "prettier": {
    "printWidth": 100,
    "singleQuote": true
  }
}

2. 忽略文件（可选）

在项目根目录创建 .prettierignore 文件，指定无需格式化的文件或目录：

node_modules/
dist/
*.config.js

3. 命令行工具（CLI）

安装 Prettier

# 本地安装（推荐）
npm install prettier --save-dev
# 或全局安装（不推荐）
npm install prettier -g

常用命令

# 查看文件格式化后的结果（不修改文件）
npx prettier --list-different src/

# 格式化单个文件
npx prettier --write src/index.js

# 格式化所有指定类型的文件
npx prettier --write "src/**/*.{js,jsx,json}"

# 查看当前配置（验证配置是否生效）
npx prettier --config .prettierrc.json --check src/index.js

如何使用 Prettier？

1. 编辑器集成（推荐）

在编辑器中安装 Prettier 插件，实现「保存时自动格式化」：

• VS Code：Prettier - Code formatter，并在 settings.json 中配置：

{
  "editor.formatOnSave": true,
  "prettier.configPath": "./.prettierrc.json" // 指定配置文件路径
}

• WebStorm/IntelliJ：内置支持，需在设置中启用 Prettier 并关联配置文件。
• Sublime Text：安装 Pretty Diff 插件

2. 与 ESLint 配合使用

Prettier 专注于代码格式，ESLint 专注于代码质量。若两者规则冲突（如换行、引号），需安装 eslint-config-prettier 禁用 ESLint 的格式相关规则：

npm install eslint-config-prettier --save-dev

在 ESLint 配置文件（.eslintrc.js）中添加：

module.exports = {
  extends: ['eslint:recommended', 'prettier'], // 确保 'prettier' 在最后
  rules: {
    // 其他 ESLint 规则...
  }
};

3. 作为构建流程的一部分

在 package.json 中添加脚本，在代码提交或构建前自动格式化：

{
  "scripts": {
    "format": "prettier --write .", // 格式化所有文件
    "format:check": "prettier --check ." // 检查格式是否一致（用于 CI/CD）
  }
}

配合 husky 和 lint-staged，可在代码提交前自动修复格式问题：

npm install husky lint-staged --save-dev

{
  "lint-staged": {
    "*.{js,jsx,json,css}": "prettier --write"
  }
}

npx husky add .husky/pre-commit "npx lint-staged"