真正起作用的是 eslint、prettier 和 .vscode/settings.json 的协作:eslint 负责代码正确性,prettier 负责格式美观,settings.json 控制执行时机与主体;任一环节配置缺失或冲突都会导致规范失效。

VSCode 插件装错或配置冲突,JS 代码规范就形同虚设;真正起作用的不是插件列表,而是 eslint、prettier 和 .vscode/settings.json 三者之间的协作关系。
为什么 ESLint 插件不报错?检查 eslint.validate 和项目配置文件
常见错误现象:装了 ESLint 插件,但 JS 文件里写 console.log 或未声明变量,编辑器毫无反应。
- 确认项目根目录存在
.eslintrc.js或.eslintrc.json,否则插件只走默认规则(极弱) - VSCode 设置中必须显式启用校验:
"eslint.validate": ["javascript", "javascriptreact"],缺一不可 - 禁用 VSCode 内置 JS 校验:
"javascript.validate.enable": false,避免和 ESLint 冲突 - 多包项目(如 monorepo)需配置
"eslint.workingDirectories": [{ "mode": "auto" }],否则子包里不生效
prettier 格式化后代码变丑?优先级和规则禁用是关键
常见错误现象:保存后引号从单引号变双引号、括号换行错乱、尾随逗号被删——说明 Prettier 和 ESLint 规则在打架。
- 必须安装
eslint-config-prettier并在.eslintrc.js的extends中末尾加入"prettier",否则 ESLint 会覆盖 Prettier 格式 -
.prettierrc里只管格式,别写语义规则(如no-console),那是 ESLint 的事 - VSCode 设置中指定格式化器:
"editor.defaultFormatter": "esbenp.prettier-vscode",且仅对 JS/TS 启用:"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 不要同时开启
editor.formatOnSave和editor.codeActionsOnSave里的source.fixAll.eslint,除非你明确需要 ESLint 修复逻辑问题 + Prettier 负责排版
settings.json 该放全局还是工作区?路径和作用域决定行为
常见错误现象:团队成员格式化结果不一致,有人缩进 2 空格,有人 4 空格,有人自动插入分号,有人不插。
- 团队规范必须锁死在项目级:
.vscode/settings.json(非用户级设置),Git 提交该文件 - 关键字段示例:
"editor.tabSize": 2、"files.autoSave": "off"(避免未完成代码触发 lint 报错)、"editor.formatOnSave": true - 语言专属配置必须用方括号语法:
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },否则对 .tsx 文件无效 -
editor.detectIndentation必须设为false,否则 VSCode 会读取文件已有缩进而覆盖你的tabSize
真正难的不是装插件,而是让 eslint 只管“对不对”,prettier 只管“好不好看”,settings.json 只负责“谁来执行、何时执行”。三者之间任何一环漏配,规范就断在编辑器里。











