爽爆了！我搞了一個(gè)網(wǎng)頁(yè)版 VS Code

VS Code 想必大家都聽(tīng)說(shuō)過(guò)吧，VS Code 憑借其強(qiáng)大的插件生態(tài)簡(jiǎn)直把自己玩出花來(lái)了，現(xiàn)在我身邊越來(lái)越多的程序員朋友現(xiàn)在都轉(zhuǎn)向使用 VS Code 來(lái)寫(xiě)代碼了，我也不例外。

但大家知道 VS Code 本身是用什么寫(xiě)的嗎？沒(méi)錯(cuò)，其實(shí)是 JavaScript 寫(xiě)的，準(zhǔn)確來(lái)說(shuō)是用 TypeScript 寫(xiě)的。

這時(shí)候我就想問(wèn)，既然是用 TypeScript 寫(xiě)的，那它有沒(méi)有網(wǎng)頁(yè)版呢？

有人就要問(wèn)了，網(wǎng)頁(yè)版的 VS Code 有啥用啊，其實(shí)它能解決很多痛點(diǎn)：

• 如果我能在網(wǎng)頁(yè)版的 VS Code 里面寫(xiě)代碼，這樣換了一個(gè) PC 之后我只需要打卡這個(gè)網(wǎng)頁(yè)就能接著寫(xiě)了，多么簡(jiǎn)單方便。

• 另外我寫(xiě)了代碼，想給別人復(fù)現(xiàn)現(xiàn)場(chǎng)看效果，直接甩給他一個(gè)網(wǎng)頁(yè)鏈接就好了。

