VSCode插件给前端开发带来的便捷体验-VSCode-PHP中文网

live server是vs code前端开发必备基础设施，安装后点击右下角“go live”按钮即可启动本地服务器，保存html/css/js文件后浏览器自动刷新，开箱即用、无需配置，彻底替代手动刷新流程。

vscode插件给前端开发带来的便捷体验

VSCode插件不是“锦上添花”，而是前端日常开发的基础设施——没有它们，写个 import 都要手动翻目录，改个标签得挨个核对闭合，保存后还得切到浏览器点刷新。

传统流程是：保存 → 切浏览器 → 手动刷新 → 回 VSCode → 再改。Live Server 把这个链路压成一次保存动作。

只装 Prettier 会美化代码但不管逻辑错误；只装 ESLint 会报错但不自动修格式。两者必须配合，否则保存时互相打架。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

在 settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode"，让 Prettier 接管格式化
同时启用 "editor.formatOnSave": true 和 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
关键一步：装 eslint-config-prettier，并在 .eslintrc.js 的 extends 末尾加上它，否则 semi、quotes 等规则会和 Prettier 冲突
Vue/React 项目务必加对应插件扩展，比如 plugin:vue/vue3-essential，否则 v-if 或 useState 可能被误报

HTML 标签嵌套深了，改 <div> 忘改 </div>；TSX 里写 <button></button> 却没 import —— 这类低级错误占调试时间的 30% 以上。

Auto Rename Tag 默认只作用于 html，若要用在 .vue 或 .tsx，需手动加配置："auto-rename-tag.activationOnLanguage": ["html", "vue", "typescriptreact"]
Auto Import 对 TypeScript 有效，但对 JavaScript 默认关闭；如需开启，加 "auto-import.importStyle": "auto" 并确保 jsconfig.json 存在
两者都依赖语言服务器正常工作——如果 node_modules 没装全或 tsconfig.json 路径错，插件会静默失效，此时看状态栏右下角 TS/JS 图标是否报错

Vue/React 项目普遍用 @ 指向 src，但 VSCode 原生不识别这种别名，Ctrl+单击直接失效。

装 Path Intellisense 或 Alias Navigator 后，还需告诉插件映射关系
在项目根目录 jsconfig.json（JS）或 tsconfig.json（TS）里补上 "compilerOptions.baseUrl" 和 "paths"，例如："@/*": ["src/*"]
配置完必须重启 VSCode 或执行 Developer: Reload Window，否则缓存未更新，跳转仍失败
如果用了 Vite，还要确认 vite.config.ts 中的 resolve.alias 和 tsconfig.json 一致，否则插件跳转成功，但运行时报错