前端开发必修课学会用好VSCode插件-VSCode-PHP中文网

vue 3 项目必须用 volar 而非 vetur，因二者底层语言服务冲突，共存会导致类型推导失效、ref 跳转失败、defineprops 无提示等问题；需禁用 vetur、启用 volar 并重启 vscode。

前端开发必修课学会用好vscode插件

为什么 Prettier 和 ESLint 不能只装一个

只装 Prettier 会格式化代码但不报错，只装 ESLint 可能格式混乱还互相打架。两者定位不同：Prettier 是“美容师”，管空格、换行、引号；ESLint 是“质检员”，管 undefined 访问、未声明变量、console.log 残留等逻辑问题。

常见错误现象：保存后代码被重排，但 React 的 key 缺失警告没出现；或者 ESLint 提示“missing semicolon”，而你明明关了分号规则——这大概率是没禁用 ESLint 里和 Prettier 冲突的格式类规则。

必须装 eslint-config-prettier 插件，它会关闭所有与 Prettier 冲突的 ESLint 规则
settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode"，否则右键格式化可能调用错工具
团队项目务必统一 .prettierrc 和 .eslintrc.js，尤其注意 printWidth（推荐 100）和 tabWidth（推荐 2）是否一致

别名路径跳转失效？不是 webpack 配置错了，是插件没配对

@/components/Button.vue 点不了跳转，90% 不是 vue.config.js 或 vite.config.ts 问题，而是 VSCode 没识别别名映射。Volar / Vetur 本身不处理路径解析，得靠额外插件补位。

使用场景：Vue 3 + Vite 项目中，import { api } from '@/api/user' 无法 Ctrl+Click 跳转；或 TypeScript 中 import type { User } from '@/types' 提示 “Cannot find module”。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

优先装 Path Intellisense，它能补全路径但不解决跳转
真正解决跳转要装 Alias Navigator 或 Vue Alias Skip，后者专为 @ 别名优化
配置关键项：在 VSCode 设置里搜 alias，找到插件配置项，填入 {"@": "./src"}，注意路径是相对工作区根目录，不是 node_modules
若用 tsconfig.json 的 baseUrl + paths，还需装 TypeScript Toolbox 同步识别

Live Server 启动失败或热更新不生效的三个硬坑

Go Live 按钮点完没反应，或改了 HTML 但浏览器不刷新——不是端口被占，而是插件运行机制被误触发。

常见错误现象：http://127.0.0.1:5500 打开空白页；修改 index.html 后需手动 F5；启动时报错 Unable to launch browser。

必须确保当前打开的是 .html 文件，且文件已保存（未保存的临时文件不会触发服务）
不要在终端里手动执行 live-server 命令，VSCode 插件和 CLI 版本规则不同，容易冲突
热更新依赖文件系统监听，Windows 上杀毒软件（如 Defender 实时防护）常拦截，可临时关闭或添加工作区白名单
若用 Vue/React 脚手架开发，别用 Live Server 启动整个项目——它只服务静态文件，不跑 webpack-dev-server 或 vite 的 HMR

Volar 和 Vetur 到底该选谁

Vue 3 项目装 Vetur 会丢类型提示、不支持 <script setup></script> 语法高亮，这不是你配置问题，是它已停止维护。官方明确推荐 Volar 替代。

性能影响：Volar 启动更慢（首次加载约 2–3 秒），但后续响应更快；Vetur 在大型 .vue 文件里容易卡顿，尤其含大量 v-for 嵌套时。

Vue 2 项目继续用 Vetur，Vue 3 必须切 Volar（包括 Nuxt 3、Quasar 2+）
装完 Volar 后，VSCode 右下角语言模式要手动切到 Vue（不是 HTML），否则语法高亮无效
若同时装了 Vetur 和 Volar，必须禁用 Vetur，否则两者争抢 .vue 文件控制权，导致智能提示失效
Volar 的 Take Over Mode 默认开启，会接管 TS 类型检查——这意味着你不能再依赖 Vue Language Features 单独插件

复杂点在于，插件之间不是简单叠加，而是存在隐式依赖链：比如 Volar 需要 TypeScript 插件配合才能正确推导 defineProps 类型，而 Path Intellisense 的路径补全又依赖 jsconfig.json 是否存在。这些细节不报错，但会让某项功能“看起来没用”，排查起来反而比写代码更耗时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！