ESLint + Prettier 组合实现深度静态检查与格式统一，需正确配置 .eslintrc.cjs、启用 eslint.enable、禁用 js 格式化，并配合 TypeScript 和 @typescript-eslint 插件提升类型检查能力。
用 ESLint + Prettier 组合做静态检查和格式统一
ESLint 是目前最主流的 JavaScript 静态分析工具，它能捕获 undefined 引用、未声明变量、冗余条件等逻辑问题；Prettier 负责代码风格落地。二者在 VSCode 中配合使用，才能真正“深度”而非“表面”分析。
常见错误现象：装了 ESLint 插件但没报错，或报错但不自动修复——大概率是没配 .eslintrc.cjs 或没启用 eslint.enable。
- 必须在项目根目录放配置文件（推荐
.eslintrc.cjs），内容至少包含extends: ['eslint:recommended']和parserOptions: { ecmaVersion: 'latest', sourceType: 'module' } - VSCode 设置里确认
"eslint.enable": true，且关闭"javascript.format.enable": false（避免和 Prettier 冲突） - 安装插件时选官方版：
ESLint（by Dirk Baeumer）和Prettier（by Esben Petersen） - 保存时自动修复需开启：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
用 TypeScript + @typescript-eslint 挖出运行时才暴露的问题
纯 JS 的 ESLint 无法检测类型错误，比如调用一个返回 string | null 的函数后直接访问 .length。加一层 TypeScript 类型系统，再通过 @typescript-eslint 插件桥接，就能提前拦截这类问题。
使用场景：已有 JS 项目想渐进式引入类型检查，或新项目直接用 TS 开发。
- 先初始化 TS：
npx tsc --init，生成tsconfig.json - 安装依赖：
npm install -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -
.eslintrc.cjs中替换 parser 和 plugin：parser: '@typescript-eslint/parser'，plugins: ['@typescript-eslint']，extends: ['plugin:@typescript-eslint/recommended'] - VSCode 必须识别
.ts和.tsx文件——确保工作区打开的是含tsconfig.json的目录，否则插件会静默失效
用 Debugger for Chrome / Node.js 插件做动态执行路径分析
静态分析只能看“写得对不对”，但没法回答“为什么这里值是 undefined”。这时候得靠调试器单步进入、观察作用域链和调用栈。
容易踩的坑：断点打了却不停，或者 debugger 语句被跳过——多半是 sourcemap 没对上或 launch 配置错了。
- 前端调试选
Debugger for Chrome（已弃用）或更推荐的JavaScript Debugger（VSCode 内置，无需额外安装） - Node.js 后端调试，在
.vscode/launch.json中配type: 'node'，request: 'launch'，runtimeExecutable指向你的node可执行路径（尤其多版本共存时） - 确保启动命令带
--inspect-brk（Node）或服务启用了 sourcemap（Webpack/Vite） - 在
console.log前加debugger是最快捷的临时断点方式，但注意它只在 DevTools 或 VSCode 调试会话中生效
用 Code Spell Checker 和 TODO Highlight 辅助人工审查
拼写错误和遗留注释看似无关紧要，但在大型协作项目里，construtor 这种 typo 会导致重构失败，// TODO: remove this 可能被遗忘三年。这些不属于语法或类型范畴，但属于“可维护性深度分析”的一部分。
性能影响极小，但能显著降低团队认知负荷。
-
Code Spell Checker默认不检查字符串字面量，需在设置中开启："cSpell.allowCompoundWords": true，并添加javascript到cSpell.language -
TODO Highlight插件默认只标TODO，如需支持FIXME、HACK，需手动改todo-tree.highlights.customHighlight配置 - 二者都不修改代码，仅高亮提示，适合嵌入日常编码流，不打断节奏
真正“深度”不在插件数量，而在配置是否贴合项目真实约束——比如团队用的是 ES2022，但 ESLint 还按 ES5 配；又比如 TypeScript 已启用 strict: true，但 ESLint 却关掉了 @typescript-eslint/no-explicit-any。这些细节才是分析能否落地的关键。
