ESLint报错反复出现是因插件冲突或规则覆盖:eslint-config-prettier必须置于extends末尾以禁用冲突规则;需关闭eslint.autoFixOnSave,仅启用editor.formatOnSave并指定Prettier为默认格式化器。

VSCode里ESLint报错但格式化后又出现,基本就是多个插件在抢着检查同一行代码——不是规则写错了,是规则被重复加载或互相覆盖了。
为什么eslint-config-prettier放错位置会导致规则失效
它不提供新规则,只负责关掉和Prettier冲突的已有规则;如果写在extends数组中间,前面的配置(比如plugin:node/recommended)会重新打开semi、quotes等规则,后面再加prettier也白搭。
- 错误顺序:
["plugin:node/recommended", "prettier", "eslint:recommended"]→eslint:recommended在最后,把分号规则又开了 - 正确顺序:
["eslint:recommended", "plugin:node/recommended", "plugin:prettier/recommended", "prettier"]→prettier必须压轴 - 验证方式:打开开发者工具(
Ctrl+Shift+I),在 Console 里搜ESLint couldn't find the config或Failed to load config,说明某条extends路径无效
eslint.autoFixOnSave和editor.formatOnSave同时开启会反复格式化
两者监听同一个保存事件,但执行逻辑不同:ESLint尝试修复no-unused-vars这类问题,Prettier调整空格缩进。一旦都开着,文件可能被改两次,波浪线闪个不停,光标还跳。
- 必须关掉
eslint.autoFixOnSave(设为false),只留editor.formatOnSave: true - 确认
editor.defaultFormatter明确指向esbenp.prettier-vscode,而不是dbaeumer.vscode-eslint - 检查
settings.json里有没有残留的"eslint.format.enable": true,这个选项会让ESLint插件也参与格式化,直接删掉
Vetur + ESLint + Prettier共存时vue/first-attribute-linebreak报错怎么解
Vetur默认用prettyhtml格式化模板,而ESLint的vue/first-attribute-linebreak规则按自己理解判断换行是否合法,两者对“单行属性是否该折行”看法不一致,就会红波浪线不断。
- 不要动Prettier的
printWidth去硬扛——它管JS/TS/CSS,不管Vue模板换行逻辑 - 在
.eslintrc.cjs里显式关掉相关规则:"vue/first-attribute-linebreak": "off"、"vue/html-closing-bracket-newline": "off" - 或者按Vetur官方建议,在
settings.json中配"vetur.format.options.wrapAttributes": "auto",让格式化行为和ESLint检查对齐
真正难的不是配对规则,而是意识到VSCode不会自动协商谁该说话——你得亲手关掉所有冗余入口,只留一个权威来源,否则哪怕只多开一个插件,缓存、激活状态、LSP实例都会悄悄打架。


















