基于 VSCODE 源码开发

最新推荐文章于 2025-02-12 19:40:33 发布

ErikChan.hk

最新推荐文章于 2025-02-12 19:40:33 发布

阅读量1k

点赞数

分类专栏： vscode 文章标签： vscode 源码开发工具

本文链接：https://blog.youkuaiyun.com/jiaming917/article/details/115478624

版权

vscode 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何基于VSCode源码进行定制开发，包括其核心组件如Electron、MonacoEditor和TypeScript的使用。项目结构分析展示了各个模块的功能，如base、platform和editor等。在开发过程中，需关注不同环境下的API使用，如common、browser、node和electron-brower。通过yarn进行依赖安装和项目构建，然后启动调试。该文对于理解VSCode内部工作原理及自定义开发具有指导意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于一些自定义工程管理的需求，很多时候需要改造界面，这个时候从源码角度入手才方便实现相关的功能。基于源码修改虽然可以很大程度满足无限的需求，但是也会带来其他问题，比如：不方便升级 vscode 的的更新、可能会有意想不到的影响

基于 vscode 源码开发的 IDE

HUAWEI-LiteOS-Studio

EgretWing

Taobao Editor

技术架构

在这里插入图片描述

Electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可 (Electron = Node.js + Chromium + Native API)

Monaco Editor

Monaco Editor是微软开源项目, 为 VS Code 提供支持的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码，可独立运行。

TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

项目结构分析

├── build         # gulp编译构建脚本
├── extensions    # 内置插件
├── product.json  # App meta信息
├── resources     # 平台相关静态资源
├── scripts       # 工具脚本，开发/测试
├── src           # 源码目录
└── typings       # 函数语法补全定义
└── vs
    ├── base        # 通用工具/协议和UI库
    │   ├── browser # 基础UI组件，DOM操作
    │   ├── common  # diff描述，markdown解析器，worker协议，各种工具函数
    │   ├── node    # Node工具函数
    │   ├── parts   # IPC协议（Electron、Node），quickopen、tree组件
    │   ├── test    # base单测用例
    │   └── worker  # Worker factory和main Worker（运行IDE Core：Monaco）
    ├── code        # VSCode主运行窗口
    ├── editor        # IDE代码编辑器
    |   ├── browser     # 代码编辑器核心
    |   ├── common      # 代码编辑器核心
    |   ├── contrib     # vscode 与独立 IDE共享的代码
    |   └── standalone  # 独立 IDE 独有的代码
    ├── platform      # 支持注入服务和平台相关基础服务（文件、剪切板、窗体、状态栏）
    ├── workbench     # 工作区UI布局，功能主界面
    │   ├── api              #
    │   ├── browser          #
    │   ├── common           #
    │   ├── contrib          #
    │   ├── electron-browser #
    │   ├── services         #
    │   └── test             #
    ├── css.build.js  # 用于插件构建的CSS loader
    ├── css.js        # CSS loader
    ├── editor        # 对接IDE Core（读取编辑/交互状态），提供命令、上下文菜单、hover、snippet等支持
    ├── loader.js     # AMD loader（用于异步加载AMD模块）
    ├── nls.build.js  # 用于插件构建的NLS loader
    └── nls.js        # NLS（National Language Support）多语言loader

核心层

base: 提供通用服务和构建用户界面
platform: 注入服务和基础服务代码
editor: 微软 Monaco 编辑器，也可独立运行使用
wrokbench: 配合 Monaco 并且给 viewlets 提供框架：如：浏览器状态栏，菜单栏利用 electron 实现桌面程序

核心环境

整个项目完全使用 typescript 实现，electron 中运行主进程和渲染进程，使用的 api 有所不同，所以在 core 中每个目录组织也是按照使用的 api 来安排，
运行的环境分为几类：

common: 只使用 javascritp api 的代码，能在任何环境下运行
browser: 浏览器 api, 如操作 dom; 可以调用 common
node: 需要使用 node 的 api,比如文件 io 操作
electron-brower: 渲染进程 api, 可以调用 common, brower, node, 依赖electron renderer-process API
electron-main: 主进程 api, 可以调用: common, node 依赖于[electron main-process AP]

运行 VSCODE

先安装好Node.js和Git
安装 yarn
```
npm install yarn -g
```

安装所有依赖

yarn install --dependencies --save

yarn install --devDependencies --save-dev

构建项目，并且监视文件的修改
```
yarn watch
```
另起一个 shell，启动项目
```
.\scripts\code.bat
```
调试
点击 Run -> Start Debugging 或者直接 F5 即可启动调试