• 別人遇到問(wèn)題想讓我?guī)驼{(diào)試，那他在里面寫(xiě)完了，然后直接給我鏈接就好了。

舒服吧！

那就來(lái)整一個(gè)吧！

于是我就找官網(wǎng)的支持，但是沒(méi)找到官網(wǎng)有說(shuō) VS Code 網(wǎng)頁(yè)版的任何事情。

但是找到了一個(gè)開(kāi)源項(xiàng)目，叫做 code-server，運(yùn)行之后就可以在瀏覽器里面打卡 VS Code 了，GitHub 地址是：https://github.com/cdr/code-server。

它的官方介紹是：

“

Run VS Code on any machine anywhere and access it in the browser.

”

正是我想要的！它在瀏覽器里面的運(yùn)行效果如圖所示：

安裝

接下來(lái)那就安裝試試吧，它支持多個(gè)平臺(tái)，只需要運(yùn)行一條命令就能安裝了：

curl -fsSL https://code-server.dev/install.sh | sh

這條命令運(yùn)行之后會(huì)自動(dòng)判斷當(dāng)前的平臺(tái)，然后運(yùn)行安裝步驟。

安裝完了之后會(huì)有一個(gè)可用的 code-server 命令，運(yùn)行之后便可以在本地啟動(dòng) code-server 服務(wù)了，然后就可以在瀏覽器中打開(kāi) VS Code 了，就像上圖所示。

Docker

但這 code-server 僅僅是在本地運(yùn)行起來(lái)了。

如果我想將其部署到公網(wǎng)供我隨時(shí)訪問(wèn)呢？或者極端一點(diǎn)，如果我想為其他人也部署一個(gè) code-server 怎么辦呢？或者我想為一百個(gè)人部署自己專屬的 code-server 怎么辦呢？

所以，這時(shí)候一個(gè)很好的方案就是上 Docker + Kubernetes 了。

既然要上 Docker，那就順便對(duì) code-server 做一些基礎(chǔ)化的配置吧，比如預(yù)裝一些插件，比如設(shè)置一些主題，比如設(shè)置一些編輯器配置等等。

我本地的 VS Code 現(xiàn)在在用一個(gè)我個(gè)人覺(jué)得比較好看的主題，叫做 Material Ocean，效果是這樣的：

這是通過(guò)安裝一個(gè)插件實(shí)現(xiàn)的，叫做 Material Theme：

另外還有一些基礎(chǔ)的插件，比如 Python的支持、自動(dòng)提示等等。

另外既然要支持 Python 了，那也可以在 Docker 里面配置一些基礎(chǔ)的 Python 庫(kù)，以免使用的時(shí)候再安裝。

其他的一些配置比如代碼規(guī)范、縮進(jìn)、換行等都可以通過(guò) VS Code 的一些 settings.json 配置來(lái)實(shí)現(xiàn)。

等等還有一些其他的優(yōu)化項(xiàng)可以自行發(fā)揮啦。

基本上就是這么多了，所以接下來(lái)就可以寫(xiě) Dockerfile 了。

這里我直接基于 ubuntu 18.04 來(lái)開(kāi)始搭建了，編寫(xiě)一個(gè) Dockerfile 如下：

FROM ubuntu:18.04

RUN apt-get update && apt-get install -y \
    openssl \
    net-tools \
    git \
    zsh \
    locales \
    sudo \
    dumb-init \
    vim \
    curl \
    wget \
    bash-completion \
    python3 \
    python3-pip \
    python3-setuptools \
    build-essential \
    python3-dev \
    libssl-dev \
    libffi-dev \
    libxml2 \
    libxml2-dev \
    libxslt1-dev \
    zlib1g-dev

RUN chsh -s /bin/bash
ENV SHELL=/bin/bash

RUN ARCH=amd64 && \
    curl -sSL "https://github.com/boxboat/fixuid/releases/download/v0.4.1/fixuid-0.4.1-linux-$ARCH.tar.gz" | tar -C /usr/local/bin -xzf - && \
    chown root:root /usr/local/bin/fixuid && \
    chmod 4755 /usr/local/bin/fixuid && \
    mkdir -p /etc/fixuid && \
    printf "user: coder\ngroup: coder\n" > /etc/fixuid/config.yml

RUN CODE_SERVER_VERSION=3.10.2 && \
    curl -sSOL https://github.com/cdr/code-server/releases/download/v${CODE_SERVER_VERSION}/code-server_${CODE_SERVER_VERSION}_amd64.deb && \
    sudo dpkg -i code-server_${CODE_SERVER_VERSION}_amd64.deb

RUN locale-gen en_US.UTF-8

ENV LC_ALL=en_US.UTF-8

RUN adduser --disabled-password --gecos '' coder && \
    adduser coder sudo && \
    echo '%sudo ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers;

RUN chmod g+rw /home && \
    mkdir -p /home/coder/workspace && \
    mkdir -p /home/coder/.local && \
    chown -R coder:coder /home/coder && \
    chown -R coder:coder /home/coder/.local && \
    chown -R coder:coder /home/coder/workspace;

USER coder

RUN git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf && \
        ~/.fzf/install

ENV PASSWORD=${PASSWORD:-P@ssw0rd}

COPY ./extensions /home/coder/.local/extensions

RUN /usr/bin/code-server --install-extension ms-python.python && \
    /usr/bin/code-server --install-extension esbenp.prettier-vscode && \
    /usr/bin/code-server --install-extension equinusocio.vsc-material-theme && \
    /usr/bin/code-server --install-extension codezombiech.gitignore && \
    /usr/bin/code-server --install-extension piotrpalarz.vscode-gitignore-generator && \
    /usr/bin/code-server --install-extension aeschli.vscode-css-formatter && \
    /usr/bin/code-server --install-extension donjayamanne.githistory && \
    /usr/bin/code-server --install-extension ecmel.vscode-html-css && \
    /usr/bin/code-server --install-extension pkief.material-icon-theme && \
    /usr/bin/code-server --install-extension equinusocio.vsc-material-theme-icons && \
    /usr/bin/code-server --install-extension eg2.vscode-npm-script && \
    /usr/bin/code-server --install-extension ms-ceintl.vscode-language-pack-zh-hans && \
    /usr/bin/code-server --install-extension /home/coder/.local/extensions/tkrkt.linenote-1.2.1.vsix && \
    /usr/bin/code-server --install-extension dbaeumer.vscode-eslint

RUN /usr/bin/python3 -m pip install -U pip setuptools

RUN /usr/bin/python3 -m pip install requests httpx scrapy aiohttp pyquery beautifulsoup4 \
  selenium pyppeteer pylint flask django tornado numpy pandas scipy autopep8

COPY settings.json /home/coder/.local/share/code-server/User/settings.json

RUN sudo chown coder /home/coder/.local/share/code-server/User/settings.json

COPY entrypoint.sh /home/coder/.local/entrypoint.sh

RUN sudo chmod +x /home/coder/.local/entrypoint.sh

WORKDIR /home/coder/workspace

EXPOSE 8080

ENTRYPOINT ["/bin/sh", "/home/coder/.local/entrypoint.sh"]

這里就直接把 Dockerfile 列出來(lái)了，主要分這么幾步：

• 裝一些基本的環(huán)境依賴庫(kù)

• 設(shè)置 shell

• 安裝 code-server

• 設(shè)置工作目錄

• 安裝 code-server 插件

• 安裝 Python 常用的庫(kù)

• 設(shè)置 VS Code 的 settings

• 設(shè)置運(yùn)行目錄

• 設(shè)置運(yùn)行腳本入口

比如 VS Code 插件我就提前裝好了 Material Theme 插件，然后在 settings.json 里面啟用對(duì)應(yīng)的主題即可：

{
  "workbench.colorTheme": "Material Theme",
  "workbench.iconTheme": "material-icon-theme",
  "git.enableSmartCommit": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontSize": 16,
  "editor.suggestSelection": "first",
  "files.autoGuessEncoding": true,
  "files.autoSave": "afterDelay",
  "terminal.integrated.inheritEnv": false,
  "vetur.experimental.templateInterpolationService": true,
  "[typescript]": {
    "editor.tabSize": 2
  },
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[python]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "ms-python.python"
  }
}

