VSCode插件让前端开发更具掌控力-VSCode-PHP中文网

eslint 和 prettier 必须协同配置，因 eslint 专注逻辑错误检查（如未定义变量、console.log），prettier 专责格式化（如缩进、引号），但二者默认存在 semi、quotes 等规则重叠，不协调会导致保存时反复格式化、报错、光标跳动；实操需安装 eslint-config-prettier 并在 .eslintrc.js extends 末尾引入以禁用冲突规则，vscode 中设 "editor.defaultformatter": "esbenp.prettier-vscode" 且禁用 eslint 格式化能力（eslint.format.enable: false），确保各司其职。

vscode插件让前端开发更具掌控力

为什么 ESLint 和 Prettier 必须一起配，但又容易冲突

单独装 ESLint 会标红未定义变量、console.log、隐式全局等逻辑问题；单独装 Prettier 只管缩进、引号、换行这些“长得好不好看”的事。但两者默认规则有重叠（比如 semi 是否加分号），不协调就会导致保存时反复格式化、报错、再格式化，编辑器卡顿甚至崩溃。

实操建议：

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 末尾加上它，显式关掉所有和格式相关的 ESLint 规则
VSCode 设置里把 editor.defaultFormatter 设为 esbenp.prettier-vscode，而不是 ESLint 插件本身
禁用 ESLint 的自动修复（eslint.enable 保持 true，但不要开 eslint.autoFixOnSave），让 Prettier 负责格式，ESLint 只负责报错

路径跳转失效？别急着重装插件，先查 jsconfig.json

写 import { api } from '@/api/user' 却 Ctrl+点击跳不到文件，大概率不是插件没装，而是项目缺少路径映射声明。VSCode 默认只认相对路径（../、./），@/ 这种 alias 是 Webpack/Vite 配的，编辑器并不知道。

实操建议：

在项目根目录新建 jsconfig.json（TS 项目用 tsconfig.json），写入 "baseUrl": "." 和 "paths": { "@/*": ["src/*"] }
确保插件已装 Path Intellisense 或官方 TypeScript 插件（自带路径解析能力）
改完配置后重启 VSCode，不要只重载窗口——旧的 language server 缓存可能没清掉

Live Server 启动后页面空白或 404？检查文件位置和端口占用

点 Go Live 按钮后浏览器打不开，或者打开是空白页、Network 显示 404，常见原因不是插件坏了，而是启动上下文错了。

实操建议：

必须右键点击一个 .html 文件再选 Open with Live Server，不能只在文件夹上右键，也不能从空标签页点按钮
如果提示端口被占（如 EADDRINUSE），去 .vscode/settings.json 加一行："liveServer.settings.port": 5501，避开默认的 5500
若页面空白但控制台无报错，检查 HTML 是否有标签且未被注释掉——Live Server 不会报语法错误，只原样吐出 HTML

Vue 模板里变量悬停不跳转？Volar 和 Vetur 别共存

Vue 3 项目里鼠标 hover {{ name }} 没反应，点不了跳 data 定义，基本是插件打架。Volar 是 Vue 官方推荐的 Vue 3 语言支持工具，Vetur 是 Vue 2 时代的遗产，两者同时启用会导致类型服务互相覆盖，光标悬停、自动补全全部失效。

实操建议：

卸载 Vetur，哪怕项目里还有 Vue 2 文件——Volar 兼容 Vue 2 模板，但反向不成立
确认 Volar 已启用，并在 VSCode 设置里搜 volar.ignores，把不需要类型检查的目录（如 node_modules、dist）加进去，避免卡顿
如果用了 vue-helper，它的变量跳转功能依赖 Volar 提供的 AST，Volar 挂了它也跟着失灵

复杂点在于插件之间不是独立运行的，它们共享语言服务器、路径解析器、格式化管道。一个配置项写错，可能让三个插件集体沉默——这种耦合藏得深，但恰恰是日常开发里最常卡住人的地方。