如何在VSCode中解决ESLint与Prettier的格式化冲突

星明酱_1875

星明酱_1875

2026-04-12

292人浏览

原创

ESLint 与 Prettier 冲突源于职责混淆:ESLint 应专注逻辑错误,Prettier 负责格式;需禁用 ESLint 格式规则、关闭其自动修复、确保 eslint-config-prettier 在 extends 末尾,并配置 VSCode 仅由 Prettier 格式化。

如何在vscode中解决eslint与prettier的格式化冲突

ESLint 与 Prettier 冲突不是工具问题,而是职责没划清:ESLint 应只管逻辑错误和潜在 bug,Prettier 才负责代码长啥样。只要把格式类规则从 ESLint 剥离、禁用其自动格式化、确保配置加载顺序正确,红黄波浪线就会消失。

为什么保存后波浪线反复闪、代码越修越乱

典型表现是:你按 Ctrl+S,Prettier 把 const a = 1 改成 const a = 1;(加了分号),ESLint 立刻报错 “Missing semicolon” —— 实际上它刚看到的是没分号的原始代码,而 Prettier 还没写入文件或写入后 ESLint 没刷新缓存。更糟的是,如果 eslint.autoFixOnSave 和 editor.formatOnSave 同时开启,两者会轮流覆盖对方结果。

  • 根本原因不是版本不兼容,而是 ESLint 仍在检查 indent、quotes、semi、comma-dangle 这类纯格式规则
  • eslint-config-prettier 必须出现在 .eslintrc.js 的 extends 数组末尾,否则前面的配置(比如 airbnb 或 standard)会把它覆盖掉
  • VSCode 默认不区分“校验”和“格式化”,两个插件都监听 save 事件,等于让两个人同时改同一张草稿纸

如何配置 .eslintrc.js 让 ESLint 不再管格式

目标是让 ESLint 完全信任 Prettier 的输出,只报 undefined is not a function 这类真问题,不报 Expected indentation of 2 spaces but found 4 这种风格问题。

  • 安装依赖:npm install --save-dev eslint-config-prettier eslint-plugin-prettier
  • 在 .eslintrc.js 中确保 extends 包含 "prettier",且它在数组最后:["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended", "prettier"]
  • 显式关闭冲突规则(保险起见):rules: { "prettier/prettier": "error" } —— 这条让 ESLint 把 Prettier 格式错误也当问题标出来,但不再自己修
  • 删掉所有手动写的格式类 rule,比如 "semi": ["error", "always"] 或 "indent": ["error", 2],它们会和 prettier 配置打架

VSCode 设置必须关掉 ESLint 的 auto-fix

很多人装完插件就以为万事大吉,其实 VSCode 默认不会协商谁来动代码。关键开关就在设置里,不是靠插件自动识别。

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • 在 VSCode 设置中搜索 eslint.autoFixOnSave,设为 false
  • 确认 editor.formatOnSave 是 true,且 editor.defaultFormatter 明确设为 esbenp.prettier-vscode
  • 为防语言特例干扰,建议在项目级 .vscode/settings.json 里写死:"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
  • 不要开 prettier.eslintIntegration(已废弃),这个旧配置会让 Prettier 去读 ESLint 规则,反而绕回冲突原点

验证配置是否生效的三个硬指标

别只看有没有波浪线,要盯住三个动作是否符合预期:保存时只触发一次格式化、ESLint 只报逻辑错误、手动运行 eslint --fix 不动格式。

  • 保存一个带空格缩进的函数,观察是否变成 tabWidth 指定的空格数(来自 .prettierrc),而不是被 ESLint 的 indent 规则拉回去
  • 删掉一个 console.log 后面的分号,ESLint 应该不报错 —— 因为 semi 规则已被 eslint-config-prettier 关闭;但如果 .prettierrc 设了 "semi": false,Prettier 会在保存时自动删掉它
  • 在终端执行 npx eslint src/ --fix,输出里不应出现 ✖ 123 problems (0 errors, 123 warnings) 这类格式警告,只应有 no-unused-vars 或 no-undef 类错误

最容易被忽略的是工作区设置和全局设置的优先级差异:即使你在项目 .vscode/settings.json 里写对了,如果用户全局设置了 editor.defaultFormatter 为另一个插件,它仍会生效。每次遇到诡异行为,第一反应应该是打开命令面板(Ctrl+Shift+P),输入 Preferences: Open Workspace Settings (JSON),直接看当前项目生效的配置到底是什么。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2215

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3522

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1176

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

4059

7

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.18

1029

5

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.25

3200

5

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2023.09.20

2318

7

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4636

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1395

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程