1.3 萬(wàn) Star！網(wǎng)友說(shuō)要干掉 VS Code 的新工具
【導(dǎo)語(yǔ)】：也許大家最近在不少地方看到了一篇《Eclipse 官宣，干掉 VS Code》的文章。
其實(shí)這又是在炒 2020 年 3 月的一則冷飯。Eclipse 基金會(huì)官方就沒(méi)說(shuō)“干掉 VS Code”，說(shuō)的是“VS Code 的一個(gè)真正開(kāi)源替代品（a True Open Source Alternative to Visual Studio Code）”。圖片
本文就帶大家認(rèn)識(shí)一下這個(gè) VS Code 的替代品：Eclipse Theia。
Theia 是一個(gè)基于 TS 開(kāi)發(fā)的開(kāi)源 IDE 框架，基于它我們可以開(kāi)發(fā)出自己定制化的開(kāi)發(fā)工具，它可以部署到云端使用，也可以打包成桌面應(yīng)用。
Theia 是什么？
Eclipse Theia 不是一個(gè) IDE，而是一個(gè)用來(lái)開(kāi)發(fā) IDE 的框架。 它是一個(gè)可擴(kuò)展的平臺(tái)，基于現(xiàn)代 Web 技術(shù)（TypeScript、CSS 和 HTML）實(shí)現(xiàn)，是用于開(kāi)發(fā)成熟的、多語(yǔ)言的云計(jì)算和桌面類(lèi)的理想產(chǎn)品。
在 docker 中運(yùn)行
使用 docker 來(lái)啟動(dòng)一個(gè)基于 Theia 的 IDE 是最簡(jiǎn)單的了，你只需要確保你當(dāng)前的系統(tǒng)中安裝了 docker 即可。我們可以直接使用它提供的鏡像 theiaide/theia 來(lái)啟動(dòng)：
- # 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
執(zhí)行上面的命令后，會(huì)自動(dòng)的去拉取 theiaide/theia:next 的鏡像并且在 http://localhost:3000 啟動(dòng) Theia IDE，它會(huì)使用你當(dāng)前目錄作為工作目錄。其中，--init 參數(shù)是用來(lái)避免死進(jìn)程問(wèn)題的。
假設(shè)此刻的目錄為：/Users/jerry/workspace/testbox，在該目錄下執(zhí)行上面的命令，我們來(lái)看看結(jié)果：
docker run theia image
通過(guò)日志我們可以看出，Theia IDE 已經(jīng)成功啟動(dòng)并且監(jiān)聽(tīng) 3000 端口了，我們打開(kāi)瀏覽器看一下它的廬山真面目：
result of docker run theia image
有沒(méi)有很親切的感覺(jué)？
哈哈，是的，它跟 VS Code 幾乎長(zhǎng)得一模一樣，不僅如此，它同樣支持 VS Code 中的插件，所以你可以在 Theia 中盡情的“享用” VS Code 的插件市場(chǎng)。
我們先來(lái)跑一個(gè) helloworld 感受一下這個(gè) IDE 的能力：
usage of docker run theia image
構(gòu)建自己的 IDE
如果你不想使用 docker，你完全可以自己構(gòu)建一個(gè) Theia IDE。接下來(lái)我們就基于 Theia，在本地跑起來(lái)屬于我們自己的 IDE。
1. 環(huán)境要求
- Node.js 版本 >= 12.14.1 且 < 13
- Yarn 版本 >= 1.7.0
2. 創(chuàng)建項(xiàng)目
- mkdir my-theia
- cd my-theia
接著創(chuàng)建 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"
- }
- }
通過(guò) package.json 我們看到，其實(shí) Theia 也是個(gè) Node 的包。dependencies 中有很多依賴，大致可以推測(cè)出，Theia 的功能是由這些包組合起來(lái)的，比如@theia/search-in-workspace 負(fù)責(zé)搜索模塊，@theia/terminal 負(fù)責(zé)終端模塊等；另外，@theia/cli 作為 devDependencies，我們會(huì)在構(gòu)建與運(yùn)行時(shí)用到它的一些命令。
3. 安裝依賴
- yarn
如果下載依賴緩慢，建議切換鏡像源地址。安裝成功的結(jié)果應(yīng)該如下：
install theia deps
- 構(gòu)建項(xiàng)目
- yarn theia build
這個(gè)命令主要是用來(lái)生成項(xiàng)目代碼的，包含源碼，webpack 配置文件以及 webpack 打包后的文件。運(yùn)行成功的結(jié)果如下：
theia build
- 運(yùn)行 Theia IDE
直接運(yùn)行
- yarn theia start
就能看到我們的 IDE 跑在了 3000 端口：
theia start
我們打開(kāi) http://localhost:3000 看看：
usage of local run theia image
也是與 VSCode 近乎一致的體驗(yàn)。
- 封裝 npm scripts
在 package.json 中添加：
- {
- // ..... others
- "scripts": {
- "start": "theia start",
- "build": "theia build"
- }
- }
以后我們就可以直接用 yarn xxx 的方式來(lái)執(zhí)行了。至此，我們本地已經(jīng)成功構(gòu)建了一個(gè) IDE ～
- （進(jìn)階）安裝插件
其實(shí)上一步我們已經(jīng)有了一個(gè) IDE 了，但是作為開(kāi)發(fā)工具來(lái)說(shuō)，那可能還差點(diǎn)意思。究竟差點(diǎn)什么呢？我們來(lái)寫(xiě)一些代碼就知道了：
theia without plugins
是的，一目了然的結(jié)果，沒(méi)有高亮，并且編碼的過(guò)程中什么提示也沒(méi)有，也就是相當(dāng)于一個(gè)長(zhǎng)得好看的記事本了。這完全不足以稱之為一個(gè) IDE，下面我們就來(lái)安裝這些插件，使我們的 IDE 強(qiáng)大起來(lái)。此時(shí)，我們需要更新一下 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，同時(shí)又添加了 theiaPluginsDir 和 theiaPlugins 這兩個(gè)屬性。theiaPluginsDir 是用來(lái)設(shè)置我們的插件存放地址的，theiaPlugins 就是我們要安裝的插件了。運(yùn)行項(xiàng)目之前，我們要先運(yùn)行 yarn prepare 來(lái)準(zhǔn)備環(huán)境，我們會(huì)在日志中看到插件的下載情況：
download plugins
這些插件都會(huì)放在當(dāng)前目錄下的 plugins 文件夾下。我們?cè)賮?lái)啟動(dòng) IDE 看看效果，注意此時(shí) start 帶上了參數(shù)，指定了插件的目錄：
theia with plugins
可以看到，借助于插件，我們可以真正的使用這個(gè) IDE 作為生產(chǎn)工具了。
打包桌面應(yīng)用
這個(gè)相對(duì)來(lái)說(shuō)就比較容易了，只有簡(jiǎn)單的幾步，我們可以直接參考它的 repo：https://github.com/theia-ide/yangster-electron
總結(jié)
通過(guò)上面的例子，我們已經(jīng)可以構(gòu)建出一個(gè)屬于自己的 IDE 了。如果你有自己的服務(wù)器，那么按照上面的步驟搭建一個(gè) Cloud IDE，以后出門(mén)就不用背著電腦啦，一個(gè)平板，甚至一臺(tái)手機(jī)就可以在線編程。
