VS Code 怎么给前端和 Go 项目分别设置扩展配置
来源:17golang原创
时间:2026-09-05 22:55:35 498浏览 收藏
前端项目需要 ESLint、Prettier 和浏览器调试工具,Go 项目又需要 Go 语言支持、测试和调试配置。如果所有扩展和设置都堆在同一个 VS Code 默认环境里,最常见的结果就是状态栏变拥挤、格式化器选错,或者打开一个项目后误用了另一个项目的设置。更稳妥的做法是用 VS Code Profiles 为两个工作区分别保存配置。
在前端文件夹里创建 Frontend Profile,在 Go 文件夹里创建 Go Profile;Profile 会随文件夹或工作区关联,重新打开项目时可以自动回到对应配置。
- Profiles 编辑器可从左侧活动栏底部的 Manage 齿轮进入,也可从 File > Preferences > Profiles 打开。
- 新 Profile 可以从空配置或已有 Profile 复制,并单独保存设置、扩展、快捷键、任务等内容。
- 用 Profiles: Switch Profile 切换后,要同时检查标题栏、Manage 标识和扩展启用状态。
为什么要按项目拆分 Profile
Profile 不只是一个主题开关,它可以保存扩展、设置、快捷键、代码片段、任务和界面布局。比如 Frontend Profile 只保留前端项目需要的格式化与检查扩展,Go Profile 则放 Go 语言支持和调试相关配置。这样做的关键不是“装更多扩展”,而是让当前工作区知道自己应该使用哪一组配置。
| 工作区 | 建议 Profile | 主要配置 | 打开后的确认点 |
|---|---|---|---|
| 前端项目 | Frontend | 格式化、Lint、浏览器调试 | 标题栏显示 Frontend,扩展状态符合前端工作流 |
| Go 项目 | Go | Go 语言支持、测试、调试 | 标题栏显示 Go,Go 扩展处于启用状态 |
第1步:从当前工作区打开 Profiles 编辑器
先打开一个前端项目文件夹。点击左侧活动栏底部的 Manage 齿轮,在菜单中进入 Profiles;也可以使用菜单栏的 File > Preferences > Profiles。Profiles 编辑器会以覆盖层打开,所有 Profile 都从这里创建和管理。

第2步:创建 Frontend 和 Go 两个 Profile
在前端工作区点击 New Profile,名称填为 Frontend。可以选择 Empty Profile,从干净配置开始,也可以复制已有 Profile 再删减内容。新建表单中的 Contents 区域允许你决定哪些设置、快捷键、代码片段、任务和扩展跟随这个 Profile。第一次配置建议从空 Profile 开始,避免把默认环境里不需要的扩展一起带过来。
创建完成后,在 Go 项目文件夹重复同样的操作,名称填为 Go,然后只启用 Go 工作流需要的扩展和设置。Profiles 会关联当前文件夹或工作区,所以两个 Profile 不需要靠手动修改同一个 settings.json 来回切换。
第3步:切换 Profile 并确认当前配置
打开 Go 项目后,按 Cmd/Ctrl + Shift + P 打开命令面板,执行 Profiles: Switch Profile,选择 Go。也可以回到 Profiles 编辑器,点击目标 Profile 旁边的 Use this Profile for Current Window。

切换后不要只看编辑器主题。VS Code 会在标题栏显示当前 Profile;如果 Profile 设置了图标,Manage 按钮会显示该图标,没有图标时会显示前两个字母。再打开扩展视图,确认 Go 语言支持处于启用状态,格式化器和任务也没有沿用 Frontend 的选择。
第4步:重新打开项目做一次验收
关闭当前窗口,再分别打开前端文件夹和 Go 文件夹。每次打开后进入 Profiles 编辑器的 Folders & Workspaces 区域,确认当前目录已经关联到预期 Profile。如果某个项目仍回到 Default Profile,通常是创建 Profile 时没有在该文件夹上下文中完成,重新切到该工作区再用 Use this Profile for Current Window 绑定即可。
需要在多台机器同步时,可使用 Settings Sync,并在 Configure 下拉项中勾选 Profiles。远程窗口(例如 SSH、开发容器或 WSL)不会同步本地扩展到远程窗口,这一限制要单独处理,不能把同步成功理解为远程环境已经装好所有扩展。
常见问题
创建 Profile 后为什么仍然看到默认扩展?
检查新建时是否复制了 Default Profile,以及 Contents 中是否保留了扩展。需要完全隔离时选择 Empty Profile,再按项目需要逐个安装或启用。
Profile 是按窗口还是按项目保存?
切换动作作用于当前窗口,但 Profile 可以和当前文件夹或工作区关联。重新打开同一项目时,VS Code 会优先使用该工作区已经关联的 Profile。
能不能让一个扩展对所有 Profile 都生效?
可以。在扩展视图中使用 Apply Extension to all Profiles。设置也有 Apply Setting to all Profiles,但这样修改会同步影响其他 Profile,公共配置要谨慎开启。
为什么远程开发后扩展没有跟着同步?
VS Code 文档明确说明,Settings Sync 不会把扩展同步到 SSH、开发容器或 WSL 的远程窗口,需要在对应远程环境里单独安装。
最终确认清单
- 前端文件夹打开后显示 Frontend,Go 文件夹打开后显示 Go。
- 标题栏、Manage 标识和扩展视图三个位置的状态一致。
- 通用设置才使用 Apply to all Profiles,项目专属设置留在各自 Profile。
- 远程环境单独检查扩展,不把本地 Settings Sync 当成远程安装结果。
-
281 收藏
-
493 收藏
-
323 收藏
-
417 收藏
-
114 收藏
-
287 收藏
-
文章 · 软件教程 | 1天前 | 前端性能 · 浏览器缓存 · Chrome DevTools · 网页调试 · Chrome DevTools bfcache Back-forward Cache Run Test259 收藏
-
468 收藏
-
198 收藏
-
398 收藏
-
438 收藏
-
348 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习