launch.json配置错误会导致debugger失效，因runtimeexecutable和sourcemaps不匹配实际执行路径，表现为断点灰色、跳转到dist而非src、报“no debug adapter installed”等；需正确设置outfiles、sourcemappathoverrides，并避免混用node与npm run dev。
ESLint 和 Prettier 不是“优化 JS 运行环境”的插件——它们不参与代码执行，只做静态检查与格式化。真正影响 JS 运行行为的，是 Node.js 版本、调试配置、Babel 转译链路，以及 VSCode 的 launch.json 或 tasks.json 设置。想让 JS 代码跑得稳、调得清、改得快，得从这三块下手。
为什么 launch.json 配置错会导致 debugger 直接失效
VSCode 的 JS 调试依赖于 launch.json 中的 runtimeExecutable 和 sourceMaps 是否匹配实际执行路径。常见错误现象包括：
- 断点灰色不可用，控制台报
Could not read source map - 调试时跳转到
dist/main.js而不是src/index.js -
node --inspect启动后 VSCode 显示 “No debug adapter installed”
关键解决点：
- 若用 Babel 编译，必须在
.babelrc或babel.config.json中启用"sourceMaps": "inline"或"sourceMaps": true，并确保输出文件带映射 -
launch.json中outFiles要指向编译后目录（如["./dist/**/*.js"]），且sourceMapPathOverrides需显式重映射："webpack:///./src/*": "./src/*"（即使没用 webpack，Babel 生成的 sourcemap 也常带此前缀） - 避免混用
node和npm run dev：前者直接运行 JS 文件，后者可能启动 watch 进程，导致调试器 attach 失败
如何让 VSCode 正确识别 ES2022+ 语法而不报红
VSCode 默认用内置 TypeScript 语言服务解析 JS 文件，但它的类型检查和语法支持受 jsconfig.json 控制。仅靠安装插件或升级 Node.js 无法解决 ??=、Array.prototype.findLast 等新特性标红问题。
实操建议：
- 项目根目录必须存在
jsconfig.json（哪怕空对象{}），否则 TS 服务退化为基础 JS 模式 - 显式声明
"compilerOptions": { "target": "ES2022", "lib": ["ES2022", "DOM"] }，否则默认按ES5解析 - 禁用
"allowSyntheticDefaultImports": false（若用 ESM + CommonJS 混合模块），否则import _ from 'lodash'会报错 - 不要依赖
typeRoots或types字段来补全原生 API —— 它们只影响第三方声明，原生方法由lib决定
Babel 插件链中哪些 preset 必须手动加，哪些会被 ESLint 干扰
@babel/preset-env 是核心，但它默认只转译目标环境不支持的语法，不会处理 import.meta.url 或 class static block 等 Stage 3+ 提案。而 ESLint 的 eslint:recommended 规则集会把未声明的全局变量（如 process）标为 error，即使 Babel 已经把它转成兼容代码。
容易踩的坑：
-
@babel/preset-env必须配"targets": { "node": "current" }或明确版本（如"18.17"），否则 Babel 可能跳过转译，导致 Node 报SyntaxError: Unexpected token '{' -
@babel/plugin-proposal-class-properties和@babel/plugin-proposal-nullish-coalescing-operator等需单独安装并写入plugins数组 ——preset-env默认不包含 Stage 3 插件 - ESLint 的
env: { node: true }只是告诉 ESLint 允许__dirname等全局变量，**不影响 Babel 行为**；若 Babel 没转译成功，运行时仍会崩 - 使用
babel-plugin-transform-runtime时，务必设"useESModules": true，否则生成的 helper 代码可能引入require()，破坏 ESM 环境
调试时 console.log 看不到 this 上的属性？这不是插件问题
这是 V8 引擎的调试器限制：当对象属性是 getter、Symbol 键、或 Proxy 包裹时，VSCode 的 Variables 面板默认不展开。它和插件无关，但可通过配置绕过。
有效办法：
- 在
launch.json中添加"skipFiles": ["<node_internals>/**"]</node_internals>，减少干扰，让焦点回到用户代码 - 用
debugger断点后，在 Debug Console 中手动输入console.dir(obj, { depth: null })查看完整结构 - 在
settings.json中启用"debug.javascript.autoAttachFilter": "always"（仅限 Node.js 16+），避免 attach 失败导致上下文丢失 - 不要依赖插件“增强 console”，所有 console 输出都走同一 V8 日志通道，插件只能做格式化，不能改变可见性逻辑
jsconfig.json 的存在与否，以及 launch.json 里 sourceMapPathOverrides 的路径映射是否与实际 sourcemap 一致——这两处一错，整个调试链就断了，再装十个插件也没用。
