前端开发必备VSCode插件选型建议-VSCode-PHP中文网

vue 3项目必须使用volar而非已停更的vetur，否则类型提示、跳转和补全将大面积失效；需禁用vetur、配置.vscode/settings.json启用实验特性并重启ts服务。

前端开发必备vscode插件选型建议

Vue3项目必须装Volar，别再用Vetur了

Vue3项目里语法高亮、ref类型推导、defineComponent支持全靠它——Volar是当前唯一被Vue官方推荐的VSCode插件。Vetur已停止维护，继续用会导致template内TS类型报错、setup脚本无法跳转、emits定义无提示等问题。

安装后需禁用Vetur（如有），否则两者冲突，Ctrl+Click会失效
若项目用的是defineAsyncComponent或useSlots等新API，Volar能正确识别返回类型；Vetur直接标红
配合vue-eslint-parser和eslint-plugin-vue使用时，确保.eslintrc.js中parser设为'vue-eslint-parser'，否则规则不生效

路径别名跳转失效？配好`@/`和`~/`才管用

写import { api } from '@/api/user'却点不开——不是插件没装，是路径解析没对齐。VSCode本身不理解Webpack/Vite的resolve.alias，得靠插件桥接。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

@跳转依赖项目根目录下jsconfig.json或tsconfig.json里的compilerOptions.paths配置，例如：
```
{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}}
```
插件Path Intellisense或Alias Navigator可补全路径，但跳转仍需上述配置；vue-alias-skip专为Vue优化，支持~components这类非标准别名
如果用了pnpm的link或monorepo的workspace，路径映射要加"src/**/*": ["src/**/*"]显式声明，否则跳转失败

Live Server不能热更新JS？检查是否漏了`script`标签类型

改完index.html里引用的main.js，浏览器没刷新——常见原因是<script></script>没带type="module"或defer，导致Live Server只监听HTML变更，不触发JS重载。

Live Server默认只监控.html、.htm、.css、.js文件，但JS变更是否触发页面刷新取决于浏览器加载方式
ESM模块需加<script type="module" src="./main.js"></script>，否则修改JS后页面不会自动重载
若用Vite或Webpack开发服务器，别用Live Server——它不处理HMR，反而干扰源码映射，直接关掉

调试Vue组件状态？别只装Debugger for Chrome

断点能打、变量能看，但data、props、computed值始终为空？缺的是框架专用调试器，不是通用调试器。

Debugger for Chrome只负责JS执行层，Vue Devtools才是看响应式数据的入口；二者必须共存，且Chrome插件版本要与Vue版本匹配（Vue3用v6+）
VSCode里启动调试需在.vscode/launch.json中配置url指向本地服务地址（如http://localhost:5173），而不是file://路径，否则Devtools无法注入
若用createApp手动挂载，确保app.mount('#app')执行后才打开Devtools，否则组件树为空

实际项目里，插件冲突比功能缺失更常导致问题：比如Prettier和ESLint规则打架、Tailwind CSS IntelliSense和Volar在class属性上提示重复，这些都得靠禁用某一方或调整settings.json里的editor.quickSuggestions细粒度控制。