前端开发者必备的VSCode插件辅助工具-VSCode-PHP中文网

vscode插件需精准解决开发卡点问题：别名路径跳转需alias navigator或vue alias skip配合tsconfig.json映射配置；auto rename tag失效常因与auto close tag冲突或linkedediting未启用；quokka.js可实时执行js表达式结果；eslint自动修复需协同prettier并正确配置.eslintignore及vue版本匹配规则。

前端开发者必备的vscode插件辅助工具

VSCode 插件不是装得越多越好，而是要解决你当前写代码时卡住的具体问题——比如跳转不到 @/api 别名路径、改一个 div 标签却漏掉闭合、保存后样式还是没生效、或者 console 里一堆 undefined 却不知道哪行出的错。

跳转不到 `@/xxx` 或 `~/components` 路径？配 alias + 插件才管用

光在 jsconfig.json 或 tsconfig.json 里写 "baseUrl": "src" 和 "paths" 不够。VSCode 默认不读这些配置做跳转。

必须装插件：Alias Navigator（轻量）或 Vue Alias Skip（专为 Vue 项目优化）
装完后，还要在 VSCode 设置里搜 alias，找到插件对应的配置项，填入和 tsconfig.json 里一致的别名映射，例如：{"@": ["src"], "@api": ["src/api"]}
如果用了 Vite，注意它默认不生成 jsconfig.json，得手动补一个，否则插件找不到上下文

`Auto Rename Tag` 失效？检查是否被其他插件覆盖

这个插件本该改开标签自动同步闭标签，但很多人发现按了回车或输入 / 后没反应——不是插件坏了，是触发逻辑被干扰了。

前端设计优化skill

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

下载

禁用所有其他 HTML 相关插件（尤其是 Auto Close Tag），二者冲突概率极高
确认设置里 editor.linkedEditing 是 true（这是 VSCode 原生联动编辑开关，Auto Rename Tag 依赖它）
如果文件后缀是 .vue，确保 Volar 已启用且没有禁用 HTML 模式支持（Volar 会接管 template 区域，可能绕过该插件）

想实时看 JS 表达式结果，别只靠 `console.log`

写个 arr.map(x => x * 2)，想知道输出是不是预期数组？反复删加 console 太慢，也污染代码。

Quokka.js 是最直接的解法：新建文件或在已有 JS/TS 文件顶部右键 → “Start Quokka on Current File”，表达式右边立刻显示值
注意它默认不运行 import 语句，如果依赖模块，得手动加 // @ts-ignore 或改用 require 加载
对 Vue/React 组件无效——它不模拟组件生命周期，只跑纯 JS 执行环境；想调试组件逻辑，得用 Debugger for Chrome 配合 sourcemap

`ESLint` 报错但不自动修复？缺的是协同配置

装了 ESLint 插件却只能看到波浪线，Ctrl+. 没提示修复选项，大概率是规则和格式化工具打架了。

先装 ESLint 和 Prettier 两个插件，再在设置里把 editor.defaultFormatter 设为 esbenp.prettier-vscode
关键一步：在项目根目录加 .eslintignore，排除 node_modules 和构建产物，否则扫描卡死
如果用 Vue 3，eslint-plugin-vue 必须匹配 Vue 版本（如 vue3-recommended），否则 v-model 等语法会被误报