前端开发必备VSCode插件安装与配置指南-VSCode-PHP中文网

vue 3 项目必须装 volar 并禁用 vetur，否则 ref、defineprops 等类型推导和模板提示失效；eslint 与 prettier 需配对使用并配置 eslint-config-prettier，路径补全需映射 @/ 别名。

前端开发必备vscode插件安装与配置指南

Vue3 项目直接装 Volar，别碰 Vetur；ESLint 和 Prettier 必须配对用，单装一个等于白装；路径补全、标签重命名、图标美化这三类插件不是“锦上添花”，而是每天省下 10 分钟的刚需。

Vetur 是 Vue2 时代的产物，对 setup 语法、defineProps / defineEmits、组合式 API 类型推导基本不支持。Volar 才是 Vue 官方推荐、基于 TypeScript 语言服务深度集成的现代方案。

安装后需在项目级 .vscode/settings.json 中显式启用 hybridMode："vue.experimental.templateCompilerOptions": { "target": 3 }
若 props 使用 kebab-case（如 user-name），必须加 "vue.format.enable": true 并配置 "vue.format.options": { "parser": "vue" }，否则格式化会报错
禁用 Vetur：打开命令面板（Ctrl+Shift+P），运行 Extension: Disable All Extensions in Workspace，再手动禁用 vetur

两者规则冲突是前端新人最常遇到的“格式化后又标红”问题根源。核心不是谁替代谁，而是让 ESLint 管逻辑、Prettier 管样式。

PigX UI 前端开发

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

下载

必须安装 eslint-config-prettier 插件，并在 .eslintrc.js 的 extends 数组末尾加入 'prettier'，否则 quotes、semi 等规则会打架
editor.defaultFormatter 必须设为 esbenp.prettier-vscode，且 editor.formatOnSave 设为 true；但 javascript.format.enable 要设为 false，否则 VSCode 自带 JS 格式化器会抢跑
TSX/JSX 文件中，若用 eslint-plugin-react，需额外加 eslint-plugin-react-hooks，否则 useEffect 依赖数组警告不会触发

它们不炫技，但一旦失效，你会反复手动输路径、手敲闭合标签——看似小问题，日积月累就是心梗源头。

Path Intellisense 默认不识别 @/ 别名，需在 settings.json 中配 "path-intellisense.mappings": { "@": "${workspaceFolder}/src" }，Vue CLI 或 Vite 项目通用
Auto Rename Tag 对 JSX 支持弱，默认不处理 className 或自定义组件标签；开启 "auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact"] 才能覆盖 .tsx 文件
两个插件都依赖文件监听，若项目 node_modules 过大（>5k 文件），建议在 settings.json 加 "files.watcherExclude": { "**/node_modules/**": true } 防卡顿

新手容易被“Top 20 插件”清单带偏，实际很多插件和你当前技术栈无关，甚至互相干扰。

Beautify 和 Prettier 同时启用会导致保存时格式化两次，代码缩进错乱；留 Prettier 就够了
Live Server 适合纯 HTML/CSS/JS 原生项目；Vue/React 项目用 npm run dev 启动开发服务器更准，它不模拟真实打包环境
Code Spell Checker 对中文变量名无效，且会把 useState、useEffect 当错词标黄；关掉或加 ["useState", "useEffect"] 到 cSpell.words