真正提升前端开发流程的是关键插件的精准配置与协同：禁用Live Server自动开浏览器、ESLint优先于Prettier执行修复、JS项目需jsconfig.json支持@别名跳转、Auto Rename Tag须显式启用javascriptreact/typescriptreact语言ID。
真正提升前端开发流程的不是插件数量，而是几个关键插件的精准配置和协同使用。装一堆插件但没调好，反而拖慢编辑器、掩盖真实问题。
Live Server 必须关掉自动打开浏览器
默认启用 liveServer.settings.donotShowInfoMsg 和 liveServer.settings.CustomBrowser 后，每次保存都会弹新窗口——尤其调试多端时极易混乱。实际开发中更需要的是：本地服务稳定运行 + 手动控制访问入口。
- 在
settings.json中显式禁用："liveServer.settings.donotShowInfoMsg": true - 把浏览器控制权交还给开发者：
"liveServer.settings.CustomBrowser": "none" - 配合快捷键（如
Ctrl+Shift+P→Live Server: Open with Live Server）按需启动，避免后台常驻多个服务实例
Prettier 和 ESLint 冲突时优先保留 ESLint 规则
两者都做格式化，但职责不同：ESLint 检查逻辑与规范，Prettier 只管视觉风格。强行让 Prettier 覆盖 no-unused-vars 或 react/prop-types 这类规则，会导致错误被静默吞掉。
- 在
.eslintrc.js中加入：extends: ['eslint:recommended', 'prettier']，而非反过来 - 安装
eslint-config-prettier关闭所有与 Prettier 重叠的格式类规则 - VSCode 设置里只启用
"editor.formatOnSave": true，且指定 formatter 为esbenp.prettier-vscode，但确保 ESLint 的"editor.codeActionsOnSave": {"source.fixAll.eslint": true}也开启——这样先修逻辑错误，再统一格式
Path Intellisense 对 @/ 别名跳转失效？检查 jsconfig.json 而非 tsconfig.json
Vue 或 Vite 项目常用 @/components/Button.vue 这种写法，但 Ctrl+Click 跳转失败，90% 是因为路径映射没生效。很多人只配了 tsconfig.json，却忽略了 JS 项目根本不用它。
立即学习“前端免费学习笔记（深入）”；
- 必须在项目根目录建
jsconfig.json（哪怕没用 TypeScript），内容至少包含：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - VSCode 不会自动重载该配置，改完后执行命令面板里的
Developer: Reload Window - 如果用了
vite-plugin-define或自定义 alias，还需在 Vite 配置中同步声明，否则构建能跑、编辑器跳转仍失败
Auto Rename Tag 在 JSX 中不生效？确认 language ID 是否匹配
插件默认只监听 html、xml、vue，React 的 .jsx 文件 language ID 是 javascriptreact，不在默认列表里，所以改 <div> 不会同步 </div>。
- 在
settings.json中补全："auto-rename-tag.activationOnLanguage": ["html", "xml", "vue", "javascriptreact", "typescriptreact"] - 验证当前文件 language ID：右下角状态栏点击语言名称（如 “JavaScript React”），确认显示的是
javascriptreact而非javascript - 若用 TypeScript 写 React，别漏掉
typescriptreact，否则.tsx文件同样失效
插件本身不会出错，出错的是配置与上下文的错位。最常被忽略的点是：JSX/TSX 的 language ID、别名配置文件类型、以及 ESLint 与 Prettier 的执行顺序——这些细节不调对，再多插件也只是摆设。
