Prettier的printWidth设置后,为什么长字符串还是自动换行?
在React组件里写了一个长字符串变量,按照文档把.eslintrc里的printWidth设成120了,但保存时长字符串还是被强制换行了…
代码像这样:
const description = '这个说明文字特别长需要保持单行显示这个说明文字特别长需要保持单行显示这个说明文字特别长需要保持单行显示';
结果保存后变成
const description = '这个说明文字特别长需要保持单行显示这个说明文字特别长需要保持单行显示
这个说明文字特别长需要保持单行显示';
试过直接在代码里加// prettier-ignore注释倒是能解决,但想知道为什么printWidth设置失效?是不是和其他配置冲突了?
printWidth根本没被 Prettier 读到,因为 ESLint 和 Prettier 是两套配置体系。Prettier 默认读的是
.prettierrc、.prettierrc.json、.prettierrc.js或package.json里的prettier字段,不是 ESLint 的配置。你现在的
printWidth: 120如果只写在.eslintrc里,那是 ESLint 的规则,对 Prettier 不生效——Prettier 用的还是默认的 80 列,所以你看到长字符串还是被切成了两行。解决办法有两个:
一个是把 Prettier 的配置单独拎出来,比如在项目根目录新建
.prettierrc文件,内容写成:另一个是如果你用的是
prettier-eslint或eslint-config-prettier这类集成方案,得确认 ESLint 的 Prettier 插件是否正确桥接了配置——但最稳妥还是直接让 Prettier 自己管理自己的配置。另外提醒一句:中文字符在 Prettier 里是按 UTF-16 code unit 计数的,一个中文算 1 个字符,不是 2 个,所以你这串文字大概 100+ 字符,确实超过 80 会断行。
如果配完还是不行,可以贴下你的 Prettier 相关配置文件结构,我帮你看看是不是被其他规则覆盖了,比如
proseWrap或trailingComma一般不影响,但某些插件(比如 React 的jsx-single-quote)有时候会混着用导致误会。重点是printWidth只控制代码行宽,但对字符串内容本身不是绝对生效。特别是中文这种没有空格分隔的文本,Prettier分析词边界时容易直接按字符数硬切。
解决方案有两个:
第一种是改Prettier配置,在.prettierrc里加
这样就能禁止文本换行了。
第二种是保持现有配置,把字符串改成模板字符串,用括号包起来
这样Prettier会当作表达式处理,就不会拆分了。
推荐用第一种,一劳永逸。另外确认下你是不是.eslintrc里混着写Prettier配置?那玩意儿不生效的,得单独放.prettierrc文件里。