VSCode中强大的前端开发插件组合-VSCode-PHP中文网

eslint与prettier冲突的根本原因是规则重叠，应通过安装eslint-config-prettier禁用eslint中所有格式类规则，并在vscode中明确指定prettier为默认格式化器，同时确保volar替代已停更的vetur以避免类型系统紊乱。

vscode中强大的前端开发插件组合

ESLint 和 Prettier 必须共存，但默认会打架——关键不在装不装，而在怎么配。

两者职责不同：ESLint 检查「逻辑和规范」，Prettier 只管「格式美观」。但部分规则重叠（比如单引号、分号），导致保存时反复修改、光标跳动、甚至格式化失效。

必须安装 eslint-config-prettier，它不是插件，是 npm 包，用于关闭 ESLint 中所有和格式相关的规则
settings.json 里要明确指定 "editor.defaultFormatter": "esbenp.prettier-vscode"，否则 ESLint 可能抢着格式化
Vue3 项目额外加 "prettier.vueIndentScriptAndStyle": true，不然 <script></script> 里的缩进会错乱

Volar 是 Vue3 官方推荐的替代方案，Vetur 已停止维护。两者同时启用会导致类型提示错乱、ref 推导失败、defineProps 类型丢失。

PigX UI 前端开发

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

下载

卸载 Vetur 后重启 VSCode，否则旧缓存仍生效
确保工作区根目录有 tsconfig.json 或 jsconfig.json，否则 Volar 的类型支持基本失效
开启 Volar 的 hybridMode（需在 .vscode/settings.json 中设 "volar.hybridMode": true），才能正确处理 <script setup></script> + <template></template> 的双向类型联动

它本身不读 webpack 或 vite.config.ts 的 alias，只认 jsconfig.json 或 tsconfig.json 的 "paths" 配置。

必须在项目根目录创建 jsconfig.json（TS 项目用 tsconfig.json），内容至少包含：
```
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }
```
改完配置后，VSCode 右下角会提示「TypeScript 正在重新加载项目」，等提示消失再试补全
如果用了 src/pages 这类深层路径，paths 必须显式写全，"@/pages/*": ["src/pages/*"]，通配符不会自动递归

默认只启用 HTML/XML 模式，React 的 JSX 属于 javascriptreact 或 typescriptreact 语言模式，需手动开启。

打开 settings.json，加这一行："auto-rename-tag.activationOnLanguage": ["html", "xml", "javascriptreact", "typescriptreact"]
别用旧版 Auto Close Tag，它和 Auto Rename Tag 冲突，关掉前者
遇到自闭合标签如 <input>，插件无法重命名——这是设计限制，不是 bug