前端开发必须掌握的VSCode插件技巧-VSCode-PHP中文网

vscode 在 vue/react 项目中需正确配置插件与参数才能发挥功能：prettier 需设为默认格式化器并启用 formatonsave；别名路径依赖 jsconfig.json/tsconfig.json 的 baseurl 和 paths；vue 语言服务须用官方 vue vscode tools 并确保版本匹配；live server 仅服务静态文件，路径须相对且项目根目录需正确打开。

前端开发必须掌握的vscode插件技巧

没装对插件或配错关键参数，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></script> 和 <style></style> 缩进会错乱

`@/` 别名路径点不了、跳转报红怎么办？

VSCode 默认不认识 @ 是 src 目录，光靠插件不行，得和项目配置联动。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

先装插件 vue-alias-skip 或 Path Intellisense（推荐前者，专治 Vue 别名）
在插件设置里填真实路径映射，例如：{"@": "./src", "@api": "./src/api"}，注意是相对 workspaceFolder 的路径
更可靠的方式是配合项目根目录下的 jsconfig.json 或 tsconfig.json："baseUrl": "./src" + "paths": { "@/*": ["*"] }，VSCode 原生识别，无需插件也生效
改完配置必须重启 VSCode 窗口，热重载不触发路径解析刷新

Vue 模板里变量悬停不跳转、`v-model` 补全失效？

这是语言服务没接管 .vue 文件，不是语法高亮问题，而是类型支持断了。

必须装官方 Vue VSCode Tools（非旧版 Vetur），它提供 SFC 解析能力
确保项目有 vue 依赖且版本匹配（Vue 3 项目不能用 Vue 2 的语言服务）
检查 settings.json 是否禁用了 "vue.suggestions.autoImport": true，关了就无法自动补全组件
如果 <template></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 的开关顺序错了，保存就等于没格式化。这些细节不手动验证，只靠“一键安装”永远踩坑。