一、配置文件概述

.prettierrc.json 是 Prettier 代码格式化工具的配置文件，用于定义代码的格式化规则。通过配置该文件，可统一项目代码风格，提升代码可读性。

二、常用配置项

1. 代码宽度与缩进

配置项	说明	默认值	示例
printWidth	指定每行代码的最大宽度，超出则换行	80	"printWidth": 100
tabWidth	定义一个制表符等价的空格数	2	"tabWidth": 4
useTabs	是否使用制表符（Tab）缩进，false 表示使用空格	false	"useTabs": true

2. 标点符号规则

配置项	说明	默认值	示例
semi	是否在语句末尾添加分号，false 时会自动处理 ASI 故障	true	"semi": false
singleQuote	是否使用单引号（JSX 引用除外）	false	"singleQuote": true
jsxSingleQuote	在 JSX 中使用单引号	false	"jsxSingleQuote": true
trailingComma	数组/对象字面量末尾是否添加逗号，可选 none/es5/all	es5	"trailingComma": "all"

3. 代码结构格式

配置项	说明	默认值	示例
bracketSpacing	对象字面量括号间是否添加空格	true	"bracketSpacing": false
bracketSameLine	多行元素的结束括号是否与最后一行同列（不适用于自闭元素）	false	"bracketSameLine": true
arrowParens	箭头函数参数是否强制使用括号，可选 always/avoid/as-needed	as-needed	"arrowParens": "always"

三、进阶配置项

1. 语法与文件处理

配置项	说明	默认值	示例
$schema	提供 JSON 语法提示，指向 Prettier 配置 schema	-	"$schema": "https://json.schemastore.org/prettierrc"
parser	指定解析器类型（如 typescript/css/markdown 等）	babel	"parser": "typescript"
filepath	指定输入文件路径，用于解析器推理	-	"filepath": "src/index.js"

2. 特殊格式控制

配置项	说明	默认值	示例
endOfLine	定义行尾字符（lf/crlf/cr/auto）	auto	"endOfLine": "crlf"
htmlWhitespaceSensitivity	HTML 中空白处理策略（css/strict/ignore）	css	"htmlWhitespaceSensitivity": "strict"
insertPragma	是否在文件开头注释中插入 @format 编译指示	false	"insertPragma": true

四、配置示例

以下是一个完整的 .prettierrc.json 配置示例：

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "endOfLine": "lf",
  "jsxSingleQuote": true,
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

printWidth 配置项说明

一、基础定义

printWidth 是 Prettier 中的核心配置项之一，用于指定每行代码的最大字符宽度。当代码行长度超过该值时，Prettier 会自动进行换行处理，以确保代码格式的整洁和可读性。

二、配置细节

属性	说明	默认值	常见取值
类型	数值（Number）	80	80 / 100 / 120 等
影响范围	所有支持的编程语言（JavaScript、TypeScript、CSS、HTML 等）	-	-
典型应用场景	控制长代码行（如函数参数、URL、长字符串）的换行策略	-	-

三、示例与效果

1. 代码示例（未配置 printWidth）

// 原始代码（行长度超过默认80字符）
function fetchData(url = 'https://api.example.com/v1/data?param1=value1&param2=value2&param3=value3') { ... }

2. 配置 printWidth: 80 后的效果

function fetchData(
  url = 'https://api.example.com/v1/data?param1=value1&param2=value2&param3=value3'
) { ... }

3. 配置 printWidth: 120 后的效果（更长的单行容忍度）

function fetchData(url = 'https://api.example.com/v1/data?param1=value1&param2=value2&param3=value3') { ... }

四、取值建议

• 团队协作场景：建议设置为 80 或 100，平衡可读性和屏幕适配性（尤其是在小屏幕或分屏开发时）。
• 个人项目或文档场景：可设置为 120 或更高，减少换行次数，提升代码紧凑性。
• 特殊文件：如 CSS 或 HTML 可适当增大宽度（如 120），避免因标签嵌套导致过多换行。

五、与其他配置的关联

• tabWidth：缩进宽度会影响实际可容纳的代码字符数（如 tabWidth: 4 时，每行实际可用字符数减少）。
• arrowParens：箭头函数参数是否加括号会影响行长度（如 (arg) => {} 比 arg => {} 多两个字符）。
• trailingComma：末尾逗号可能增加行长度（如数组最后一项后添加逗号）。

六、配置示例

在 .prettierrc.json 中添加：

{
  "printWidth": 100,
  // 其他配置项...
}

通过调整该值，可灵活控制代码的换行策略，确保项目代码风格统一。