前端开发必学的VSCode插件使用技能-VSCode-PHP中文网

live server启动失败主因是工作区未识别入口文件或端口冲突，需确保打开文件夹而非单文件、检查custombrowser配置、修改port或设为0；vue路径跳转失效源于jsconfig.json/tsconfig.json中paths未配置；eslint+prettier失效因defaultformatter未设为prettier且未禁用eslint格式规则。

前端开发必学的vscode插件使用技能

VSCode插件不是装上就完事——多数人卡在“能用”和“真高效”之间，核心问题在于不知道哪些操作必须配、哪些配置会反向拖慢开发。

Live Server 启动失败或端口冲突怎么查

常见现象是点击 Go Live 没反应，或浏览器打开空白页、报 ERR_CONNECTION_REFUSED。根本原因不是插件坏了，而是工作区没识别到可服务的入口文件，或端口被占。

确保当前打开的是**文件夹**（File → Open Folder），不是单个 HTML 文件——Live Server 只对文件夹根目录下的 index.html 或配置指定的启动文件生效
检查设置里 liveServer.settings.CustomBrowser 是否误设为非默认浏览器，导致启动失败；直接删掉这行配置即可回退到系统默认
端口冲突时，修改 liveServer.settings.port 为比如 8080 或设为 0（自动分配空闲端口）
如果用了 webpack/vite 等构建工具，别在同一个项目里同时开 Live Server 和 dev server——它们都监听 localhost，必然冲突

Vue 文件里 @/ 路径无法 Ctrl+点击跳转

这是 Vue 项目最常被误认为“插件没装好”的问题，实际是 VSCode 不知道 @ 指向哪，跟插件无关，纯配置问题。

PigX UI 前端开发

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

下载

必须在项目根目录下有 jsconfig.json（Vue 2）或 tsconfig.json（Vue 3），且含 compilerOptions.paths 配置，例如：
```
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }
```
装了 vue-alias-skip 插件也得配合上面的配置才生效；单独装插件不写 paths，照样跳不了
重启 VSCode 或执行命令面板里的 Developer: Reload Window，否则新配置不加载
如果用 Vite，还需确认 vite.config.ts 中 resolve.alias 和 tsconfig.json 保持一致，否则类型检查和跳转会不一致

ESLint + Prettier 自动格式化失效

很多人开了 editor.formatOnSave 却发现保存后代码没变样，或者格式化后 ESLint 报一堆错误——这不是插件冲突，是优先级没理清。

必须把 editor.defaultFormatter 设为 esbenp.prettier-vscode，否则 VSCode 默认用内置 formatter，Prettier 根本不介入
装 eslint-config-prettier 并在 ESLint 配置中 extends 它，否则 ESLint 的格式规则（如分号、引号）会和 Prettier 冲突，导致保存后反复修正又报错
Vue 项目需额外安装 eslint-plugin-vue，并在 .eslintrc.js 里加入 plugin:vue/vue3-recommended，不然 template 里的语法压根不校验
如果用 TypeScript，typescript-eslint 的 parser 必须指向 @typescript-eslint/parser，否则 ref() 这类类型推导会失效