真正提升前端开发流程的是关键插件的精准配置与协同：禁用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> 不会同步 <code>
