VSCode前端工作流优化需禁用内置TS服务、配置codeActionsOnSave自动修复、强制文件类型关联、排除无关目录。关键在删干扰项、固化高频操作，而非堆砌插件。
VSCode 本身不自带“前端工作流优化”开关，所有优化都来自配置、插件和你对编辑器行为的理解。关键不是装多少插件，而是删掉干扰项、固化高频操作、让工具响应你的直觉。
禁用默认 TypeScript 语言服务，改用 tsserver + typescript-eslint
VSCode 内置的 TS 支持会和项目本地 typescript 版本冲突，导致类型提示错乱、Go to Definition 跳转失败、保存时格式化失效。
- 在用户设置（
settings.json）中添加："typescript.preferences.includePackageJsonAutoImports": "auto",<br>"typescript.suggest.autoImports": false,<br>"typescript.preferences.useAliasesForRenames": true
- 禁用内置 TS 插件：命令面板（
Ctrl+Shift+P）→Extensions: Show Built-in Extensions→ 搜索TypeScript and JavaScript Language Features→ 点击齿轮图标 →Disable (Workspace) - 确保项目根目录有
tsconfig.json，且已安装typescript和@typescript-eslint/parser
用 editor.codeActionsOnSave 替代保存时手动格式化
手动按 Shift+Alt+F 是反模式。真正省时间的是保存即修正：自动修复 ESLint 错误、Prettier 格式化、补全 import、移除未使用变量。
- 推荐配置（写入
.vscode/settings.json）："editor.codeActionsOnSave": {<br> "source.fixAll.eslint": true,<br> "source.organizeImports": true,<br> "source.removeUnusedVariables": true<br>},<br>"eslint.enable": true,<br>"eslint.format.enable": false - 注意：
prettier不要设为editor.defaultFormatter，否则会和 ESLint 的fixAll冲突；应由 ESLint 插件接管格式化逻辑 - 若用 Vite，确保
vite.config.ts中esbuild的drop或treeShaking不影响开发时的 import 提示
用 files.associations 和 emeraldwalk.runonsave 处理非标准文件类型
前端项目里常有 .astro、.svelte、.vue、.mdx 这类文件，VSCode 默认不识别语法或无法触发 lint，靠插件自动激活常有延迟。
立即学习“前端免费学习笔记（深入）”；
- 强制关联语言：
"files.associations": {<br> "*.astro": "astro",<br> "*.svelte": "svelte",<br> "*.mdx": "mdx"<br>} - 保存时运行脚本（比如生成组件类型声明、刷新 SWC 缓存）：
"emeraldwalk.runonsave": {<br> "commands": [<br> { "match": "\.ts$", "cmd": "npx tsc --noEmit --skipLibCheck" }<br> ]<br>} - 避免用
shellCommand类插件跑npm run build，它会阻塞保存；优先选轻量 CLI 工具（如swc、biome）
最常被忽略的一点：VSCode 的 search.exclude 和 files.watcherExclude 不只是提升搜索速度，更是防止热更新卡顿的底层开关。node_modules、dist、.git 目录没被正确排除时，Vite/HMR 会反复监听无意义变更，表现为「改一行代码，三秒后才刷新」——这不是框架慢，是你没告诉编辑器「别管这些」。
