应禁用ESLint中与格式相关的规则，配置Prettier为唯一格式化工具，确保VSCode仅启用Prettier自动格式化、关闭ESLint自动修复，并正确配置别名路径、Auto Rename Tag对Vue支持及HMR环境。
怎么让 Prettier 和 ESLint 不打架
保存时格式化和语法检查同时触发，常导致代码被反复修改、报错闪烁、甚至 import 语句被删掉。根本原因是两者职责重叠：Prettier 管样式，ESLint 管逻辑，但某些规则（比如 semi、quotes）ESLint 也管。
实操建议：
- 禁用 ESLint 中与格式相关的规则，在
.eslintrc.js里加"prettier"插件并执行extends: ["eslint:recommended", "plugin:prettier/recommended"] - 确保
editor.defaultformatter设为esbenp.prettier-vscode，且editor.formatonsave为true - 不要同时开启 ESLint 的
fix on save—— 这会和 Prettier 冲突；只保留 Prettier 的自动格式化 - 若用 Vue 或 TS，额外安装
@vue/eslint-config-prettier或@typescript-eslint/eslint-config-prettier关闭对应规则
别名路径跳转为什么点不动
写 import Header from '@/components/Header.vue'，Ctrl+单击却没反应，不是插件没装，而是配置没对齐。
常见卡点：
-
jsconfig.json或tsconfig.json里没配baseUrl和paths，例如缺失："compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } - 项目根目录下没有
jsconfig.json（TS 项目必须有tsconfig.json，JS 项目必须显式加jsconfig.json） - VSCode 没识别到配置文件变更 —— 关闭再重启窗口，或运行命令
Developer: Reload Window - 插件本身不处理
~别名，只认@或你自定义的前缀（如src/），别名必须和配置完全一致
Auto Rename Tag 在 Vue 模板里失效
改了
块里。
原因很直接：
阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria
- 插件默认只启用 HTML 和 XML 语言模式，Vue 文件需手动开启支持：打开设置，搜
auto rename tag，勾选Auto Rename Tag: Enable Auto Rename Tag For Vue - 如果用了
<script setup></script>语法，确保插件版本 ≥ 0.1.12（老版本不识别 setup 语法块内的标签） - 部分主题或其它插件（如 Volar）可能劫持了 Vue 文件的语言服务，可临时禁用 Volar 测试是否冲突
- 别在未闭合的标签里测试，比如
xxx 少了
垂直分屏时 CSS 修改不实时生效
左边开 Button.vue，右边开 Button.css，改完 CSS 保存，浏览器没更新 —— 不是热更新坏了，是编辑器没联动。
关键动作：
- 确认你用的是真实开发服务器（如 Vite、Vue CLI），不是静态预览插件（如
Live Server）；后者不监听 CSS 变更，只刷新 HTML - 确保两个文件都在同一工作区根目录下，且 CSS 是通过
@import或正确引入的，而不是复制粘贴进块里硬编码 - VSCode 分屏本身不触发构建，只是视图切分；真正生效靠的是框架的 HMR（热模块替换），所以要盯住终端里是否有
[vite] hot updated:日志 - 如果用的是 SCSS/Less，检查是否装了对应预处理器插件（如
Easy SCSS），否则保存后不会编译成 CSS
插件不是装上就灵，每个都卡在具体配置、语言模式、项目结构这些细节里。最容易忽略的是：插件之间有隐式依赖，比如 Auto Import 要 Volar 或 TypeScript 插件先跑起来，而 Volar 又得配合正确的 tsconfig.json 才能解析组件。调不通时，先看控制台输出（Help > Toggle Developer Tools），比瞎试快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
