VSCode ESLint插件本身不带规则,必须本地安装匹配项目类型的规则包并显式配置,否则仅提示无校验;全局安装无效,且需确保package.json依赖已执行install。

VSCode 代码风格检查插件本身不带规则,必须显式安装并配置对应规则包,否则插件只是个“空壳”——有提示无校验,保存也不修复。
ESLint 规则包必须本地安装且匹配项目类型
VSCode 的 ESLint 插件(dbaeumer.vscode-eslint)只读取项目 node_modules 里的 eslint 和规则包,全局安装无效。它不会自动帮你选规则,得你明确告诉它用哪一套。
- 基础 JavaScript 项目:运行
npm install --save-dev eslint eslint-config-standard,然后在.eslintrc.cjs中写extends: ['standard'] - TypeScript 项目:额外装
@typescript-eslint/eslint-plugin和@typescript-eslint/parser,extends加'plugin:@typescript-eslint/recommended',且parser设为'@typescript-eslint/parser' - Vue 3 项目:加
eslint-plugin-vue,extends包含'plugin:vue/vue3-essential',别漏掉parserOptions.parser指向 TS 解析器(若用 TS) - React 项目:装
eslint-plugin-react和eslint-plugin-react-hooks,extends加'plugin:react/recommended'和'plugin:react-hooks/recommended'
常见错误现象:ESLint: Cannot find module 'eslint-plugin-vue' —— 不是插件没装,而是没装到当前项目里,或 package.json 没执行过 install。
Prettier 规则靠 .prettierrc 文件驱动,不是插件自带
Prettier 插件(esbenp.prettier-vscode)不内置任何格式偏好,它只执行你写的 .prettierrc(或 prettier.config.js)里的配置。没有这个文件,它就用默认值(比如单引号、2 空格缩进),和团队规范大概率不一致。
- 必须把
.prettierrc放在项目根目录,内容用纯 JSON 或导出对象,不能带注释 - 典型配置示例:
{"semi": false, "singleQuote": true, "tabWidth": 2, "endOfLine": "lf"} - 如果项目用 TypeScript,确认
prettier版本 ≥ 2.8(2023 年后发布),否则.ts文件可能被跳过 - 不要在 VSCode 设置里硬编码
"prettier.semi": false—— 这会覆盖.prettierrc,导致跨机器不一致
Stylelint 规则包需手动指定,CSS-in-JS 和 Vue SFC 要额外处理
stylelint 默认只检查 .css 文件,.vue 里的 <style> 或 .tsx 里的 styled-components 都需要显式启用解析器和插件。
- 基础安装:
npm install --save-dev stylelint stylelint-config-standard,配.stylelintrc.json为{"extends": "stylelint-config-standard"} - 要检查
.vue文件:装stylelint-config-html或stylelint-config-standard-scss(如用 SCSS),并在.stylelintrc.json的overrides里加{"files": ["**/*.vue"], "customSyntax": "postcss-html"} - 检查 CSS-in-JS(如
styled-components):装stylelint-config-styled-components和postcss-styled,customSyntax改为"postcss-styled" - 常见错误现象:修改了
.vue里的样式却没报错——本质是stylelint根本没识别到那段 CSS,因为没配customSyntax
EditorConfig 是唯一跨工具的底线规则,但只管格式不管逻辑
.editorconfig 不是可选项,它是编辑器间格式统一的“保底层”。它不依赖 Node、不走插件、不校验逻辑,只强制缩进、换行、空格等基础行为。但它的规则粒度很粗,无法替代 ESLint/Stylelint。
- 必须放在项目根目录,首行写
root = true,否则子目录可能读不到 -
indent_size = 2对 JS/TS 有效,但对 CSS 可能要单独写段落:[*.css] indent_size = 4 - 别写
indent_style = "space"—— 值不能加引号,否则 VSCode EditorConfig 插件直接忽略整段 - 它不处理引号、分号、变量命名等,这些必须交给 ESLint 或 Prettier;混用时,
.editorconfig的缩进设置会被 Prettier 尊重,但不能替代 Prettier 的完整格式能力
真正容易被忽略的是:规则包版本锁死。比如 eslint-config-standard@30 和 @typescript-eslint/eslint-plugin@6 组合可能有冲突,建议用 npm ls eslint-config-standard 检查实际安装版本,并参考各规则包的官方兼容矩阵。


















