VSCode插件优化前端开发工具链配置-VSCode-PHP中文网

真正起效的只有3–5个核心插件，其余多数拖慢启动、干扰intellisense或与工具链冲突；应禁用内置ts/js语言服务，改用项目级tsserver；eslint接管格式化，禁用prettier默认格式器；live server慎用，优先命令行启动；文件类型需手动关联，排除node_modules以保障性能。

vscode插件优化前端开发工具链配置

插件不是越多越好，真正起效的只有 3–5 个核心插件，其余多数会拖慢启动、干扰 IntelliSense、甚至和本地工具链冲突。

禁用内置 TS/JS 语言服务，改用项目级 tsserver

VSCode 自带的 TypeScript and JavaScript Language Features 插件默认启用，但它调用的是 VSCode 内置 TS 版本（通常滞后），和你项目中 typescript 的实际版本不一致 → 导致 Go to Definition 跳错、类型提示缺失、import 补全失效。

在命令面板（Ctrl+Shift+P）输入 Extensions: Show Built-in Extensions，搜索该插件，点击齿轮图标 → Disable (Workspace)
确保项目根目录有 tsconfig.json，且已安装 typescript 和 @typescript-eslint/parser
不需要额外装 “TypeScript Hero” 或 “TS Import Sorter” 类插件——这些功能已被 editor.codeActionsOnSave 原生覆盖

用 ESLint 插件接管格式化，别设 `prettier` 为 defaultFormatter

把 esbenp.prettier-vscode 设为 editor.defaultFormatter 是常见错误。它会和 ESLint 的 source.fixAll.eslint 并行触发，导致 import 排序被覆盖、分号被反复加/删、保存后代码“抖动”。

PigX UI 前端开发

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

下载

只启用 dbaeumer.vscode-eslint，并在 .vscode/settings.json 中配置：
"editor.codeActionsOnSave": {"source.fixAll.eslint": true,"source.organizeImports": true}
"eslint.format.enable": false（关掉 ESLint 插件的格式化入口，只留修复能力）
"prettier 相关配置仅用于统一风格（如 prettier.semi），不参与保存流程

Live Server 不要全局启用，优先用命令行替代

ritwickdey.LiveServer 在大型项目里常引发高 CPU 占用，尤其当 node_modules 或 dist 没被正确排除时；它还会和 Vite / Webpack Dev Server 的 HMR 冲突，造成双重刷新或热更新失效。

禁用该插件，改用项目内命令：比如 npx serve -s dist（静态）、npx vite（Vite）、npx webpack serve（Webpack）
若必须用 Live Server，请在 settings.json 中严格限制监听范围："liveServer.settings.ignoreFiles": ["**/node_modules/**", "**/dist/**"]
不要依赖状态栏 Go Live 按钮——它默认以工作区根为服务器根目录，容易暴露源码或跳转 404

文件类型关联必须手动写死，别等插件自动识别

.astro、.svelte、.vue、.mdx 这类文件，VSCode 默认不识别语言模式，插件激活常有延迟或失败，结果是语法高亮丢失、ESLint 不跑、emeraldwalk.runonsave 不触发。

在 .vscode/settings.json 中强制声明："files.associations": {"*.astro": "astro","*.svelte": "svelte","*.vue": "vue","*.mdx": "mdx"}
对应语言插件（如 astro-build、svelte-vscode）只需安装，无需额外配置启动条件
避免使用通配符如 "*": "javascript" —— 它会让 JSON、lock 文件也走 JS 解析器，报一堆误报错误

最易被忽略的一点：所有插件行为都受 files.watcherExclude 和 files.exclude 影响。哪怕你装了最好的 ESLint 插件，如果 node_modules 没被排除，IntelliSense 就永远卡在扫描阶段。