结论：eslint管逻辑对错，prettier管格式美观，必须分工明确；在.eslintrc.js中extends末尾加'prettier'，安装eslint-config-prettier禁用冲突格式规则，并设prettier为vscode默认格式化器。

ESLint 和 Prettier 冲突时怎么配才不报红

直接说结论：ESLint 管逻辑对错，Prettier 管格式美观，两者必须分工明确，否则 eslint-config-prettier 会失效，prettier 的规则被 ESLint 覆盖，保存后代码反复“打架”。

常见错误现象是：保存后引号自动变双引号，但 ESLint 又标红要求单引号；或自动加了分号，ESLint 却报 no-extra-semi。

• 在 .eslintrc.js 中 extends 必须把 prettier 放最后，顺序错就白装：['airbnb', 'plugin:react/recommended', 'prettier']
• 安装 eslint-config-prettier 后，它只禁用 ESLint 中和 Prettier 冲突的格式类规则，不碰逻辑类规则（如 no-unused-vars）
• prettier 插件本身不校验代码，所以别把它写进 plugins 数组——那是给 ESLint 用的，不是给 Prettier 用的
• VSCode 设置里关掉 editor.formatOnSave 对 ESLint 的启用（即不要勾选 eslint.autoFixOnSave），只留 Prettier 做格式化，ESLint 专注报错

路径别名 @/src/ 点不进去？检查三个地方

点不了 @/utils/request 跳转，不是插件没装，而是 VSCode 根本不知道 @ 指向哪。Path Intellisense 和别名路径跳转类插件都依赖项目级配置，不是装完就生效。

典型使用场景：Vue 或 React 项目中大量用 @/components，但 Ctrl+Click 无响应。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

• 确认项目根目录有 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目），且含 "baseUrl" 和 "paths" 配置，例如：{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}}
• VSCode 必须重启，或执行 Developer: Reload Window，否则新配置不加载
• 如果用了 Vite，还需在 vite.config.ts 里同步配置 resolve.alias，否则 HMR 或构建可能出错，但跳转问题只和 jsconfig/tsconfig 有关

Live Server 自动刷新失效？多半是文件监听范围错了

改完 HTML 页面，浏览器没刷新，不是插件坏了，而是 Live Server 默认只监听当前打开的文件及其同级目录，不递归监听 src/ 或 public/ 下所有子目录。

尤其在 Vue/React 项目里，你改的是 src/App.vue，但 Live Server 启的是根目录下的 index.html，它根本收不到变更通知。

• 右键点击要预览的 HTML 文件 → “Open with Live Server”，而不是随便点一个文件再点 Go Live
• 若需监听整个项目，手动改插件设置：liveServer.settings.donotVerifyIfRunning 设为 true，再配合 liveServer.settings.root 指向实际静态资源目录（如 "./dist" 或 "./public"）
• 开发 Vue/React 项目，别用 Live Server 当主力调试工具——它没 HMR，应优先用官方 CLI 的 dev server（如 npm run dev）

Vue 文件里 template 中变量点不动？vue-language-tools 没启用

鼠标悬停 {{ user.name }} 看不到类型提示、Ctrl+Click 跳不到 data 或 setup() 里的定义，大概率是 VSCode 没识别这是 Vue 项目，或者用了旧版插件。

Vue 官方插件 Vue Language Features (Volar)（注意不是已废弃的 Vetur）才是 2026 年 Vue 3 + TS 项目的标配，它负责语法解析、类型推导、模板内跳转。

• 卸载所有带 Vetur 字样的插件，它和 Volar 冲突，且不支持组合式 API 的完整类型支持
• 确保 vue-language-tools 插件已启用，并在 VSCode 设置里打开 vue.official（默认开启）
• 如果项目用的是 <script setup></script>，必须在 tsconfig.json 中启用 "types": ["vue"]，否则 Volar 无法注入 Vue 类型
• 重启 VSCode 后，首次打开 .vue 文件会提示“Enable Take Over Mode”，务必点“Take Over”，否则语法高亮和跳转功能降级

复杂点在于：插件之间不是独立运行的，它们共享项目配置、语言服务状态和 VSCode 的缓存机制。一个插件失效，常常不是它自己坏了，而是上游的 jsconfig.json、tsconfig.json 或 package.json 里某个字段没对齐。

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