如何配置高效的前端VSCode插件环境-VSCode-PHP中文网

eslint与prettier必须协同配置：eslint专注逻辑校验（如no-unused-vars），prettier专责格式化（如引号、分号），需禁用eslint格式规则、引入eslint-config-prettier屏蔽冲突，并设prettier为vscode默认格式化器。

如何配置高效的前端vscode插件环境

只装 ESLint 会标红但不自动修；只装 Prettier 会乱格式但不管逻辑错误。两者必须协同，否则保存时可能反复格式化又报错，甚至删掉你写的分号或引号。

安装 ESLint 和 Prettier - Code formatter 两个插件
在项目根目录加 .eslintrc.js，内容至少包含 extends: ['eslint:recommended', 'prettier']
在 settings.json 中设 "editor.defaultFormatter": "esbenp.prettier-vscode" 和 "editor.formatOnSave": true
关键一步：运行 npx eslint --init 时选「Use a popular style guide」再选「Prettier」，它会自动加 eslint-config-prettier 并禁用冲突规则

漏掉 eslint-config-prettier 是最常见坑——比如 ESLint 规则要求单引号，Prettier 也设了单引号，看似一致，但 ESLint 的 quotes 规则仍会尝试修复，导致保存时抖动。

Volar 是 Vue 官方为 Vue 3（尤其是 <script setup></script>）打造的现代语言服务，Vetur 已停止维护。同时启用会导致类型提示错乱、ref 推导失败、模板中 props 校验失效。

卸载 Vetur（哪怕只是禁用也不够，VSCode 有时会缓存旧服务）
确认 Volar 插件已启用，且状态栏右下角显示「Vue (Volar)」而非「Vue (Vetur)」
如用 TypeScript，确保 tsconfig.json 中有 "compilerOptions": { "types": ["volar"] }（部分版本需手动加）
遇到跳转不到 defineProps 类型定义？检查是否开了 "vue.inlayHints.propsEnabled": true（Volar 设置项）

尤其注意：Volar 的「Take Over Mode」默认关闭，但开启后会接管所有 .vue 文件的语言服务——这是正确行为，别因看到 JS/TS 文件高亮变淡就关掉它。

PigX UI 前端开发

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

下载

写 import { api } from '@/api/user' 时，光有 Path Intellisense 不够：它能提示路径，但 Ctrl+点击进不去；没配别名跳转，编辑器根本不知道 @ 指向 src/。

先在 jsconfig.json 或 tsconfig.json 里声明别名："baseUrl": ".", "paths": { "@/*": ["src/*"] }
装 Path Intellisense，它会在输入 import 时自动补全 @/api/... 下的文件
装 @/alias-skip 或 Vue Alias Skip（Vue 专用），让 Ctrl+点击真正跳转到目标文件
如果跳转仍失败，检查 jsconfig.json 是否在项目根目录，且 VSCode 已重启（改配置后不重启无效）

别名路径配置本身不难，但 VSCode 缓存顽固——改完 jsconfig.json 后务必用 Developer: Restart Extension Host 命令刷新，否则补全和跳转都卡在旧状态。

看着满屏白色 .js .ts .vue 文件名，找组件像开盲盒；// TODO 散落在各处，过两天就忘了在哪——这不是编码问题，是信息密度太低。

装 vscode-icons，设置 → 「Icons Theme」选「VSCode Icons」，立刻区分 Vue 组件、API 文件、样式文件
装 Todo Tree，它会扫描整个工作区，把所有 // TODO // FIXME 提取到侧边栏，支持按文件、关键词过滤
想高亮括号匹配？装 Bracket Pair Colorizer，但注意新版 VSCode 已内置类似功能，可先试 "editor.guides.bracketPairs": true
别小看图标：当项目超过 200 个文件，靠颜色比靠后缀快 3 秒以上，每天省下的时间够喝两杯咖啡

图标和 TODO 插件不参与构建、不改代码逻辑，但它们是降低认知负荷的隐形基础设施——没它们，人容易在文件树和注释海洋里迷路，尤其赶需求时最明显。