断点失效主因是launch.json中漏配sourceMapPathOverrides或webRoot:webRoot须指向服务根目录(如"${workspaceFolder}/dist"),sourceMapPathOverrides需匹配sourcemap路径前缀,如"webpack:///./src/*": "${workspaceFolder}/src/*"。

为什么 debugger for chrome 无法断点?
不是插件没装对,而是 launch.json 配置里漏了 sourceMapPathOverrides 或 webRoot。本地开发时路径映射错位,VS Code 就找不到源码对应位置,断点自然失效。
-
webRoot必须指向你实际启动服务的根目录(比如"${workspaceFolder}/dist"或"${workspaceFolder}"),不是 src -
sourceMapPathOverrides要匹配构建工具输出的 sourcemap 中的路径前缀,常见写法:"webpack:///./src/*": "${workspaceFolder}/src/*" - 如果用 Vite,
resolveSourceMapLocations可能更稳,但需 VS Code 1.85+,旧版本直接靠sourceMapPathOverrides
eslint + prettier 冲突时谁该让步?
让 eslint 管逻辑、prettier 管格式——这是唯一不撕逼的解法。硬要让 ESLint 去校验缩进或分号,等于拿扳手拧螺丝,徒增配置负担。
- 安装
eslint-config-prettier,并在.eslintrc.js的extends末尾加上它,关闭所有格式类规则 -
prettier配置只保留printWidth、tabWidth、semi、singleQuote这几个关键项 - VS Code 设置里把
editor.defaultFormatter设为esbenp.prettier-vscode,editor.formatOnSave开启,别同时开editor.codeActionsOnSave的 ESLint auto-fix,容易打架
Vue/React 组件里鼠标悬停看不到 props 类型?
光装 Volar(Vue)或 ESLint + TypeScript(React)不够,还得确认 TS Server 是否真正加载了项目类型定义。
- 打开命令面板(
Ctrl+Shift+P),运行Typescript: Restart TS server,尤其在node_modules更新后 - Vue 项目确保
tsconfig.json中包含"include": ["src/**/*"],且没有被exclude错误覆盖 - React + TS 项目若用
@types/react,版本必须与react主版本对齐,比如react@18.3对应@types/react@18.3,否则 hover 提示为空
Path Intellisense 补全路径却总跳到 node_modules?
它默认从当前文件所在目录向上找 node_modules,一旦项目结构复杂(比如 monorepo 或嵌套 workspace),就容易误判根目录。
- 在
settings.json里加"path-intellisense.mappings",手动指定常见别名路径,例如:"@": "${workspaceFolder}/src" - 禁用
"path-intellisense.autoSlashAfterDirectory"可避免补全后多出一个/,尤其在 Windows 下容易引发路径错误 - 如果用 pnpm,
node_modules是硬链接,插件有时会扫描失败,此时建议配合alias插件或改用Import Cost类工具辅助路径判断


















