VSCode如何查看和修复语法错误_Linter工具配置指南

VSCode 本身不自带语法检查能力，所有红色波浪线、悬停提示、问题面板里的 Parse error 或 Unexpected token 都来自你装的 Linter 工具——没配对的 Linter，光靠 VSCode 是“看不见”语法错误的。

VSCode 本身不自带语法检查能力，所有红色波浪线、悬停提示、问题面板里的 Parse error 或 Unexpected token 都来自你装的 Linter 工具——没配对的 Linter，光靠 VSCode 是“看不见”语法错误的。

为什么装了 ESLint / Prettier 还没红波浪线？

常见原因是：Linter 没启用、配置文件缺失、或 VSCode 没识别到项目上下文。

• eslint 必须在项目根目录有 .eslintrc.js、.eslintrc.json 或 package.json 里含 eslintConfig 字段，否则插件默认不运行
• VSCode 的 eslint 插件（由 dbaeumer.vscode-eslint 提供）只对已打开的文件夹/工作区生效，直接双击打开单个 .js 文件时通常不触发
• 如果用了 npm init -y 新建项目但没装 eslint，需手动运行：

  npm install eslint --save-dev

  再初始化配置：

  npx eslint --init

ESLint + TypeScript 项目报 Cannot find module 'typescript'

这是 eslint 在解析 TS 语法时找不到 typescript 包，不是类型检查失败，而是解析器加载失败。

无界AI

一站式AI创作、搜索、分享服务

下载

• 确保本地安装了 typescript（不是全局）：

  npm install typescript --save-dev

• 检查 .eslintrc.js 中是否正确配置了解析器：

  module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended']
  };

• 若用 yarn，注意 yarn berry（v3+）默认开启 pnp，需额外设置 ESLINT_USE_FLAT_CONFIG=false 环境变量或降级使用传统 node_modules

Prettier 和 ESLint 冲突：保存后格式化又报错

典型表现是：保存自动用 Prettier 格式化代码，结果 ESLint 立刻标出 semi、quotes 等错误——说明两者规则没对齐。

• 不要让 Prettier 和 ESLint 同时管“风格类规则”，应由 ESLint 统一接管，Prettier 只做基础格式化
• 推荐组合：eslint-config-prettier 关闭 ESLint 所有格式化规则，再用 eslint-plugin-prettier 把 Prettier 当作 ESLint 的一个规则来跑
• 关键配置片段：

  module.exports = {
    extends: [
      'eslint:recommended',
      'plugin:prettier/recommended' // 自动包含 eslint-config-prettier + plugin-prettier
    ]
  };

• VSCode 设置中禁用 editor.formatOnSave（设为 false），改用 editor.codeActionsOnSave 触发 ESLint 修复：

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

最常被忽略的一点：Linter 配置是按工作区生效的，不是全局。换项目前记得确认右下角状态栏显示的是当前项目的 ESLint 版本和配置路径，而不是“Disabled”或“Fallback config”。