3.2核心配置项详解

3.2 核心配置项详解

printWidth：行宽的微妙平衡

printWidth 是 Prettier 中影响最直观的配置项。它设定了每行的最大字符数，打印算法在这个约束下决定是否换行。默认值是 80。

80 字符这个数字有着历史渊源——早期终端的宽度就是 80 字符，很多编码规范都以它为标准。但在现代开发环境中，显示器分辨率大幅提升，代码阅读窗口的宽度通常远超 80 字符。很多团队把它调到 100、120 甚至 140。

调大 printWidth 的效果是：代码在更多情况下能保持在一行内，减少了换行带来的碎片感。但过大的值会导致行过长、阅读时需要水平滚动，适得其反。

调小 printWidth 的效果是：更频繁地换行，每个逻辑块的元素各占一行。在某些场景下（比如 JSON 配置文件），更窄的行宽确实更易读。但过小的值会让简单的变量赋值也被拆成多行，显得啰嗦。

// printWidth: 80
const result = await fetch("/api/users")
  .then(res => res.json())
  .then(data => data.filter(u => u.active));

// printWidth: 120
const result = await fetch("/api/users").then(res => res.json()).then(data => data.filter(u => u.active));
​

建议根据项目的实际情况选择：大量使用链式调用、Promise 链、长变量名的项目可以适当放宽到 100-120；以配置文件、模板代码为主的项目保持 80 就好。

tabWidth 与 useTabs：缩进的两面

tabWidth 控制缩进的宽度，默认 2。useTabs 控制缩进用 Tab 还是空格，默认 false（用空格）。

在 JavaScript 生态中，两空格缩进是压倒性的主流。四空格缩进在 Python 社区更常见，在 JavaScript 项目中偶尔出现（通常是后端 Java/Python 出身的开发者带来的习惯）。建议保持默认的 2，除非团队有明确的偏好或项目有特殊需求。

useTabs: true 的场景更少。它使用 Tab 字符缩进，好处是不同开发者可以按自己的偏好设置 Tab 宽度（有人喜欢 2、有人喜欢 4），代码文件本身不变。但在实践中，Tab 缩进容易导致 diff 中的对齐问题，而且很多工具对 Tab 的处理不如空格一致。建议保持 useTabs: false，除非有明确的技术原因要用 Tab。

semi：分号的存废之争

semi 控制是否在语句末尾加分号，默认 true。

semi: false 的场景在过去几年变多了。很多新项目选择去掉分号，理由包括：代码更简洁、减少视觉噪音、JavaScript 的 ASI 机制已经足够处理大部分情况。

但去掉分号不是没有代价。ASI 的规则有几个容易踩坑的边界情况：

// semi: false 时的潜在问题
const a = 1    // 紧接着以 [ 开头的行
const b = a    // 这行上面如果有 [ 的话...
[1, 2, 3].forEach(console.log)  // ← ASI 可能不在上一行末尾插入分号
​

Prettier 在 semi: false 时会自动处理这些边界情况——它会在需要分号的位置保留分号或调整换行。所以用 Prettier 的话，去掉分号是安全的。但如果你偶尔脱离 Prettier 环境编辑代码，需要自己注意这些情况。

团队决策建议：如果团队对分号没有强烈的偏好，用默认的 true——它兼容性最好、争议最少。如果团队明确倾向无分号风格，semi: false 配合 Prettier 是安全的。

singleQuote：引号类型

singleQuote 控制字符串字面量使用单引号还是双引号，默认 false（双引号）。

这个配置项的争议不大——纯粹是视觉偏好，不影响任何功能。选择哪个取决于团队习惯。注意 Prettier 只处理普通字符串的引号，不处理 JSX 属性中的引号（JSX 始终用双引号）。

// singleQuote: false（默认）
const name = "Alice";
const greeting = "Hello, " + name;

// singleQuote: true
const name = 'Alice';
const greeting = 'Hello, ' + name;
​

一个值得注意的细节：singleQuote 只决定引号的方向，不决定 JSX 中的引号。JSX 属性的引号由单独的 jsxSingleQuote 配置控制（默认 false，用双引号）。

// singleQuote: true, jsxSingleQuote: false（默认）
const name = 'Alice';       // JS 用单引号
const el = <div name="Alice" />;  // JSX 用双引号
​

trailingComma：尾随逗号

trailingComma 控制多行结构末尾的逗号，可选值 "all"、"es5"、"none"，默认 "all"。

尾随逗号在 git diff 中有明确的好处——当你往数组或对象里加一个元素时，只需要新增一行，不需要修改上一行的末尾来加逗号：

// 有尾随逗号：新增一行只需 add，diff 只有 +1 行
const items = [
  "apple",
  "banana",
  "cherry",  // ← 新增这行，不改上面
];

// 无尾随逗号：新增一行需要 modify + add，diff 有 2 行变更
const items = [
  "apple",
  "banana"   // ← 需要在这里加逗号
  "cherry",  // ← 新增
];
​

建议保持默认的 "all"。"es5" 只在不支持尾随逗号的旧环境（ES3）中才需要考虑，而现在几乎所有目标环境都支持 ES5+。

arrowParens：箭头函数的括号

arrowParens 控制箭头函数单个参数是否加括号，可选值 "always" 和 "avoid"，默认 "always"。

// arrowParens: "always"（默认）
const double = (x) => x * 2;
items.map((item) => item.name);

// arrowParens: "avoid"
const double = x => x * 2;
items.map(item => item.name);
​

"always" 更统一——所有箭头函数都有括号，不管参数有几个。"avoid" 更简洁——单个参数时省略括号。两种选择都有大量拥趸。

从可读性角度看，"always" 在重构时有优势：如果你给函数添加第二个参数，不需要额外加括号。但这个优势在实践中影响很小。

图 3-2：核心配置项速查卡片

endOfLine 与换行符

endOfLine 控制换行符类型，可选值 "lf"、"crlf"、"cr"、"auto"，默认 "lf"。

这个配置在跨平台开发时很重要。Windows 使用 CRLF（\r\n），macOS 和 Linux 使用 LF（\n）。如果同一个文件混合了两种换行符，git diff 会显示整个文件被修改（因为每行的换行符都变了）。

建议统一设为 "lf"——它是现代开发环境的主流，大多数编辑器和 CI 系统都支持良好。即使团队中有 Windows 开发者，现代编辑器（VS Code、WebStorm）都能正确处理 LF 换行符，不会产生显示问题。

"auto" 选项会保持文件中已有的换行符不变，不强制统一。如果你的项目确实需要保持混合换行符（很少见），可以用这个选项。但在大多数情况下，明确指定 "lf" 更安全。

bracketSpacing：花括号内空格

bracketSpacing 控制对象字面量的花括号内是否有空格，默认 true。

// bracketSpacing: true（默认）
const obj = { foo: bar };

// bracketSpacing: false
const obj = {foo: bar};
​

建议保持默认。有空格的版本可读性更好，这是 JavaScript 社区的广泛共识。

整体配置建议

如果你是第一次配置 Prettier，这是一个合理的起点：

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

只改这两项：行宽放宽到 100 适配现代宽屏，引号改成单引号（如果团队偏好如此）。其余全部保持默认。

随着项目的发展，如果遇到具体的不满意之处，再逐项调整。不要一开始就把所有配置项都填上——那等于在重新做 Prettier 已经帮你想好的决策。