VS Code自动导入需装Auto Import插件并启用typescript.suggest.autoImports等设置，配合tsconfig.json路径配置及语言服务激活，才能实现useState、useRouter等符号的精准自动导入。
前端开发在 VSCode 里不装对插件，等于裸写 HTML + CSS + JS —— 效率低、易出错、调试靠猜。
React/Vue 开发必开的自动导入插件
Auto Import 是 TypeScript/TSX 项目里最不该漏掉的插件。它不是简单补全，而是真正理解模块依赖关系：输入 useState，它会自动插入 import { useState } from 'react'；写 useRouter，它能识别 Next.js 或 Vue Router 并导入对应路径。
- 必须配合
typescript.preferences.includePackageJsonAutoImports设为"auto"才生效 - Vue 项目需额外配置
"javascript.suggest.autoImports": true，否则ref、computed不触发 - 如果项目用了别名（如
@/components），得在jsconfig.json或tsconfig.json里配好compilerOptions.paths，否则导入路径会是相对路径而非别名
HTML/XML 标签改名不同步？用 Auto Rename Tag
手改 <div class="header"></div> 成 <header></header> 时，漏掉闭合标签或拼错是高频事故。这个插件会在你编辑开始标签时，实时同步更新结束标签 —— 但只作用于标准配对结构。
- 对 JSX 中的自闭合标签（如
<img alt="提升前端开发体验的VSCode必备插件" >）无效，它不处理单标签 - 遇到
<template v-for></template>这类 Vue 指令包裹的标签，可能误判配对关系，建议临时禁用 - 默认快捷键冲突（比如和 Emmet 的
Ctrl+E），可在设置里搜auto rename tag关掉自动触发，改用手动命令Auto Rename Tag: Toggle Auto Rename Tag
样式兼容性不用手写前缀：Autoprefixer
写 display: flex 就想直接上线？浏览器兼容表不会自己跑来帮你加 -webkit-。这个插件基于 Can I Use 数据库，在保存时自动注入必要前缀。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 必须配合项目根目录的
.browserslistrc或package.json中的browserslist字段，否则按默认目标（覆盖到 IE10）加一堆冗余前缀 - 它不处理 CSS-in-JS（如 styled-components），只作用于
.css、.scss、.less等纯样式文件 - 和
Prettier同时启用时，顺序很重要：先Autoprefixer再Prettier，否则格式化可能把刚加的前缀挤乱行
注释太单调？Better Comments 或 Colorful Comments
一行 // TODO: 优化加载逻辑 和 // FIXME: 这里有内存泄漏 颜色一样，扫一眼根本分不清轻重缓急。这两个插件靠符号区分语义，但行为差异明显：
-
Better Comments默认支持!（红色）、?（蓝色）、*（绿色）等，配置项少，开箱即用 -
Colorful Comments支持更多符号（如^、&），但需手动在settings.json里定义颜色映射，否则部分符号不生效 - 两者都对 JSDoc 块注释（
/** ... */）无效，只处理行内注释（//或//-）
插件不是越多越好，而是每个都要清楚它在哪种文件里起作用、依赖什么配置、又在什么边界条件下失效 —— 否则装了等于没装，甚至干扰正常编码节奏。
