ESLint 必须与 Prettier 配合使用，否则规则重叠会导致格式“拉扯”；应安装 eslint-config-prettier 关闭 ESLint 中冲突的格式规则，VSCode 中设 editor.defaultFormatter 为 esbenp.prettier-vscode，并禁用 ESLint 的保存时格式化。
ESLint 必须和 Prettier 配合使用，否则格式与校验会打架
单独装 ESLint 或 Prettier 都会出问题：ESLint 的 semi、quotes 等规则和 Prettier 的格式化行为重叠，保存时可能反复“拉扯”，导致光标乱跳、文件内容被来回修改。这不是 bug，是规则冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 安装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上它，显式关闭所有与格式相关的 ESLint 规则 - VSCode 设置里把
editor.defaultFormatter设为esbenp.prettier-vscode，而不是 ESLint 插件 - 禁用 ESLint 的自动修复（
eslint.enable保持 true，但不要开eslint.codeAction.onSave.mode的 format） - 只让 Prettier 负责“怎么写好看”，ESLint 负责“有没有写错”
Path Intellisense 要配合 jsconfig.json 才能正确解析 alias
很多人装了 Path Intellisense 却发现 @/components/Button.vue 这类路径不提示、点不进去——根本原因是插件本身不读 webpack 或 vite.config.ts，只认 jsconfig.json 或 tsconfig.json 中的 paths 配置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 项目根目录必须有
jsconfig.json（TS 项目用tsconfig.json），且含"baseUrl": "."和"paths"字段 -
paths的 key 必须带通配符，比如"@/*": ["src/*"]，不能写成"@/": ["src/"] - VSCode 需要重启或重新加载窗口，才能识别新配置
- 如果用了 Vite 的
resolve.alias但没同步到jsconfig.json，路径跳转和补全一定失效
Auto Rename Tag 在 Vue SFC 中默认不生效，需手动开启
Auto Rename Tag 插件默认只启用 HTML 和 XML 模式，在 .vue 文件的 <template> 区域里不会自动同步标签名，尤其在 Vue 3 + `<script setup>` 场景下容易被当成纯文本处理。</script>
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 设置，搜索
auto rename tag，找到Auto Rename Tag: Enable Auto Rename Tag并勾选 - 再搜
files.associations，确认*.vue关联的是vue语言模式（不是html） - 关键一步：在设置中添加
auto-rename-tag.activationOnLanguage，值设为["html", "vue", "javascriptreact", "typescriptreact"] - 改完不用重启，新建一个
<div>测试，重命名为<section>，看闭合标签是否同步
Volar 和 Vetur 冲突会导致 Vue 3 项目类型推导失效
如果你用的是 Vue 3，又同时装了 Volar 和 Vetur，VSCode 很可能直接放弃 ref()、defineProps 的类型提示，甚至报错 “Cannot find name ‘defineProps’”。Volar 是 Vue 官方推荐的 Vue 3 工具，Vetur 已停止维护，两者共存会抢语言服务控制权。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 卸载
Vetur—— 不是禁用，是彻底删除；Volar 启动后会自动接管.vue文件 - 检查 VSCode 右下角状态栏，点击语言模式，确认当前是
Vue (Volar)，不是Vue或Vetur - 若仍无类型提示，删掉
node_modules/.volar缓存目录，重启 VSCode - 确保项目有
vue-tsc --noEmit类型检查命令，Volar 的类型能力依赖它
Path Intellisense 不读构建配置、Volar 不兼容旧插件、ESLint 和 Prettier 规则重叠——这些都不是“装了就能用”的环节，而是必须对齐配置、明确职责、手动干预的关键卡点。 
