提升前端协作开发效率的VSCode插件-VSCode-PHP中文网

eslint与prettier不打架的关键是职责分离：eslint专注逻辑与规范检查，prettier专管格式；需安装eslint-config-prettier并置于extends末尾，禁用eslint自动格式化，统一配置文件并锁定版本。

提升前端协作开发效率的vscode插件

团队里代码风格不统一、路径写错、改了标签忘了闭合、调试时反复切窗口——这些问题不是靠开会能解决的，得靠插件在编辑器里直接堵住漏洞。

两者功能重叠但分工明确：ESLint 检逻辑和规范，Prettier 只管格式。冲突常出现在保存时互相覆盖，根源是规则没对齐。

必须安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 末尾加上它，否则 no-semi 和 prettier.semi 会互踩
settings.json 中禁用 ESLint 自动格式化：设置 "eslint.format.enable": false，只让 Prettier 负责格式，ESLint 专注报错
团队共用 .prettierrc 和 .eslintrc.js，版本也要锁死（比如 prettier@3.2.5），不同 minor 版本可能改变换行或括号策略

Path Intellisense 默认不识别别名，光装插件没用，必须告诉它“@”代表什么。

PigX UI 前端开发

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

下载

项目根目录要有 jsconfig.json 或 tsconfig.json，且包含 "baseUrl" 和 "paths" 配置，例如：{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}}
VSCode 设置里确认 "path-intellisense.mappings" 没被手动覆盖，否则会忽略 tsconfig
如果用了 Vite，确保 vite.config.ts 里的 resolve.alias 和 tsconfig 一致，否则运行时没问题、编辑器里路径标红

Auto Rename Tag 对 JSX 支持有限，默认只处理 HTML 标签，React/Vue 的自定义组件名不会自动改。

打开设置搜索 "auto-rename-tag.activationOnLanguage"，手动添加 "javascriptreact" 和 "typescriptreact"
遇到 <mybutton onclick="{...}"></mybutton> 这类首字母大写的组件，插件默认不触发；需在设置里把 "auto-rename-tag.includeJSXTags" 设为 true
Vue 单文件组件中，<template></template> 里的标签能自动重命名，但 <script setup></script> 里的变量名不会联动，这是设计使然，别指望它管逻辑层

Debugger for Chrome 依赖 sourcemap 正确生成和映射，Webpack/Vite 配置稍有偏差，VSCode 就找不到原始代码行。

launch.json 中 "webRoot" 必须指向构建产物所在目录（如 "${workspaceFolder}/dist"），不是源码目录
Vite 项目需在 vite.config.ts 中显式开启 sourcemap：build: { sourcemap: true }，否则即使 launch.json 写对也白搭
Chrome 浏览器开发者工具里，检查 Sources > Page 下是否显示的是 .ts 文件而非 .js，如果不是，说明 sourcemap 路径没解析成功，常见于 "sourceMapPathOverrides" 配置缺失