VS Code跳转不到@/api或~/components主因是路径别名未被识别，需配置Alias Navigator等插件并确保pathAlias.alias与tsconfig.json中baseUrl完全匹配，同时Vue项目须禁用Vetur、启用Volar接管。
VS Code 插件不是装得越多越好，而是要解决你当前项目里真实卡点的那几个。
跳转不到 @/api 或 ~/components？配好别名路径跳转插件
很多新人写完 import { login } from '@/api/user'，按住 Ctrl + 左键却毫无反应——不是代码错，是 VS Code 默认不认 @ 这种别名。
- 推荐插件：
Alias Navigator或Path Alias（比老版vue-alias-skip更稳定，支持 Vite/Webpack/Rspack） - 关键配置项必须填对：
"pathAlias.alias": { "@": "src", "~": "src/components" }，路径必须是相对于工作区根目录的相对路径 - 常见坑：tsconfig.json 里的
compilerOptions.baseUrl和插件配置不一致，会导致跳转失效；二者必须完全匹配 - Vue 项目额外注意：
jsconfig.json或tsconfig.json中需启用"baseUrl": "./"，否则插件无法读取别名上下文
console.log 写到一半就卡住？用 Turbo Console Log 自动生成带作用域标识的日志
手动敲 console.log('xxx', xxx) 不仅慢，还容易漏变量、拼错字符串。尤其调试嵌套对象或异步链时，光标一移就得重来。
- 装好后选中变量名（比如
user），按Ctrl+Alt+L（Windows）或Cmd+Alt+L（macOS），自动生成console.log('user:', user); - 支持多光标：同时选中
data、loading、error三个变量，一键生成三行带名称的日志 - 别直接依赖它输出生产环境日志——插件不会自动删
console，上线前仍需搜索清理或配合eslint-plugin-no-console
改个 CSS 类名，HTML、JS、CSS 全得手动搜？Auto Rename Tag 和 ES7 React/Redux/GraphQL/React-Native snippets 要一起开
单靠 Auto Rename Tag 只能同步 HTML 标签，但实际开发中，一个组件名常横跨 className、import、const MyComponent、甚至 CSS Modules 的 styles.MyComponent。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
-
Auto Rename Tag确保你在改<button></button>标签时，自动同步闭合标签，避免手滑漏掉 -
ES7 React/Redux/GraphQL/React-Native snippets提供imrc（import React + Component）、cccp（create class component with prop types）等快捷片段，减少重复 import 和模板代码 - 真正省时间的是组合：比如在 JSX 里输入
div.cn-，Auto Import+Path Intellisense会提示已存在的 CSS Module 类名，选中即自动导入并补全
团队协作时格式总不统一？Prettier + ESLint 插件不能只装，得关掉冲突项
装了 Prettier 还是有人提交分号、双引号、4 空格缩进，说明配置没生效，或者和 ESLint 规则打架。
- 必须关掉 ESLint 的格式类规则：
npm install eslint-config-prettier --save-dev，并在.eslintrc.js的extends末尾加上'prettier' -
settings.json里设"editor.formatOnSave": true，但别设"editor.codeActionsOnSave"自动 fix 所有 ESLint 问题——它会覆盖 Prettier 的格式结果 - Vue 项目特别注意：
vetur和volar不能共存；Vue 3 项目务必禁用vetur，否则<style scoped></style>块里的格式会被错乱处理
插件本身不难装，难的是让它们在你的项目配置里真正咬合运转。比如 code-inspector-plugin 能点击 DOM 定位源码，但它依赖 sourcemap 正确生成——如果 vite.config.ts 里 build.sourcemap 关了，插件就变摆设。
