Prettier 配置指南

Prettier 是一个代码格式化工具，它通过解析代码并使用自己的打印机重新打印代码，强制执行一致的样式。

安装

# npm
npm install --save-dev prettier

# yarn
yarn add --dev prettier

# pnpm
pnpm add -D prettier

配置文件

Prettier 支持多种配置文件格式：

.prettierrc (JSON 格式)
.prettierrc.json
.prettierrc.js
.prettierrc.yml
prettier.config.js
package.json 中的 "prettier" 字段

常用配置选项

1. 缩进相关

{
    "tabWidth": 4,      // 缩进使用的空格数
    "useTabs": false    // 是否使用 tab 缩进，false 表示使用空格
}

2. 引号和分号

{
    "semi": true,        // 是否在语句末尾添加分号
    "singleQuote": false, // 是否使用单引号
    "quoteProps": "as-needed" // 对象属性的引号处理
                             // "as-needed" - 仅在需要时添加引号
                             // "consistent" - 有一个需要就都加
                             // "preserve" - 保持原样
}

3. 空格和括号

{
    "bracketSpacing": true,    // 对象字面量中的括号前后是否添加空格
    "bracketSameLine": false,  // 多行 HTML 标签的 > 是否与最后一行在同一行
    "arrowParens": "avoid"     // 箭头函数参数是否使用括号
                              // "avoid" - 单个参数时省略括号
                              // "always" - 总是使用括号
}

4. 行宽和换行

{
    "printWidth": 80,    // 每行最大字符数
    "proseWrap": "preserve", // Markdown 文件的换行处理
    "endOfLine": "lf"    // 换行符类型（lf、crlf、cr、auto）
}

5. 逗号处理

{
    "trailingComma": "es5" // 尾随逗号的处理
                          // "es5" - 在 ES5 中合法的地方添加逗号
                          // "none" - 不添加尾随逗号
                          // "all" - 尽可能添加尾随逗号
}

特殊注释

可以使用特殊注释来控制格式化：

// prettier-ignore  // 忽略下一行的格式化
const uglyCode = x=>x+1;

/* prettier-ignore-start */  // 忽略一段代码的格式化
// ... 这里的代码不会被格式化
/* prettier-ignore-end */

常见配置示例

标准 JavaScript 项目

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5"
}

React/TypeScript 项目

{
    "tabWidth": 4,
    "semi": true,
    "singleQuote": false,
    "trailingComma": "all",
    "bracketSpacing": true,
    "jsxBracketSameLine": false
}

Node.js 后端项目

{
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none"
}

配置优先级

配置文件的优先级从高到低：

项目中的配置文件
package.json 中的配置
编辑器配置
Prettier 默认配置

与编辑器集成

VS Code

安装 "Prettier - Code formatter" 扩展
设置 VS Code：

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

WebStorm

WebStorm 内置了 Prettier 支持，可在设置中启用：

进入 Settings/Preferences
搜索 "prettier"
启用 "On code reformat" 和 "On save"

与其他工具集成

ESLint

安装 eslint-config-prettier 以禁用所有与 Prettier 冲突的 ESLint 规则：

pnpm add -D eslint-config-prettier

在 .eslintrc 中添加：

{
    "extends": [
        "prettier"
    ]
}

Git Hooks

使用 husky 和 pretty-quick 在提交代码时自动格式化：

pnpm add -D husky pretty-quick

在 package.json 中添加：

{
    "husky": {
        "hooks": {
            "pre-commit": "pretty-quick --staged"
        }
    }
}

常见问题

格式化某些文件失败
- 检查文件是否被 .prettierignore 忽略
- 确认文件格式是否被 Prettier 支持
与 ESLint 规则冲突
- 安装并配置 eslint-config-prettier
- 确保 Prettier 配置在 ESLint extends 的最后一项
格式化结果与预期不符
- 检查配置文件是否正确
- 确认是否有特殊注释影响了格式化
- 验证编辑器插件是否正确配置