Prettier 配置说明

Prettier 配置说明

1. 安装

npm i prettier -D

2. 配置文件

支持以下格式（优先级从高到低）：

• .prettierrc.js / .prettierrc.cjs
• .prettierrc.json
• .prettierrc.yaml / .prettierrc.yml
• .prettierrc.toml
• prettier key in package.json

示例：.prettierrc.js

module.exports = {
  printWidth: 120,            // 每行最大字符数，默认 80
  tabWidth: 2,                // 缩进空格数
  semi: true,                 // 句尾添加分号
  singleQuote: true,          // 使用单引号
  jsxBracketSameLine: true,   // JSX 中 '>' 是否与最后一行的末尾放在同一行
  bracketSameLine: true,      // 对象/数组括号是否与内容在同一行
  bracketSpacing: false,      // 对象/数组括号内部是否加空格，false 表示不加
  arrowParens: 'avoid',       // 箭头函数单个参数省略括号
  trailingComma: 'es5',       // 对象或数组末尾加逗号
};

3. 配置项详解

3.1 缩进与宽度

配置项	默认值	说明
printWidth	80	每行最大字符数，超过则换行
tabWidth	2	每个缩进级别的空格数
useTabs	false	是否使用 Tab 缩进代替空格

3.2 分号

配置项	默认值	说明
semi	true	是否在语句末尾添加分号

3.3 引号

配置项	默认值	说明
singleQuote	false	是否使用单引号（JSX 中会忽略此配置，始终使用双引号）
jsxSingleQuote	false	JSX 中是否使用单引号
quoteProps	"as-needed"	对象属性是否加引号。可选："as-needed" / "consistent" / "preserve"

3.4 尾随逗号

配置项	默认值	说明
trailingComma	"all"	尾随逗号。可选："none" / "es5" / "all"

• "none"：不加尾随逗号
• "es5"：ES5 中有效的位置添加（对象、数组等）
• "all"：所有可能的地方都添加（包括函数参数和调用）

3.5 括号

配置项	默认值	说明
bracketSpacing	true	对象字面量括号之间是否加空格：{ foo: bar } vs {foo: bar}
bracketSameLine	false	多行元素/组件的 > 是否放在最后一行的末尾
arrowParens	"always"	箭头函数参数是否加括号。"always" 总是加，"avoid" 单个参数省略

注意： jsxBracketSameLine 已废弃，Prettier 2.4+ 请使用 bracketSameLine。

配置项	默认值	说明
singleAttributePerLine	false	JSX/HTML/TSX 中是否每个属性单独一行

3.6 换行符与文件

配置项	默认值	说明
endOfLine	"lf"	换行符。可选："lf" / "crlf" / "cr" / "auto"
insertPragma	false	是否在文件顶部插入 @format 标记
requirePragma	false	是否仅格式化带有 @format 标记的文件
embeddedLanguageFormatting	"auto"	是否格式化嵌入的代码。可选："auto" / "off"

3.7 HTML / JSX 相关

配置项	默认值	说明
htmlWhitespaceSensitivity	"css"	HTML 空白敏感度。可选："css" / "strict" / "ignore"
vueIndentScriptAndStyle	false	Vue 中是否缩进 <script> 和 <style> 标签内容

3.8 特殊文件格式

配置项	默认值	说明
proseWrap	"preserve"	Markdown 文本换行。可选："always" / "never" / "preserve"
parser	自动推断	指定解析器，如 "typescript"、"json"、"css" 等

3.9 Overrides（覆盖配置）

可以对特定文件使用不同的配置：

module.exports = {
  // 全局配置
  singleQuote: true,
  overrides: [
    {
      files: '*.json',
      options: {
        parser: 'json',
        tabWidth: 2
      }
    },
    {
      files: ['*.yml', '*.yaml'],
      options: {
        tabWidth: 2,
        singleQuote: false
      }
    }
  ]
};

4. .prettierignore 忽略文件

在项目根目录创建 .prettierignore，语法同 .gitignore：

node_modules
dist
build
coverage
package-lock.json
*.min.js

5. 使用方式

5.1 CLI 命令

# 检查所有文件
npx prettier --check .

# 格式化所有文件
npx prettier --write .

# 格式化指定文件
npx prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,less,md}"

5.2 npm scripts

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,less,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,less,md}\""
  }
}

5.3 搭配 ESLint

安装 eslint-config-prettier 关闭 ESLint 中与 Prettier 冲突的规则：

npm i eslint-config-prettier -D

在 .eslintrc.js 中引入：

module.exports = {
  extends: [
    'some-other-config',
    'prettier'  // 必须放在最后，覆盖前面的格式规则
  ]
};

5.4 Git hooks

搭配 lint-staged + husky 在提交前自动格式化：

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx,json,css,less,md}": ["prettier --write"]
  }
}

5.5 IDE 集成

在 VS Code 中安装 Prettier 插件，并在 .vscode/settings.json 中配置：

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