VSCode插件打造前端高效工作环境-VSCode-PHP中文网

live server需正确配置才能实现真热重载：开启自动重载、排除.ts/.scss等非触发文件、固定端口避免请求失败，并确保无插件干扰。

vscode插件打造前端高效工作环境

VSCode本身只是个编辑器，真正决定你写代码快不快、错不错、顺不顺的，是插件组合是否贴合真实开发链路。光装一堆热门插件没用，关键得知道哪些必须开、哪些要关、哪些得配参数才能跑起来。

很多人装了 Live Server 却发现改完 HTML 保存后页面没刷新——大概率是没开自动重载，或者被其他插件干扰了。

默认配置下，liveServer.settings.NoBrowser 是 false，但如果你开了多个浏览器或用了私有模式，得手动设 "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito"
热重载依赖文件监听，如果项目里有 .ts 或 .scss 文件，它们默认不会触发刷新；得在 .vscode/settings.json 里加 "liveServer.settings.ignoreFiles": ["**/*.ts", "**/*.scss"]，否则改完源码却等不到刷新
端口冲突很常见，默认 5500 被占时它会自动跳到下一个可用端口，但前端请求地址硬编码了 http://localhost:5500 就会失败；建议统一配成固定端口："liveServer.settings.port": 3000

装完两个插件就勾上“保存时格式化”，结果代码越改越乱——这是最典型的规则打架现象。ESLint 管逻辑对不对，Prettier 管括号换行空格怎么摆，二者默认规则有重叠。

PigX UI 前端开发

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

下载

必须装 eslint-config-prettier 插件，并在 .eslintrc.js 的 extends 数组末尾加上 'prettier'，否则 quotes、semi 这类格式规则会和 Prettier 冲突
VSCode 设置里只保留一个默认 formatter："editor.defaultFormatter": "esbenp.prettier-vscode"，ESLint 插件只负责报错，不参与格式化
如果团队用 TypeScript，eslint-plugin-react 和 @typescript-eslint/eslint-plugin 得按顺序引入，否则 no-unused-vars 可能误报类型参数

在 React 里改 <button size="large"></button> 的标签名，结果闭合标签变成，但 size 属性没了——这是因为插件默认只同步标签名，不处理属性。

必须在 settings.json 里开启："auto-rename-tag.includeOpeningTag": true，否则只改开头标签，闭合标签还是旧名
JSX 中自定义组件（如 <mycard></mycard>）默认不被识别为可重命名标签；得加配置："auto-rename-tag.activationOnLanguage": ["html", "xml", "vue", "javascriptreact", "typescriptreact"]
Vue 的 <template></template> 块里，v-if、@click 这类指令不会被同步，这是设计限制，不是 bug

写了 import utils from "@/utils"，按下 Ctrl+Space 却没提示——说明插件没读到你的路径别名配置。

它只认 jsconfig.json 或 tsconfig.json 里的 compilerOptions.paths，不能读 webpack.config.js 或 vite.config.ts
配置必须写成对象形式："@/*": ["src/*"]，不能写成 "@/": ["src/"]，否则补全会失败
如果项目用了 monorepo 结构（比如 pnpm workspace），jsconfig.json 得放在每个 package 根目录，而不是 workspace 根目录