microsoft / vscode

185,65540,293+64 todayTypeScript

View on GitHub

Visual Studio Code

💡 Use Cases

最适合需要轻量级但功能全面的编辑器来应对多语言开发、团队协作和现代工具链集成的开发者。

多语言开发调试

Problem: 开发者需要在同一项目中处理多种编程语言（如前端JS/TS、后端Python、配置文件等），频繁切换不同编辑器很麻烦。

Solution: VS Code通过丰富的语言扩展和内置调试器，支持数十种语言的语法高亮、智能提示和调试，一个编辑器搞定所有开发需求。

Example: 一个全栈项目同时包含React前端（TypeScript）、Flask后端（Python）和Docker配置，可以在VS Code中无缝编辑和调试所有文件。

团队协作统一环境

Problem: 团队中每个成员使用不同的编辑器配置，导致代码格式、插件版本不一致，影响协作效率。

Solution: VS Code支持通过.vscode文件夹共享编辑器设置、推荐扩展和调试配置，确保团队使用统一的开发环境。

Example: 团队在项目中配置settings.json定义统一的代码格式化规则，并推荐ESLint、Prettier等扩展，新人克隆项目后一键安装即可获得标准环境。

快速集成现有工具链

Problem: 开发者已有CI/CD、测试、构建等工具链，希望编辑器能轻量级集成而不需要重型IDE。

Solution: VS Code提供终端集成、任务运行器和丰富的扩展市场，可以轻松连接Git、Docker、测试框架等外部工具。

Example: 在VS Code中直接运行npm脚本、执行Git操作、查看Docker容器日志，无需离开编辑器即可完成完整的开发工作流。

远程开发与容器开发

Problem: 开发环境与生产环境不一致，或在本地难以配置复杂的依赖环境。

Solution: VS Code的Remote Development扩展允许直接连接远程服务器、容器或WSL，在本地编辑器中获得远程环境的完整开发体验。

Example: 通过SSH连接到云服务器开发Python应用，或直接在Docker容器中开发Node.js服务，所有编辑和调试操作都在本地VS Code界面完成。

📊 Project Info

Language: TypeScript
Stars: ⭐ 185,655
Forks: 40,293
Today: +64
Ranking: #4
Collection: Language
Trending Date: June 1, 2026
Last Push: 6/2/2026

🏷️ Topics

TypeScriptElectron代码编辑开发工具可扩展跨平台开发者程序员

📸 Screenshots

5分钟从源码运行 VS Code

本指南将帮助你在5分钟内从源码构建并运行 VS Code 编辑器

🖥️ OS

WindowsmacOSLinux

⚙️ Runtime

Node.js>= 18.0.0

Python>= 3.7.0

🔧 Tools

Git— 克隆源代码仓库

📝 Steps

克隆仓库

克隆 VS Code 源代码仓库到本地

克隆主仓库

$ git clone https://github.com/microsoft/vscode.git

✓Expected: 克隆完成后会创建 vscode 目录

💡如果网络较慢，可以使用 GitHub 镜像源

进入项目目录

切换到项目目录并安装依赖

进入项目根目录

$ cd vscode

安装所有依赖包

$ npm install

✓Expected: 看到大量依赖包被下载和安装

💡首次安装可能需要5-10分钟，取决于网络速度

编译并运行

编译项目并启动 VS Code 编辑器

启动编译监视模式（新开终端）

$ npm run watch

在另一个终端中启动 VS Code

$ npm run electron

✓Expected: VS Code 编辑器窗口成功打开

💡需要打开两个终端窗口，一个用于编译监视，一个用于运行

✅ 验证成功

成功启动 VS Code 编辑器窗口

✓看到 VS Code 启动画面
✓编辑器主界面正常显示
✓可以创建和编辑文件

⚡ Quick Tips

配置如果 npm install 失败，尝试使用 npm install --legacy-peer-deps

性能开发模式下运行速度较慢是正常的，正式构建会优化性能

调试使用 Ctrl+Shift+P 打开命令面板测试功能

🔍 Troubleshooting

❓ npm install 失败，提示权限错误

→ 使用管理员权限运行，或修复 npm 权限：npm config set unsafe-perm true

❓ 编译时报错缺少依赖

→ 确保已安装 Python 3.7+ 并添加到 PATH，Windows 用户需要安装 Windows Build Tools

❓ 运行 npm run electron 时报错

→ 确保 npm run watch 正在运行并已完成初始编译

🎯 Next Steps

查看官方贡献指南

了解如何参与 VS Code 开发

尝试修改代码并重新编译

体验开发流程

探索扩展开发

学习如何为 VS Code 开发扩展

Difficulty

中级

Est. Time

2-3天

Target Audience

有一定TypeScript/JavaScript基础，对Electron或大型IDE/编辑器开发感兴趣，想了解VS Code内部机制或为其贡献代码的开发者。

🎯 What You'll Learn

能够成功在本地构建并运行VS Code源代码，理解其核心项目结构，并能定位和修改一些简单的代码问题。

📋 Prerequisites

Git熟悉

用于克隆代码仓库、切换分支和提交代码。

Node.js 和 npm/yarn熟悉

VS Code基于Node.js环境构建，依赖管理、脚本执行和构建过程都离不开它。

TypeScript/JavaScript熟悉

VS Code的核心代码使用TypeScript编写，理解其语法是阅读和修改代码的基础。

