Eclipse 出品，1.3萬 Star！網友說要幹掉 VS Code 的新工具

【導語】：也許你們最近在很多地方看到了一篇《Eclipse 官宣，幹掉 VS Code》的文章。

其實這又是在炒 2020 年 3 月的一則冷飯。Eclipse 基金會官方就沒有「幹掉 VS Code」，說的是「VS Code 的一個真正開源替代品（a True Open Source Alternative to Visual Studio Code）」。

本文就帶你們認識一下 VS Code 的替代品：Eclipse Theia。

Theia 是一個基於 TS 開發的開源 IDE 框架，基於它咱們能夠開發出本身定製化的開發工具，它能夠部署到雲端使用，也能夠打包成桌面應用。

Theia 是什麼

Eclipse Theia 不是一個 IDE，而是一個用來開發 IDE 的框架。 它是一個可擴展的平臺，基於現代 Web 技術（TypeScript、CSS 和 HTML）實現，是用於開發成熟的、多語言的雲計算和桌面類的理想產品。

在 docker 中運行

使用 docker 來啓動一個基於 Theia 的 IDE 是最簡單的了，你只須要確保你當前的系統中安裝了 docker 便可。咱們能夠直接使用它提供的鏡像 theiaide/theia 來啓動：

# Linux, macOS, 或者 PowerShell 的終端
docker run -it --init -p 3000:3000 -v "$(pwd):/home/project" theiaide/theia:next

# Windows (cmd.exe)
docker run -it --init -p 3000:3000 -v "%cd%:/home/project" theiaide/theia:next

執行上面的命令後，會自動的去拉取 theiaide/theia:next 的鏡像而且在 http://localhost:3000 啓動 Theia IDE，它會使用你當前目錄做爲工做目錄。其中，--init 參數是用來避免死進程問題的。

假設此刻的目錄爲：/Users/jerry/workspace/testbox，在該目錄下執行上面的命令，咱們來看看結果：

經過日誌咱們能夠看出，Theia IDE 已經成功啓動而且監聽 3000 端口了，咱們打開瀏覽器看一下它的廬山真面目：

有沒有很親切的感受？哈哈，是的，它跟 VS Code 幾乎長得如出一轍，不只如此，它一樣支持 VS Code 中的插件，因此你能夠在 Theia 中盡情的「享用」 VS Code 的插件市場。咱們先來跑一個 helloworld 感覺一下這個 IDE 的能力：

構建本身的 IDE

若是你不想使用 docker，你徹底能夠本身構建一個 Theia IDE。接下來咱們就基於 Theia，在本地跑起來屬於咱們本身的 IDE。

1. 環境要求

• Node.js 版本 >= 12.14.1 且 < 13
• Yarn 版本 >= 1.7.0

1. 建立項目

mkdir my-theia
cd my-theia

接着建立 package.json 文件：

{
  "name": "My Cool IDE",
  "dependencies": {
    "@theia/callhierarchy": "next",
    "@theia/file-search": "next",
    "@theia/git": "next",
    "@theia/markers": "next",
    "@theia/messages": "next",
    "@theia/mini-browser": "next",
    "@theia/navigator": "next",
    "@theia/outline-view": "next",
    "@theia/plugin-ext-vscode": "next",
    "@theia/preferences": "next",
    "@theia/preview": "next",
    "@theia/search-in-workspace": "next",
    "@theia/terminal": "next"
  },
  "devDependencies": {
    "@theia/cli": "next"
  }
}

經過 package.json 咱們看到，其實 Theia 也是個 Node 的包。dependencies 中有不少依賴，大體能夠推測出，Theia 的功能是由這些包組合起來的，好比@theia/search-in-workspace 負責搜索模塊，@theia/terminal 負責終端模塊等；另外，@theia/cli 做爲 devDependencies，咱們會在構建與運行時用到它的一些命令。

1. 安裝依賴

yarn

若是下載依賴緩慢，建議切換鏡像源地址。安裝成功的結果應該以下：

1. 構建項目

yarn theia build

這個命令主要是用來生成項目代碼的，包含源碼，webpack 配置文件以及 webpack 打包後的文件。運行成功的結果以下：

1. 運行 Theia IDE

直接運行

yarn theia start

就能看到咱們的 IDE 跑在了 3000 端口：

咱們打開 http://localhost:3000 看看：

也是與 VSCode 近乎一致的體驗。

1. 封裝 npm scripts

在 package.json 中添加：

{
  // ..... others
  "scripts": {
    "start": "theia start",
    "build": "theia build"
  }
}

之後咱們就能夠直接用 yarn xxx 的方式來執行了。至此，咱們本地已經成功構建了一個 IDE ～

1. （進階）安裝插件

其實上一步咱們已經有了一個 IDE 了，可是做爲開發工具來講，那可能還差點意思。究竟差點什麼呢？咱們來寫一些代碼就知道了：

是的，一目瞭然的結果，沒有高亮，而且編碼的過程當中什麼提示也沒有，也就是至關於一個長得好看的記事本了。這徹底不足以稱之爲一個 IDE，下面咱們就來安裝這些插件，使咱們的 IDE 強大起來。此時，咱們須要更新一下 package.json ：

{
  // ... others
  "scripts": {
    "prepare": "yarn run clean && yarn build && yarn run download:plugins",
    "clean": "theia clean",
    "build": "theia build --mode development",
    "start": "theia start --plugins=local-dir:plugins",
    "download:plugins": "theia download:plugins"
  },
  "theiaPluginsDir": "plugins",
  "theiaPlugins": {
    "vscode-builtin-css": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/css-1.39.1-prel.vsix",
    "vscode-builtin-html": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/html-1.39.1-prel.vsix",
    "vscode-builtin-javascript": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/javascript-1.39.1-prel.vsix",
    "vscode-builtin-json": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/json-1.39.1-prel.vsix",
    "vscode-builtin-markdown": "https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-prel/markdown-1.39.1-prel.vsix"
  }
}

咱們更新了 scripts，同時又添加了 theiaPluginsDir 和 theiaPlugins 這兩個屬性。theiaPluginsDir 是用來設置咱們的插件存放地址的，theiaPlugins 就是咱們要安裝的插件了。運行項目以前，咱們要先運行 yarn prepare 來準備環境，咱們會在日誌中看到插件的下載狀況：

這些插件都會放在當前目錄下的 plugins 文件夾下。咱們再來啓動 IDE 看看效果，注意此時 start 帶上了參數，指定了插件的目錄：

能夠看到，藉助於插件，咱們能夠真正的使用這個 IDE 做爲生產工具了。

打包桌面應用

這個相對來講就比較容易了，只有簡單的幾步，咱們能夠直接參考它的 repo：
https://github.com/theia-ide/...

總結

經過上面的例子，咱們已經能夠構建出一個屬於本身的 IDE 了。若是你有本身的服務器，那麼按照上面的步驟搭建一個 Cloud IDE，之後出門就不用揹着電腦啦，一個平板，甚至一臺手機就能夠在線編程。

開源前哨 平常分享熱門、有趣和實用的開源項目。參與維護 10萬+ Star 的開源技術資源庫，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。