VSCode前端项目必备的高效插件-VSCode-PHP中文网

Live Server实现保存即刷新，ESLint+Prettier统一代码规范，Volar/Vetur按Vue版本正确选用，Path Intellisense与Auto Import提升路径导入效率，所有插件需配合对应配置文件生效。

vscode前端项目必备的高效插件

前端项目在 VSCode 里跑不起来、跳转不了、改了不刷新、代码一团乱？不是你写得慢，是插件没配对。

Live Server：改完 HTML/CSS/JS 自动刷新浏览器

静态页面开发时，手动刷新浏览器是最低效的等待。Live Server 启动后会监听文件变化，保存即重载，连端口冲突都帮你兜底。

默认端口 5500，可在 .vscode/settings.json 中设 "liveServer.settings.port": 3000 或设为 0 启用随机端口
不支持热模块替换（HMR），只做全页刷新；Vue/React 项目建议用框架自带 dev server，别依赖它
右下角点击 Go Live 按钮启动，或右键 HTML 文件选择 Open with Live Server
注意：如果打开的是 file:// 协议路径（比如直接双击打开），它不会生效——必须通过 VSCode 内部打开并启动

ESLint + Prettier：代码风格和错误检查不能靠人眼盯

团队协作里最耗神的不是逻辑 bug，而是「你用单引号我用双引号」「缩进两个空格还是四个」这类无意义争论。ESLint 检规则，Prettier 统一格式，两者合体才稳。

装插件 ESLint 和 Prettier - Code formatter，再加 eslint-config-prettier 禁用 ESLint 中与 Prettier 冲突的规则
项目根目录必须有 .eslintrc.js 或 .eslintrc.cjs，否则插件静默失效
VSCode 设置中启用 "editor.formatOnSave": true 和 "editor.defaultFormatter": "esbenp.prettier-vscode"
常见坑：import 路径报错但实际能运行？大概率是 ESLint 没读到 jsconfig.json 或 tsconfig.json 中的 baseUrl 和 paths

Volar / Vetur：Vue 项目别装错、别共存

Vue 2 和 Vue 3 的语法解析器完全不同，Volar 是 Vue 3 官方推荐，Vetur 是 Vue 2 生态主力。混装会导致语法高亮错乱、<script setup></script> 无法识别、类型提示消失。

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

Vue 3 项目：只装 Volar，禁用 Vetur（VSCode 会提示“已禁用冲突扩展”）
Vue 2 项目：只装 Vetur，确保 vetur.validation.template 开启，否则 v-for 错误不报
Volar 需要配合 vue-tsc 做类型检查，命令行运行 vue-tsc --noEmit 才能暴露 TS 类型问题
如果你用 @/ 别名但组件跳转失效，不是插件问题，是缺 jsconfig.json 中的 "compilerOptions.baseUrl" 配置

Path Intellisense + Auto Import：别再手敲 import 路径

写 import { useUser } from '../../../hooks/useUser' 这种路径，既容易出错又浪费时间。Path Intellisense 补全路径，Auto Import（如 Auto Import 或 ES7+ React/Redux/React-Native snippets）自动补全符号。

Path Intellisense 默认支持 @/ 别名，但需项目有 jsconfig.json 或 tsconfig.json，且含 "baseUrl": "src"
别名跳转失效？确认插件 @ext:lihuiwang.vue-alias-skip 已安装并启用（Vue 项目尤其需要）
Auto Import 类插件可能和 ESLint 的 import/no-unresolved 规则打架，若频繁报红，检查 settings.json 是否漏配 "import/parsers": { "espree": [".js", ".jsx"] }
路径补全后按 Tab 插入，不是 Enter——这是很多人卡住的第一步