Electron (了解)了解(optional)

VS Code是基于Electron的桌面应用，了解其主进程/渲染进程架构有助于理解项目结构。

📚 Resources

必看

项目根目录的 CONTRIBUTING.md 文档

最权威的贡献指南，详细说明了如何构建、调试、测试和提交代码。

🗺️ Learning Phases

环境准备与代码获取

⏱ 1-2小时

安装必备工具

确保系统已安装Git、Node.js（建议LTS版本）和Python（用于编译原生模块）。

💡在终端运行 `node -v` 和 `npm -v` 检查版本。Windows用户可能需要安装构建工具（如windows-build-tools）。

克隆代码仓库

使用Git克隆VS Code的官方仓库到本地。命令：`git clone https://github.com/microsoft/vscode.git`

💡仓库较大，克隆可能需要一些时间。可以考虑使用 `--depth 1` 先克隆最近一次提交以加快速度。

安装项目依赖

进入项目根目录 (`cd vscode`)，运行 `npm install` 或 `yarn` 安装所有依赖包。

💡依赖非常多，安装过程耗时较长，请耐心等待。确保网络通畅。

首次构建与运行

⏱ 1-2小时

执行编译任务

运行项目根目录下的编译脚本。通常命令是 `npm run compile` 或 `yarn compile`。

💡这是将TypeScript代码编译成JavaScript的关键步骤。首次编译时间较长。观察终端输出，确保没有报错。

启动开发版本

编译成功后，运行 `npm run watch` 启动监视模式（代码改动后自动重编译），然后在另一个终端运行 `npm run electron` 启动VS Code的开发版本。

💡`npm run watch` 会持续运行并监听文件变化。`npm run electron` 会启动一个基于你源代码的VS Code实例。

验证运行成功

观察启动的VS Code窗口。标题栏通常会包含“开发人员”或类似字样，表示你正在运行自己构建的版本。

💡尝试打开一个文件或文件夹，确保基本编辑功能正常。

探索项目结构与开发流程

⏱ 3-4小时

阅读核心目录

浏览项目根目录下的关键文件夹：`src/vs`（核心源代码）、`extensions`（内置扩展）、`scripts`（构建脚本）。

💡重点关注 `src/vs/editor`（编辑器核心）、`src/vs/workbench`（工作台UI）。README中提到的 `extensions` 文件夹也值得一看。

学习开发工作流

仔细阅读项目根目录下的 `CONTRIBUTING.md` 或 `docs/contributing` 文件夹内的文档，了解代码规范、调试和测试方法。

💡这是官方贡献指南，是理解项目开发流程的圣经。即使不立刻贡献，也能帮你理解项目。

尝试运行测试

选择一个简单的测试来运行，例如在终端执行 `npm run test` 或更具体的测试子集命令，观察测试过程。

💡首次运行测试可能较慢。可以从单元测试开始，而不是端到端测试。

实践：定位与修改

⏱ 3-5小时

寻找一个入门级Issue

访问GitHub仓库的Issues页面，使用标签过滤器（如 `good first issue`, `help-wanted`）寻找一个描述清晰、难度较低的问题。

💡README中提到了可以通过标签筛选issue。选择涉及UI文本修改、简单功能调整的问题开始。

理解问题并定位代码

仔细阅读Issue描述和评论。根据问题描述的关键词，在项目代码中使用搜索功能（如VS Code本身的搜索或grep）定位相关代码文件。

💡善用VS Code强大的代码搜索和跳转功能。查看相关代码的git历史记录也有助于理解。

进行修改并测试

在本地进行代码修改。修改后，确保重新编译（如果没开watch则需手动`npm run compile`），然后重启开发版VS Code (`npm run electron`) 验证修改是否生效。

💡修改后，运行相关的单元测试以确保没有破坏现有功能。保持修改尽量小且专注。

⚠️ Common Mistakes

❌ Node.js版本不匹配

✅ 使用项目推荐的Node.js版本（通常在 `.github` 或根目录配置文件中注明），避免因版本过高或过低导致依赖安装或构建失败。

❌ 依赖安装不完整或网络问题

✅ 确保使用稳定的网络，如果 `npm install` 失败，可以尝试清除npm缓存 (`npm cache clean --force`)，或使用 `yarn`，或配置国内镜像源。

❌ 未运行编译步骤直接启动

✅ 在运行 `npm run electron` 前，务必先成功执行 `npm run compile`。开发时使用 `npm run watch` 可以避免手动重复编译。

❌ 直接修改 `src` 下的编译输出文件

✅ 所有源代码修改都应在 `src/` 目录下的 `.ts` 文件中进行，编译后的 `.js` 文件在 `out/` 或类似目录，切勿直接修改后者。

❌ 选择了过于复杂的Issue作为起点

✅ 新手应从标记为 `good first issue` 或 `help-wanted` 的简单问题开始，避免涉及复杂架构或核心算法的问题，以免受挫。

🚀 Next Steps

1. 深入研究特定模块：如编辑器(`vs/editor`)、语言服务(`vs/language`)、调试器。2. 学习并尝试为项目添加一个简单的功能或修复一个稍复杂的Bug。3. 了解VS Code的扩展API，并尝试开发一个自己的扩展，这能加深对主程序架构的理解。4. 参与代码审查，学习他人的优秀代码和设计思路。