Prettier 的 printWidth 到底怎么生效的？

第一步，先说结论：Prettier 的 printWidth 并不是“硬性字节数限制”，它不会在每个字符超过 80 时就机械地断开，而是会结合语法语义、可读性、AST（抽象语法树）结构来智能判断是否换行。

比如你写的这行：

const message = 'This is a very long string that definitely exceeds eighty characters for sure';

它没被换行，是因为 Prettier 默认不会拆分单行字符串字面量，除非你显式开启某些选项（比如 proseWrap 对 markdown 生效，或对 JS 用 htmlWhitespaceSensitivity 之类），但对 JS 字符串它有默认策略：保持字符串完整性优先于 printWidth。

为什么？因为拆开字符串会改变语义——比如：

const msg = 'This is a very long
string split across lines';

和

const msg = 'This is a very long string split across lines';

这两者虽然打印出来可能一样，但源码结构不同，Prettier 不想擅自改你的语法树，尤其像字符串这种“原子性”很强的节点。

不过，好消息是：Prettier 其实支持对长字符串换行，只是需要你显式告诉它——用反引号（模板字符串）或者加注释触发。

比如你可以写成：

const message = This is a very long string that definitely exceeds eighty characters for sure;

然后加上一个 Prettier 的“忽略断行”指令？不，反了——模板字符串本身更容易触发 Prettier 的自动换行逻辑，尤其当它后面跟着其他表达式时。

但更稳妥的方式是：用括号包裹表达式，或者让字符串出现在“需要换行的上下文”里。

比如：

const message = This is a very long string that definitely exceeds eighty characters for sure;

单独一行，Prettier 可能还是不拆——但如果你这样写：

console.log(This is a very long string that definitely exceeds eighty characters for sure);

或者：

const message = This is a very long string that + definitely exceeds eighty characters for sure;

它就会更“愿意”换行，因为加了运算符、函数调用等“断点”，给了 Prettier 更多换行依据。

不过你真正想解决的，应该是：如何让长字符串也强制换行？

有三种实用方案：

第一种：升级 Prettier 到 3.x（2023 年底发布），它默认对长字符串更激进，会自动拆分模板字符串（非单/双引号），比如：

输入：
const msg = This is a very long string that definitely exceeds eighty characters for sure;

输出（Prettier 3.0+ 默认）：
const msg = This is a very long string that definitely exceeds eighty +
characters for sure;

前提是：你用了反引号。单引号/双引号依然可能保留单行（除非你用 --print-width + --parser babel 等组合，但不推荐硬绕）。

第二种：用 prettier-plugin-sort-imports 或 prettier-plugin-css-order 这类插件？不，对字符串无效。

正确插件是：prettier-plugin-sort-imports 不相关，真正有用的插件是 prettier-plugin-jsdoc？也不对。

真正能控制字符串换行行为的是——Prettier 本身的配置 + 语法结构，而不是插件。

第三种：最稳妥方案——手动分段 + 注释断点：

比如你写：

const message = This is a very long string that +
definitely exceeds eighty characters for sure;

或者：

const message =
This is a very long string that definitely exceeds eighty characters for sure;

加个换行空格，Prettier 就会识别为“这里已经手动断开，我尊重你”，但不会反向帮你拆。

不过你可能觉得：我不想手动拆，Prettier 应该帮我做——那恭喜你，Prettier 2.6+ 就引入了 printWidth 对字符串的增强支持，但需要满足：

- 使用模板字符串（反引号）
- 或者字符串出现在“表达式上下文”中（比如函数参数、数组项、对象属性）

举个真实例子：

输入：
const a = ['This is a very long string that definitely exceeds eighty characters for sure'];

输出（Prettier 2.6+）：
const a = [
This is a very long string that definitely exceeds eighty characters for sure,
];

或者更常见的：

doSomething(This is a very long string that definitely exceeds eighty characters for sure);

→
doSomething(This is a very long string that definitely exceeds eighty characters for sure);
（还是不拆？）

等等，为什么？因为单个参数时，Prettier 默认不拆参数列表里的字符串，除非它后面还有参数：

doSomething(This is a very long string that definitely exceeds eighty characters for sure, otherArg);

→
doSomething(
This is a very long string that definitely exceeds eighty characters for sure,
otherArg
);

这才是 Prettier 的真实行为逻辑：它会优先保证结构清晰、可 diff、可合并冲突，而不是死守字符数。

所以回到你的配置，问题不在配置错，而是：

- 你用的是单引号字符串，Prettier 默认保守处理
- 你单独一行写，没有其他上下文，Prettier 觉得“能一眼看清，就不必拆”

要验证这个，你可以试试这个例子：

const message = This is a very long string that definitely exceeds eighty characters for sure and also includes more content to push it further;

在 Prettier 3.x 下，它会自动拆成两行（用 + 拼接），但 2.x 版本可能不拆——所以第一步先确认你 Prettier 版本。

怎么查？运行：

npm list prettier

或者：

npx prettier --version

如果小于 2.6，强烈建议升级（npm install prettier@latest --save-dev）。

如果已经是最新版，还是不拆？那试试这个 trick：

在字符串前加个注释触发 Prettier 的“宽松断行”策略：

// prettier-ignore
const message = 'This is a very long string that definitely exceeds eighty characters for sure';

不，这是忽略格式化！反了。

正确 trick 是：

const message =
This is a very long string that definitely exceeds eighty characters for sure;

加个换行空行，Prettier 会识别为“已手动断开”，但不会帮你再拆。

所以最简单的解决方案就是：

第一步：升级 Prettier 到 3.x（2023 年 11 月起默认对模板字符串智能换行）

第二步：把单引号字符串改成反引号（模板字符串），哪怕没插值

第三步：如果必须保留单引号，考虑用 ... 或 + 显式拼接

第四步：如果项目里全是长字符串，可以加个全局配置项（Prettier 3 支持）：

在 .prettierrc 里加：

{
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"quoteProps": "as-needed",
"bracketSpacing": true,
"arrowParens": "avoid",
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "css",
"embeddedLanguageFormatting": "auto",
"singleAttributePerLine": false
}

⚠️ 注意：Prettier 3 并没有 stringLineWidth 或 forceStringBreak 这类开关，它统一用 printWidth，但策略变了。

最后再给你一个真实测试用例（Prettier 3.0.3）：

输入：
const x = `1234567890123456789012345678901234567