ESlint/Vetur/Prettier配置困惑：如何避免不必要的代码换行？

兄弟，我太懂这种多余换行把代码拆得稀碎、关键内容被挤出视野的痛苦了——尤其是调了printWidth还没效果的时候，简直是格式噩梦😤。结合我踩过的坑，给你一步步排查解决：

1. 先搞清楚是谁在“强制换行” #

多个工具一起用，大概率是规则冲突或者某工具的配置没生效。先定位根源：

• 临时禁用VS Code里的ESLint插件，保存代码看换行是否消失——如果消失，说明是ESLint的换行规则在搞鬼；
• 再临时禁用Prettier插件（或者把Vetur的格式化器改成其他），看情况——如果换行消失，问题出在Prettier/Vetur的配置。

2. 对齐ESLint和Prettier的规则 #

ESLint的max-len、linebreak-style等规则很容易和Prettier的printWidth冲突。解决办法是让ESLint“服从”Prettier：

• 安装依赖：npm install eslint-config-prettier eslint-plugin-prettier --save-dev
• 在你的.eslintrc.js（或其他ESLint配置文件）里修改extends：

module.exports = {
  extends: [
    // 其他你的基础规则
    "plugin:prettier/recommended" // 这行要放在最后，覆盖前面的规则
  ]
}

这会自动禁用ESLint中与Prettier冲突的规则，同时让ESLint把Prettier的格式问题当成自己的错误提示。

3. 让Vetur乖乖用Prettier的配置 #

Vetur默认会整合格式化工具，但它的局部配置可能会覆盖Prettier的设置：

• 打开VS Code的settings.json，确保Vetur的默认格式化器都指向Prettier：

"vetur.format.defaultFormatter.vue": "prettier",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.options.printWidth": 120, // 这里要和你Prettier配置里的printWidth一致
"vetur.format.options.wrapAttributes": "auto" // 关键！这个设置如果是force-aligned会强制属性换行，改成auto只在超宽时换行

4. 检查Prettier配置的有效性 #

确保项目根目录的.prettierrc（或.prettierrc.js）配置正确，且没有被全局设置覆盖：

• 示例.prettierrc：

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": false,
  "wrapAttributes": "auto"
}

• 检查VS Code全局设置里是否有prettier.printWidth——如果有，要么改成和项目一致，要么在项目配置里明确指定（局部配置优先级更高）；
• 如果项目里有.editorconfig，确保里面的max_line_length和Prettier的printWidth一致，Prettier会读取EditorConfig的设置。

5. 特殊情况：Vue模板的换行问题 #

如果是Vue单文件组件的template部分出现不必要换行，除了上面的wrapAttributes设置，还要检查：

• Vetur的vetur.format.options.template里有没有额外的换行规则；
• Prettier的vueIndentScriptAndStyle设置是否会间接影响模板的换行（一般默认false就好）。

按照这个流程排查下来，90%的多余换行问题都能解决。先从定位根源开始，再逐个击破配置冲突，别慌！

内容的提问来源于stack exchange，提问作者Weidz