对于一些自定义工程管理的需求，很多时候需要改造界面，这个时候从源码角度入手才方便实现相关的功能。基于源码修改虽然可以很大程度满足无限的需求，但是也会带来其他问题，比如：不方便升级 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 即可启动调试