前端开发常用的VSCode代码纠错规则推荐-VSCode-PHP中文网

eslint是唯一值得投入配置的代码纠错工具，因其基于规则驱动，可覆盖语义、风格、安全等多层问题，而vscode内置javascript语言服务仅支持基础语法提示，无法检测逻辑错误、团队约定或风格缺陷。

前端开发常用的vscode代码纠错规则推荐

ESLint 是前端开发中唯一值得投入配置的代码纠错工具，其他所谓“语法检查”插件基本是摆设。

为什么只认 ESLint 而不是内置 JavaScript 语言服务

VSCode 自带的 JavaScript 语言服务（基于 TypeScript Server）能提示基础语法错误，比如 undefined is not a function 或拼错变量名，但它不检查逻辑问题、风格缺陷或团队约定。例如它不会报错 console.log、不会警告 == 比较、也不会发现未使用的函数参数。

ESLint 则不同：它靠规则驱动，可覆盖语义层、风格层、安全层。比如 no-console、eqeqeq、no-unused-vars 这类规则，必须靠 ESLint 显式启用才生效。

不装 ESLint 插件 → 保存时零反馈，写完才发现 CI 报错
装了但没配 eslint.validate → 只对 .js 文件生效，.jsx/.ts 文件静默失效
配了但没开 editor.codeActionsOnSave → 错误标红了，却不能 Ctrl+S 自动修

推荐开箱即用的规则组合

别从头写 .eslintrc.js。直接用社区成熟 preset，再按需微调：

纯 JS 项目：用 eslint:recommended + eslint-config-prettier（禁用所有与 Prettier 冲突的规则）
React 项目：加 plugin:react/recommended 和 plugin:react-hooks/recommended，否则 useEffect 依赖数组漏写不会报警
TypeScript 项目：必须加 plugin:@typescript-eslint/recommended，否则 any 类型、隐式 any 参数全被放过

示例最小可行配置（.eslintrc.js）：

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

module.exports = {
  env: { browser: true, es2021: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  rules: {
    'no-console': 'warn',
    'eqeqeq': 'error',
    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
  }
};

VSCode 里必须配的三项设置

光有 ESLint 配置文件还不够，VSCode 必须显式告诉它“什么时候跑、对哪些文件跑、怎么修”：

"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"] —— 不加 javascriptreact，.jsx 文件里的 JSX 语法就不会被检查
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } —— 这才是“Ctrl+S 自动修”的开关，比 editor.formatOnSave 更精准（后者只格式化，不修复逻辑）
"eslint.useFlatConfig": false —— 当前（2026 年）多数项目仍用传统 .eslintrc.js，设为 false 才能正确加载；若项目已升级到 ESLint v9 的 flat config，则改用 true 并配 eslint.config.mjs