按⌘+s可自动用eslint修复.js/.ts/.vue文件,需配置dbaeumer.vscode-eslint为默认格式器、禁用prettier冲突项、启用codeactionsonsave并正确设置eslint.validate。

Mac上用VSCode写前端代码时,每次保存都要手动右键→“Quick Fix”→点“Fix all eslint problems”,太费时间;想让.js、.vue、.ts文件一按⌘+S就自动按项目里.eslintrc.js的规则修正缩进、分号、引号、空格等,且不和Prettier打架。
确认插件已装且项目有ESLint配置
打开VSCode扩展面板(⇧+⌘+X),搜索并安装:dbaeumer.vscode-eslint(必须)、esbenp.prettier-vscode(可选但建议)、Vue.volar(Vue 3项目)或octref.vetur(Vue 2项目)。【没装eslint插件,后面所有设置都无效】
检查项目根目录是否存在.eslintrc.js、.eslintrc.json或.eslintrc.cjs——没有这个文件,ESLint插件会退回到默认规则,修复结果和你预期不一致。
关闭Prettier与ESLint的格式权冲突
如果你同时用了Prettier和ESLint,必须明确谁管“排版”,谁管“修复”。Prettier只负责空格/换行/引号等纯视觉格式,ESLint才负责语义性问题(如no-unused-vars)和对应修复。否则保存时两边反复覆盖,光标乱跳、波浪线不消失。
在settings.json中删掉或注释掉以下任意一项:
"prettier.eslintIntegration": true,
"eslint.format.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"(全局设Prettier为默认格式器会绕过ESLint)。
这一步不做,即使后面配置全对,保存后也大概率出现「代码变了但ESLint报错还在」的假成功。
配置语言专属默认格式器与保存动作
打开命令面板(⇧+⌘+P),输入Preferences: Open Settings (JSON),回车进入用户settings.json。
粘贴以下内容(适用于Vue 3 + TypeScript + ESLint主流组合):
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"eslint.validate": ["javascript", "typescript", {"language": "vue", "autoFix": true}]
【注意:"[vue]"块里不能写"dbaeumer.vscode-eslint"作为默认格式器——Volar才是Vue单文件组件的正确解析器,ESLint只负责其中的<script>部分修复】</script>
保存settings.json,重启VSCode。此时.vue文件右下角状态栏应显示“Volar”,.ts文件显示“TypeScript Language Features”,而ESLint修复动作由codeActionsOnSave触发,不依赖格式器显示。
验证是否真正生效
方法一:在任意.ts文件里故意写let a=1;(无空格),保存后观察是否自动变成let a = 1;
方法二:在.vue的<script setup>中写一个未使用的变量const unused = 0,保存后看该行是否被自动删除或加上// eslint-disable-line。</script>
方法三:打开命令面板(⇧+⌘+P),输入Developer: Toggle Developer Tools,切换到Console标签页,保存文件后若看到类似“ESLint: fixed 2 problems”的日志,说明source.fixAll.eslint已真实触发。











