装完vscode后需一次性安装五大核心插件（eslint、prettier、volar、path intellisense、error lens）并正确配置：选对插件id、禁用vetur、重启vscode、设置settings.json关键项、安装eslint-config-prettier对齐规则、启用volar语言模式。
装完 VSCode 后，不需要一个个搜、点、配——五大核心插件（ESLint、Prettier、Volar、Path Intellisense、Error Lens）可以一次性装齐并启用关键功能，但前提是跳过默认安装陷阱，直奔配置要害。
插件安装不能只靠“搜索+安装”
VSCode 扩展市场里同名插件常有多个作者版本，装错一个就卡死或冲突。比如 Volar 必须选官方出品（作者是 Vue），而 Vetur 要彻底禁用；Prettier 必须认准 esbenp.prettier-vscode 这个 ID，其他“Prettier”前缀的第三方包不兼容 ESLint。
- 打开扩展面板（Ctrl+Shift+X），依次粘贴以下 ID 直接安装：
dbaeumer.vscode-eslint、esbenp.prettier-vscode、vue.volar、christian-kohler.path-intellisense、philsinatra.errorlens - 装完立刻重启 VSCode —— 尤其
Volar，不重启会导致defineProps类型不提示 - 如果已装过
Vetur，在扩展列表里右键 → “禁用”，别留着
settings.json 里必须改的三处硬配置
插件装了 ≠ 生效。多数人卡在这一步：格式化不触发、错误不标红、路径不补全。真正起作用的是 settings.json 里的显式声明，不是插件自带默认值。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
"editor.formatOnSave": true—— 没这句，Prettier就是摆设 -
"editor.defaultFormatter": "esbenp.prettier-vscode"—— 必须写死，否则 Vue/TS 文件可能被其他格式器劫持 -
"eslint.validate": ["javascript", "typescript", "vue"]—— 只加这三个，加html或json会报错Definition for rule 'xxx' was not found
ESLint 和 Prettier 别打架的关键开关
保存时代码来回缩进、分号忽有忽无，基本都是两者规则没对齐。不是调单个插件设置，而是靠 eslint-config-prettier 这个“和事佬”关掉 ESLint 里所有和格式相关的规则。
- 项目根目录运行：
npm install eslint-config-prettier --save-dev - 在
.eslintrc.js的extends数组末尾加上'eslint-config-prettier' - 删掉
.prettierrc里和 ESLint 冲突的项，比如"semi"、"singleQuote"—— 这些由 ESLint 统一管，Prettier只负责排版节奏
Volar 的 template 区域没提示？检查这个开关
Volar 默认只激活 <script setup></script> 区域的 TS 类型检查，<template></template> 里 v-model、组件属性不提示，大概率是因为没开语言服务器模式。
- 打开命令面板（Ctrl+Shift+P），输入
Volar: Select Language Mode，选Vue - 再输
Volar: Restart Server强制重载 - 如果还是不行，在设置里搜
volar.trace.server，设为"Verbose"，看输出面板里有没有Failed to resolve component类错误
最常被忽略的是：插件装完后，settings.json 里没写 editor.defaultFormatter 就等于没配；Volar 和 Vetur 共存会让整个 Vue 文件失去类型提示；eslint-config-prettier 不装，ESLint 和 Prettier 就永远在互相覆盖。这些不是“可选项”，是前端项目能跑起来的第一道门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
