必须装eslint和prettier以保障代码质量与格式统一，volar是vue3硬性依赖（非vetur），否则丢失defineprops类型推导等核心语言功能；需配eslint-config-prettier禁用冲突规则，避免保存时格式反复。

ESLint 和 Prettier 必须装，否则代码质量与格式规范从根上就不可控；Volar（非 Vetur）是 Vue3 项目的硬性依赖，装错直接丢掉响应式提示和 defineProps 类型推导。

Vue3 开发绕不开 Volar，装 Vetur 就是自断手脚

Vue3 的组合式 API、defineProps/defineEmits 宏、ref 类型自动推导，全靠 Volar 提供语言服务支持。Vetur 基于旧版 Vue2 解析器，对 .vue 单文件中 <script setup></script> 的 TS 类型识别率极低，常表现为：

• 鼠标悬停无类型提示，props.msg 显示 any
• Ctrl+Click 跳转失败，或跳到错误位置
• 模板中 v-model 绑定属性不校验是否在 defineProps 中声明

正确做法：

• 卸载所有含 vetur 字样的插件（包括 Vetur、Vetur Pack 等）
• 安装官方推荐的 Volar（作者：johnsoncodehk），并启用 Take Over Mode（安装后右下角弹窗点 Take Over，或手动执行命令 Volar: Switch to Take Over Mode）
• 确保项目中已配好 tsconfig.json，且包含 "compilerOptions": { "types": ["volar"] }（部分新项目需手动加）

ESLint + Prettier 不配 eslint-config-prettier 就会打架

两者默认规则冲突明显：ESLint 认为该加分号，Prettier 坚决不要；ESLint 要求双引号，Prettier 默认单引号。不协调就会出现：

• 保存时格式化一次，再保存又“回滚”一部分格式
• 编辑器右下角反复提示“Formatting failed”，控制台报 Conflict with eslint
• eslint --fix 和 prettier --write 手动执行结果不一致

必须做三件事：

PigX UI 前端开发

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

下载

• npm install -D eslint-config-prettier（注意不是 eslint-plugin-prettier）
• 在 .eslintrc.cjs 的 extends 数组末尾加上 'eslint-config-prettier'
• VS Code 的 settings.json 中关闭 ESLint 自己的格式化能力："eslint.format.enable": false

Path Intellisense 支持别名但默认不生效，得手动配 jsconfig.json 或 tsconfig.json

很多项目用 @/components、#utils 这类路径别名，Path Intellisense 能补全，但开箱即用只认 node_modules 和相对路径。现象是：

• 输入 import Button from '@/，没任何提示
• 按 Ctrl + 单击跳转失败，提示 “No definition found”

解决方法很简单，只要项目根目录有合法的配置文件：

• Vue/Vite 项目：确保 tsconfig.json 中有 "baseUrl": "./" 和 "paths" 映射（如 "@/*": ["src/*"]）
• JS 项目：建 jsconfig.json，结构同上
• 插件本身无需额外设置，它会自动读取这两个文件

Auto Rename Tag 在 JSX/Vue 模板里失效？检查是否被其他插件劫持了语言模式

该插件默认只对 html、xml、vue 语言模式生效。但 React 项目中，如果 .jsx 文件被识别为 javascriptreact 而非 typescriptreact，或 Vue 项目中 .vue 文件语言模式被错误设为 html，就会完全不触发重命名。

验证和修复步骤：

• 打开一个 .vue 或 .jsx 文件，看右下角状态栏显示的语言模式（如 “Vue”、“JavaScript React”）
• 如果不是预期值，点击它 → 选择 “Configure Language Specific Settings…” → 确保 "editor.autoRenameTag": true 已开启
• 更彻底的办法：在 .vscode/settings.json 里加语言专属配置：

  {
    "[vue]": { "editor.autoRenameTag": true },
    "[javascriptreact]": { "editor.autoRenameTag": true }
  }

真正卡住开发体验的，从来不是功能多寡，而是几个关键插件之间是否“说同一种话”——Volar 和语言模式、ESLint 和 Prettier 的规则边界、路径别名和配置文件的绑定关系，这些细节一旦错位，问题就藏在看似正常的表面之下。

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