VSCode 在 Vue/React 项目中需正确配置插件与参数才能发挥功能：Prettier 需设为默认格式化器并启用 formatOnSave；别名路径依赖 jsconfig.json/tsconfig.json 的 baseUrl 和 paths；Vue 语言服务须用官方 Vue VSCode Tools 并确保版本匹配；Live Server 仅服务静态文件，路径须相对且项目根目录需正确打开。
没装对插件或配错关键参数，VSCode 就只是个高级记事本——尤其在 Vue/React 项目里，跳转失效、格式混乱、别名路径报红、保存不自动格式化，全是配置不到位的直接结果。
为什么 Prettier 保存后没反应？
不是插件没装，而是 VSCode 没把它设为默认格式化工具，或者被其他格式化器（比如 ESLint）抢了优先级。
- 必须在
settings.json中显式设置："editor.defaultFormatter": "esbenp.prettier-vscode" - 开启自动保存格式化：
"editor.formatOnSave": true - 如果同时用了
ESLint，得加"eslint.format.enable": false，否则两者打架，Prettier会被绕过 - Vue 文件需额外确认
"prettier.vueIndentScriptAndStyle": true，否则<script>和<style>缩进会错乱
@/ 别名路径点不了、跳转报红怎么办？
VSCode 默认不认识 @ 是 src 目录，光靠插件不行，得和项目配置联动。
- 先装插件
vue-alias-skip或Path Intellisense（推荐前者，专治 Vue 别名） - 在插件设置里填真实路径映射，例如：
{"@": "./src", "@api": "./src/api"}，注意是相对workspaceFolder的路径 - 更可靠的方式是配合项目根目录下的
jsconfig.json或tsconfig.json："baseUrl": "./src"+"paths": { "@/*": ["*"] }，VSCode 原生识别，无需插件也生效 - 改完配置必须重启 VSCode 窗口，热重载不触发路径解析刷新
Vue 模板里变量悬停不跳转、v-model 补全失效？
这是语言服务没接管 .vue 文件，不是语法高亮问题，而是类型支持断了。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 必须装官方
Vue VSCode Tools（非旧版Vetur），它提供 SFC 解析能力 - 确保项目有
vue依赖且版本匹配（Vue 3 项目不能用 Vue 2 的语言服务） - 检查
settings.json是否禁用了"vue.suggestions.autoImport": true，关了就无法自动补全组件 - 如果
<template>里写{{ user.name }}悬停无响应，大概率是user在setup()里没用ref/reactive正确声明，语言服务无法推导类型
Live Server 启动后页面空白或 404？
它只服务静态文件，不走 webpack/vite 构建流程，路径和资源引用容易出错。
- 启动前必须打开的是项目根目录（
File → Open Folder），不是单个 HTML 文件 - HTML 里引用的 JS/CSS 路径要是相对路径，比如
./dist/main.js，不能写/dist/main.js（根路径在服务器上指向http://localhost:5500/，不是项目根） - 端口冲突时，改
liveServer.settings.port即可，设为0表示随机端口，但每次启动端口会变 - 它不支持
import语法或模块化 JS，调试时若用 ES Module，得开浏览器控制台看报错：Failed to resolve module specifier，说明得换Vite或webpack-dev-server
真正卡住人的从来不是插件装没装，而是 VSCode 配置、项目配置、插件配置三者没对齐。一个 jsconfig.json 里少写一行 baseUrl，就能让整个别名系统瘫痪；Prettier 和 ESLint 的开关顺序错了，保存就等于没格式化。这些细节不手动验证，只靠“一键安装”永远踩坑。
