VSCode实现“写完就报错”需三要素协同:启用TypeScript语言服务(含javascript.validate.enable:true及jsconfig.json中checkJs:true)、配置ESLint(含npx eslint --init生成规则文件、安装官方扩展、settings.json中eslint.validate和codeActionsOnSave)、安装Error Lens插件并设messageMode为inline或line。

VSCode 默认不主动报 JavaScript 运行时或逻辑错误,只靠语法高亮和基础解析远远不够。要实现「写完就报错」的即时提醒,必须组合启用语言服务 + 静态检查工具 + 可视化增强插件,缺一不可。
确认 TypeScript 语言服务已启用(JS 错误检测的底层依赖)
VSCode 的 JS 提示和错误检查实际由内置的 TypeScript Language Server(TSServer)驱动,不是独立的 JS 引擎。如果它没跑起来,后续所有提示都无效。
- 检查右下角状态栏语言标识是否为
JavaScript,不是Plain Text或JSON;点它手动切一次 - 确保未禁用官方扩展:
TypeScript and JavaScript Language Features必须启用(默认开启,但有人会误关) - 在
settings.json中确认有:"javascript.validate.enable": true—— 这是开启基础语义检查的开关 - 若项目含
jsconfig.json,建议加"checkJs": true,否则 TSServer 默认跳过 JS 文件类型检查
安装并配置 ESLint 实现规则级错误捕获
仅靠 TSServer 只能发现变量未定义、拼写错误等基础问题。no-console、no-unused-vars、eqeqeq 这类工程级规则必须靠 ESLint。
- 项目根目录运行:
npx eslint --init,选中JavaScript modules (import/export)和React(如适用),生成.eslintrc.js - VSCode 中安装官方
ESLint扩展(Microsoft 出品),别装社区同名但维护停滞的版本 - 在
settings.json中配这两项:"eslint.validate": ["javascript"]和"editor.codeActionsOnSave": {"source.fixAll.eslint": true} - 注意:ESLint 不会检查未被 import 的文件,确保
jsconfig.json的"include"字段覆盖所有源码路径(如["src/**/*", "test/**/*"])
用 Error Lens 让错误“贴着代码显示”
默认 VSCode 把错误标在行号旁小图标里,容易漏看。Error Lens 把报错直接打在行尾或行内,视觉锚点强得多。
- 安装扩展:
Error Lens(作者usernamehw,非 fork 版) - 关键配置项:
errorLens.messageMode设为"inline"(行内)或"line"(行尾),别用 hover - 若提示被截断,调大
errorLens.maxMessageLength(默认 120 字符,TS 错误码常超长) - 可配合
errorLens.ignoreRules屏蔽干扰项,比如["no-console"](如果团队允许 console)
常见失效场景与绕过方式
即使上述全配好,仍可能“没提示”。多数时候不是配置错,而是环境没对齐。
-
node_modules没装全?ESLint 规则依赖本地eslint包,全局安装不管用,必须npm install eslint --save-dev - 文件后缀是
.mjs或.cjs?需在settings.json中显式关联:"files.associations": {"*.mjs": "javascript"} - 使用了
import.meta.env等 Vite/Webpack 注入变量?ESLint 默认不认识,要在.eslintrc.js的env里加"browser": true, "node": true或自定义globals - VSCode 输出面板(Output → ESLint)报
Failed to load config?说明配置文件路径或语法有误,删掉.eslintrc.js重跑npx eslint --init
真正卡住人的往往不是“怎么配”,而是某一行 jsconfig.json 路径写错、某个扩展冲突、或 ESLint 没读到项目级配置——这些细节不报错,但让整个链路静默失效。动手前先打开输出面板看日志,比反复改配置更省时间。


















