VSCode前端工作流优化核心是删干扰项、固化高频操作、让工具响应直觉；需禁用内置TS服务、配置codeActionsOnSave自动修复、强制文件类型关联、排除无关目录，所有配置应写入项目级.vscode/settings.json。
VSCode前端工作流优化不是靠堆插件，而是删干扰、固化高频动作、让编辑器响应直觉。装十个插件不如改对三个配置项。
禁用内置 TypeScript 服务，改用项目本地 tsserver
常见错误现象：Go to Definition 跳转失败、类型提示错乱、保存后没自动补 import。根本原因是 VSCode 自带的 TS 版本和你项目里的 typescript 不一致。
- 在命令面板（
Ctrl+Shift+P）里搜Extensions: Show Built-in Extensions，找到TypeScript and JavaScript Language Features，点击齿轮 →Disable (Workspace) - 确保项目根目录有
tsconfig.json，且已安装typescript和@typescript-eslint/parser - 用户设置中加这几行（非必须但推荐）：
"typescript.preferences.includePackageJsonAutoImports": "auto"、"typescript.suggest.autoImports": false
用 editor.codeActionsOnSave 替代手动格式化
按 Shift+Alt+F 是反模式。真正省时间的是保存即修复：ESLint 报错自动修、import 自动整理、未使用变量自动删。
- 写入项目级
.vscode/settings.json："editor.codeActionsOnSave": {"source.fixAll.eslint": true, "source.organizeImports": true, "source.removeUnusedVariables": true} -
eslint.enable必须为true，eslint.format.enable必须为false - 别把
prettier设为editor.defaultFormatter—— 它该由 ESLint 插件接管，否则会和fixAll冲突
强制 files.associations 解决非标文件识别延迟
.astro、.svelte、.vue 这类文件，靠插件自动激活常有几秒延迟，导致刚打开时没语法高亮、没 lint 提示。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 直接在
.vscode/settings.json里硬关联："files.associations": {"*.astro": "astro", "*.svelte": "svelte", "*.vue": "vue"} - 如果用
.mdx，也加上"*.mdx": "mdx"，否则import补全和类型检查都失效 - 这个配置比装一堆“语言支持”插件更稳，尤其适合 monorepo 里多个框架混用的项目
Live Server 启动前先调端口和根目录
默认用 5500 端口，但本地常跑着 Docker 或其他服务，一开就报 address already in use；另外单页应用常需从 /src 或 /public 启服务，而非项目根目录。
- 在
settings.json里配："liveServer.settings.port": 8080（或设为0让系统自动选空闲端口） - 指定根目录：
"liveServer.settings.root": "/src"或"liveServer.settings.root": "/public" - 需要跨域调试时，用
"liveServer.settings.proxy"配代理，比如把/api转发到http://localhost:3000/api
最易被忽略的点是：所有这些配置都该写在项目级 .vscode/settings.json 里，而不是用户全局设置。不同项目依赖不同，全局配死反而害事。