這里配置文件主要配置了主題、字體大小、縮進(jìn)等內(nèi)容，當(dāng)然這個(gè)如果你要自己配置的話就按照自己的喜好來(lái)就好了。

最后通過(guò) docker-compose.json 文件配置鏡像信息：

version: "3"
services:
  code-server:
    container_name: "code-server"
    build: .
    image: "germey/code-server"
    ports:
      - "8080:8080"

OK，基本就是這樣，運(yùn)行：

docker-compose build 

就可以成功構(gòu)建一個(gè)鏡像了，然后運(yùn)行：

docker-compose push 

即可把鏡像 push 到我的 Docker Hub 上面，等待部署即可。

Kubernetes 部署

對(duì)于部署 Kubernetes 來(lái)說(shuō)，如果要做到方便部署且靈活管理的話，那就不得不用到 Helm 了，我可以寫(xiě)一個(gè) Helm Chart，定義好一些模板文件和占位符，同時(shí)設(shè)置默認(rèn)的配置選項(xiàng)，這樣我們就可以通過(guò)一條簡(jiǎn)單的命令來(lái)部署這個(gè) Docker 鏡像了。

“

如果你沒(méi)有用過(guò) Helm 的話可以搜索相關(guān)資料了解下。

”

這里 Chart 的具體實(shí)現(xiàn)我就不再贅述了，主要就包括了幾個(gè)部分：

• Deployment

• Service

• Ingress

• PersistentVolumeClaim

• ServiceAccount

• Secret

具體的配置我都放在 GitHub 了：https://github.com/Python3WebSpider/CodeServer/tree/master/chart，需要的話自取即可。

有了 Chart 之后，我只需要一條命令即可部署一個(gè)在線的 VS Code，命令如下：

helm install code-server-<username> . --namespace <namespace> --set user=<username> --set password=<password>

“

注意運(yùn)行目錄在 chart 路徑下才可以。

”

這里我們傳入了 usrname、namespace、password。

這里我配置了解析域名 code-.scrape.center，比如我要配置一個(gè) code-germey.scrape.center，密碼是 1234，那就只需要運(yùn)行該命令即可：

helm install code-server-germey . --namespace scrape --set user=germey --set password=1234

這里用戶名我替換成了 germey，命名空間我用了 scrape，密碼用了 1234。

運(yùn)行這條命令之后，我就能得到一個(gè) https://code-germey.scrape.center/ 網(wǎng)站了。

沒(méi)錯(cuò)，就是一條命令部署一個(gè) VS Code，而且有專屬域名。

打開(kāi)之后效果如下：

輸入對(duì)應(yīng)的密碼之后，就可以進(jìn)入對(duì)應(yīng)的 VS Code 編輯器頁(yè)面了，如圖所示：

這里我可以新建 Python 文件，然后在線運(yùn)行：

另外還可以在命令行下像在 Linux 下一樣操作，比如安裝一個(gè)新的 Python 庫(kù)：

pip3 install pillow

非常方便。

另外插件頁(yè)面也可以看到我安裝的一些插件：

也可以在此繼續(xù)添加想要的插件。

全屏之后活脫脫就是一個(gè)桌面版本的 VS Code！

唯一不是很方便的就是在里面跑一些 Web 服務(wù)，因?yàn)?Web 服務(wù)相當(dāng)于在 Docker 里面運(yùn)行的，不過(guò)不要緊，我們只需要在 Chart 里面增加幾個(gè)端口映射就好了。

有了它，我在里面寫(xiě)了代碼，切換了不同 PC，我不用再關(guān)心代碼的同步問(wèn)題了。另外我就可以一鍵給別人分配一個(gè) Online 版本的 VS Code，別人寫(xiě)了代碼之后也可以方便拿給我看問(wèn)題，也方便直接給別人分享我寫(xiě)的代碼和運(yùn)行效果，簡(jiǎn)直不要太爽了！