ESLint与Prettier需分工明确：ESLint管代码质量，Prettier管格式；通过plugin:prettier/recommended禁用冲突规则，VSCode设editor.defaultFormatter为Prettier并关闭eslint.format.enable。
VSCode 本身不提供开箱即用的前端开发体验，必须靠插件组合才能稳定支撑现代工程流。光装插件不够，关键在配置协同和冲突规避。
ESLint + Prettier 怎么配才不打架
常见错误现象：eslint --fix 和 prettier 同时运行时，格式反复被改、保存后代码缩进错乱、单引号双引号来回切。
根本原因不是插件不行，而是规则重叠没剥离。Prettier 负责格式，ESLint 负责逻辑检查，两者必须分工明确。
- 安装
esbenp.prettier-vscode和dbaeumer.vscode-eslint - 在
.eslintrc.js中显式禁用所有格式类规则：extends: ['eslint:recommended', 'plugin:prettier/recommended']（注意是plugin:prettier/recommended，不是prettier） - VS Code 的
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，并关掉"eslint.format.enable" - 不要同时开启
"editor.formatOnSave"和"eslint.autoFixOnSave"—— 只留前者，后者已废弃且易冲突
Vue/React 项目里怎么让跳转和提示真正准
很多开发者装了 Vue Language Features 或 ES7+ React/Redux/React-Native snippets，但 Ctrl+Click 跳不到组件定义，props 提示为空，本质是语言服务没识别到项目结构。
立即学习“前端免费学习笔记（深入）”；
使用场景：Vue 3 + Vite、React 18 + TypeScript 项目，非 CRA 或 Vue CLI 默认模板。
- 确保项目根目录有
tsconfig.json或jsconfig.json，且"compilerOptions.baseUrl"和"paths"配置正确（尤其别漏掉"*": ["*"]） - Vue 项目必须启用
"vue.preferences.useVolar"（Volar 已取代 Vetur），并在设置中关闭旧的vetur - React 项目若用 TypeScript，确认
node_modules/.pnpm或node_modules/.yarn被 TS 语言服务纳入——可通过命令面板执行TypeScript: Restart TS server强制重载 - 路径别名（如
@/components）需在jsconfig.json中声明，否则自动导入和跳转会失效
为什么 Debugger for Chrome 总连不上 localhost
错误信息常为：Unable to launch browser: "Can't find Chrome or Edge" 或断点灰掉、Paused in debugger 却不进断点。
这不是插件问题，而是调试协议链路断在某一层。
- 先确认本地 Chrome 已安装，且路径被识别：Windows 查
where chrome，macOS 查which google-chrome；若未命中，手动在launch.json加"runtimeExecutable": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" -
"webRoot"必须指向实际源码目录，不是构建产物目录；Vite 项目通常是"${workspaceFolder}"，Create React App 则是"${workspaceFolder}/src" - 务必开启 source map：Vite 中设
build.sourcemap: true，Webpack 中设devtool: 'source-map'；否则断点无法映射回源文件 - 如果用 HTTPS 或代理，
url字段必须与浏览器地址栏完全一致（含端口、协议），否则 CDP 连接被浏览器拒绝
Live Server 热重载为啥不生效或报 404
典型表现：改了 index.html 保存后页面不刷新，或访问 /api/users 返回 404，但后端明明在跑。
Live Server 是静态服务器，不代理 API 请求，也不理解构建产物路径。
- 它只适合纯 HTML/CSS/JS 原生项目；Vue/React 项目应直接用框架自带 dev server（
vite dev/npm start），而非 Live Server - 若真要用，必须把构建后的
dist目录设为根目录，并在settings.json中配置"liveServer.settings.root": "./dist" - API 请求 404 是因 Live Server 不支持代理；解决办法只有两个：换用框架 dev server 的 proxy 配置，或装插件
vscode-live-server-proxy手动转发 - 热重载失败大概率是浏览器缓存，加
"liveServer.settings.donotShowInfoMsg": true并手动清缓存，或改用Ctrl+R强制刷新
插件堆得多不代表体验好，真正卡点永远在配置细节：路径映射错一行、source map 关一个开关、TS config 少一个 include，整个智能提示或调试链就断了。这些地方没有容错，也几乎不报明确错误，只能靠经验排查。
