VSCode中提升前端效率的插件分享-VSCode-PHP中文网

eslint与prettier不打架的关键是职责分离：eslint专注代码质量检查，prettier专管格式化；需安装eslint-config-prettier并在.eslintrc.js的extends末尾添加"prettier"以禁用所有格式类规则，同时确保vscode默认格式化器设为prettier且关闭eslint的格式能力。

vscode中提升前端效率的插件分享

ESLint 与 Prettier 怎么配才不打架

直接装两个插件但没调好，eslint 报错、prettier 格式化完又触发 eslint 报错，是新手最常卡住的地方。核心问题不是谁对谁错，而是规则重叠。

关键操作只有三步：

在 .eslintrc.js 的 extends 数组里，把 prettier 放在最后（如 ['airbnb', 'prettier']）
必须安装 eslint-config-prettier，它负责关掉所有和格式相关的 ESLint 规则
prettier 配置里别写 semi: true 这类和 ESLint 冲突的项，交给 eslint-config-prettier 统一裁决

常见错误：手动在 rules 里加 'no-unused-vars': 'off' 之类，结果 prettier 每次保存都把分号删了，eslint 立刻标红——这不是插件问题，是配置没断干净。

路径跳转失效时该查哪几处

@/components/Button.vue 点不了、Ctrl+Click 没反应，90% 不是插件没装，而是路径映射没对上。

优先检查这三点：

jsconfig.json 或 tsconfig.json 里有没有 "baseUrl": "." 和 "paths" 块，且 @/* 映射到了 ["src/*"]
VSCode 是否识别到配置文件——打开任意 .js 文件，按 Ctrl+Shift+P 输入 “JavaScript: Restart TS Server”，强制刷新语言服务
如果用了 vue-alias-skip 这类专用插件，确认它的设置页里填的是真实项目根路径，不是相对路径或空格结尾

注意：vscode-icons 只管图标，不影响跳转；Path Intellisense 能补全路径但不解决跳转，别指望它修这个问题。

PigX UI 前端开发

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

下载

Live Server 启动后页面不自动刷新

改了 HTML/CSS，浏览器没变，不是插件坏了，而是默认监听范围太窄。

根本原因是 Live Server 默认只监视当前打开的文件及其同级目录，深层嵌套的资源（比如 src/assets/style.css）压根不在监听列表里。

解决方法很简单：

右键 HTML 文件 → “Open with Live Server”，而不是点底部状态栏的 Go Live —— 前者会以该文件所在目录为根启动服务
在 settings.json 里加配置："liveServer.settings.CustomBrowser": "chrome" 和 "liveServer.settings.AdvanceCustomBrowserCmdLine": ["--auto-open-devtools-for-tabs"]，确保 DevTools 开着，方便看 Network 面板里资源是否 404
如果项目用 Vite 或 Webpack，别硬套 Live Server，直接用框架自带 dev server，它才真正理解模块依赖和 HMR

Bracket Pair Colorizer 为什么括号颜色没变

装了插件但括号还是黑白，大概率是 VSCode 自带的括号高亮功能开了，把插件覆盖了。

必须关掉原生功能才能让插件生效：

打开设置（Ctrl+,），搜 highlight matching bracket，把它设为 false
再搜 bracket pair colorizer，确认 enabled 是 true，且 dark theme / light theme 对应的颜色方案已加载
重启 VSCode —— 这个插件不支持热重载，改完设置必须重启才生效

另外，它只对 {}、[]、() 生效，HTML 标签的 <div></div> 不归它管，那是 Auto Close Tag 和 Auto Rename Tag 的职责。