VSC - VS Code 運行Web IDE

時間 2020-07-23

標籤 vsc code 運行 web ide 欄目 HTML 简体版

原文原文鏈接

1 - Web VS Code

1.1 WebIDE

經過瀏覽器訪問IDE，實現雲端開發環境獲取、代碼編寫、編譯調試、運行預覽、訪問代碼倉庫、命令行執行等能力，同時支持豐富的插件擴展。
可讓開發者擁有一個統1、標準化的開發環境，節省了安裝配置和維護組件的成本，能夠更加專一於開發自己。
WebIDE已經有了一段時間的發展，不一樣的組織和廠商，前後推出了多種工具和產品。css

AWS Cloud9：https://aws.amazon.com/cloud9/
Eclipse Che：http://www.eclipse.org/che/
騰訊扣釘：https://cloudstudio.net/
repl.it：https://repl.it/
GitLab、Gitee等開源代碼託管服務也前後發佈了 WebIDE 功能。
例如，Github 推出了基於 VS Code 的的 Codespaces https://github.com/features/codespaces
Codespaces 集成瀏覽器版 VS Code 編輯器，支持代碼補全、導航、擴展、終端訪問等功能，具有完整的 Visual Studio Code 體驗。

1.2 Visual Studio Codespaces

雲端IDE，可隨處訪問的雲託管的在線開發環境。node

Login： https://online.visualstudio.com/login
Docs： https://docs.microsoft.com/zh-cn/visualstudio/online/

基於 Azure 雲服務器的 Visual Studio Codespaces（曾叫作 Visual Studio Online）是一款基於瀏覽器的完整VS Code編輯器，能夠像本地的IDE同樣添加插件。
https://visualstudio.microsoft.com/zh-hans/services/visual-studio-codespaces/python

適用於任何項目的託管環境
從任何位置進行開發

自託管功能
能夠將任何計算機註冊到 Visual Studio Codespaces 並經過 VS Code 或基於瀏覽器的編輯器鏈接。linux

1.3 Web VS Code

VS Code 1.40 以後，開發者已經能夠直接從 VS Code 的源代碼編譯出 Web 版 VS Code。
更多內容，查看 VS Code 1.40 的發佈說明： https://code.visualstudio.com/updates/v1_40
也能夠經過code-server（基於VSCode的開源項目, https://github.com/cdr/code-server）搭建 Web 版 VS Code。git

2 - Build Web VS Code with official Code

VS Code 1.40 發佈！可自行搭建 Web 版 VS Code！: https://zhuanlan.zhihu.com/p/90360705
更多內容，查看 VS Code 1.40 的發佈說明： https://code.visualstudio.com/updates/v1_40
更多信息，查看貢獻指南： https://github.com/microsoft/vscode/wiki/How-to-Contribute

2.1 Preparation

CentOS7.8github

[root@anliven ~]# uname -a
Linux anliven 3.10.0-1127.el7.x86_64 #1 SMP Tue Mar 31 23:36:51 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
[root@anliven ~]#
[root@anliven ~]# cat /etc/system-release
CentOS Linux release 7.8.2003 (Core)
[root@anliven ~]#
[root@anliven ~]# git --version
git version 2.27.0
[root@anliven ~]#
[root@anliven ~]# python --version
Python 2.7.5
[root@anliven ~]#

安裝依賴web

yum install -y make  # make
pkg-config --version  # pkg-config
yum groupinstall -y "Development Tools"  # GCC or another compile toolchain：
yum install -y libX11-devel.x86_64 libxkbfile-devel.x86_64  # native-keymap
yum install -y libsecret-devel  # keytar

Linux - CentOS： https://classic.yarnpkg.com/en/docs/install#centos-stable
先安裝Node.js和npmdocker

curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs
node --version
npm --version

再安裝yarnnpm

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
yum install -y yarn
yarn --version

2.2 Download Code

爲了更好的穩定運行，選取release版本的代碼下載，而不是下載最新的代碼。
https://github.com/microsoft/vscode/releases
經過wget命令下載zip包，而後解壓json

wget https://github.com/microsoft/vscode/archive/1.45.1.zip
unzip 1.45.1.zip

或者，經過git clone命令下載

git clone --depth 1 --branch 1.45.1 https://github.com/microsoft/vscode.git

- 參數「--depth 1」  表示最近一次 commit 的代碼
- 參數「--branch 1.45.1」  表示tag 1.45.1

查看內容（zip）

[root@anliven temptest]# du -h vscode-1.45.1/ |tail -1
66M     vscode-1.45.1/
[root@anliven temptest]#
[root@anliven temptest]# cd vscode-1.45.1/
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# ls -la
total 712
drwxr-xr-x 11 root root   4096 May 14 03:59 .
drwxr-xr-x  4 root root     59 Jun 10 22:12 ..
-rw-r--r--  1 root root    391 May 14 03:59 azure-pipelines.yml
drwxr-xr-x  8 root root   4096 May 14 03:59 build
-rw-r--r--  1 root root  10526 May 14 03:59 cglicenses.json
-rw-r--r--  1 root root  23508 May 14 03:59 cgmanifest.json
-rw-r--r--  1 root root   5508 May 14 03:59 CONTRIBUTING.md
-rw-r--r--  1 root root    365 May 14 03:59 .editorconfig
-rw-r--r--  1 root root    374 May 14 03:59 .eslintignore
-rw-r--r--  1 root root  31211 May 14 03:59 .eslintrc.json
drwxr-xr-x 82 root root   4096 May 14 03:59 extensions
-rw-r--r--  1 root root    132 May 14 03:59 .gitattributes
drwxr-xr-x  5 root root    217 May 14 03:59 .github
-rw-r--r--  1 root root    512 May 14 03:59 .gitignore
-rw-r--r--  1 root root   1903 May 14 03:59 gulpfile.js
-rw-r--r--  1 root root   1133 May 14 03:59 LICENSE.txt
-rw-r--r--  1 root root    135 May 14 03:59 .mailmap
-rw-r--r--  1 root root    153 May 14 03:59 .mention-bot
-rw-r--r--  1 root root      3 May 14 03:59 .nvmrc
-rw-r--r--  1 root root   6165 May 14 03:59 package.json
-rw-r--r--  1 root root     78 May 14 03:59 .prettierrc.json
-rw-r--r--  1 root root   3648 May 14 03:59 product.json
-rw-r--r--  1 root root   5597 May 14 03:59 README.md
drwxr-xr-x  3 root root     69 May 14 03:59 remote
drwxr-xr-x  6 root root     65 May 14 03:59 resources
drwxr-xr-x  2 root root   4096 May 14 03:59 scripts
drwxr-xr-x  4 root root    267 May 14 03:59 src
drwxr-xr-x  7 root root    136 May 14 03:59 test
-rw-r--r--  1 root root 151733 May 14 03:59 ThirdPartyNotices.txt
-rw-r--r--  1 root root    684 May 14 03:59 tsfmt.json
drwxr-xr-x  3 root root    191 May 14 03:59 .vscode
-rw-r--r--  1 root root 404463 May 14 03:59 yarn.lock
-rw-r--r--  1 root root     78 May 14 03:59 .yarnrc
[root@anliven vscode-1.45.1]#

2.3 Dependencies
在代碼根目錄下，執行 yarn 命令安裝依賴，用時較久，耐心等待

[root@anliven temptest]# cd vscode-1.45.1/
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# yarn
yarn install v1.22.4
$ node build/npm/preinstall.js
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.1: The platform "linux" is incompatible with this module.
info "fsevents@2.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
......
......
......
Done in 1378.21s.
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# ls -la
total 756
drwxr-xr-x  12 root root   4096 Jun 10 22:31 .
drwxr-xr-x   4 root root     59 Jun 10 22:12 ..
-rw-r--r--   1 root root    391 May 14 03:59 azure-pipelines.yml
drwxr-xr-x   9 root root   4096 Jun 10 23:35 build
-rw-r--r--   1 root root  10526 May 14 03:59 cglicenses.json
-rw-r--r--   1 root root  23508 May 14 03:59 cgmanifest.json
-rw-r--r--   1 root root   5508 May 14 03:59 CONTRIBUTING.md
-rw-r--r--   1 root root    365 May 14 03:59 .editorconfig
-rw-r--r--   1 root root    374 May 14 03:59 .eslintignore
-rw-r--r--   1 root root  31211 May 14 03:59 .eslintrc.json
drwxr-xr-x  83 root root   4096 Jun 10 23:34 extensions
-rw-r--r--   1 root root    132 May 14 03:59 .gitattributes
drwxr-xr-x   5 root root    217 May 14 03:59 .github
-rw-r--r--   1 root root    512 May 14 03:59 .gitignore
-rw-r--r--   1 root root   1903 May 14 03:59 gulpfile.js
-rw-r--r--   1 root root   1133 May 14 03:59 LICENSE.txt
-rw-r--r--   1 root root    135 May 14 03:59 .mailmap
-rw-r--r--   1 root root    153 May 14 03:59 .mention-bot
drwxr-xr-x 972 root root  28672 Jun 10 23:34 node_modules
-rw-r--r--   1 root root      3 May 14 03:59 .nvmrc
-rw-r--r--   1 root root   6165 May 14 03:59 package.json
-rw-r--r--   1 root root     78 May 14 03:59 .prettierrc.json
-rw-r--r--   1 root root   3648 May 14 03:59 product.json
-rw-r--r--   1 root root   5597 May 14 03:59 README.md
drwxr-xr-x   4 root root     89 Jun 10 23:34 remote
drwxr-xr-x   6 root root     65 May 14 03:59 resources
drwxr-xr-x   2 root root   4096 May 14 03:59 scripts
drwxr-xr-x   4 root root    267 May 14 03:59 src
drwxr-xr-x   7 root root    136 May 14 03:59 test
-rw-r--r--   1 root root 151733 May 14 03:59 ThirdPartyNotices.txt
-rw-r--r--   1 root root    684 May 14 03:59 tsfmt.json
drwxr-xr-x   3 root root    191 May 14 03:59 .vscode
-rw-r--r--   1 root root 404463 May 14 03:59 yarn.lock
-rw-r--r--   1 root root     78 May 14 03:59 .yarnrc
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# cd ..
[root@anliven temptest]# du -h vscode-1.45.1/ |tail -1
1.6G    vscode-1.45.1/
[root@anliven temptest]#

2.4 Run Web VS Code

執行 yarn watch 命令 (watch是在package.json文件中scripts屬性指定的命令)

[root@anliven vscode-1.45.1]# grep \"watch\" package.json
    "watch": "gulp watch --max_old_space_size=4095",
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# yarn watch
yarn run v1.22.4
$ gulp watch --max_old_space_size=4095
[00:25:56] Node flags detected: --max_old_space_size=4095
[00:25:56] Respawned to PID: 7325
[00:26:03] Using gulpfile ~/temptest/vscode-1.45.1/gulpfile.js
[00:26:03] Starting 'watch'...
[00:26:03] Starting clean-out ...
[00:26:03] Starting clean-extension-configuration-editing ...
[00:26:03] Starting clean-extension-css-language-features-client ...
[00:26:03] Starting clean-extension-css-language-features-server ...
......
......
......
[00:26:03] Finished clean-out after 27 ms
[00:26:03] Starting watch-client ...
[00:26:09] Starting compilation...
[00:26:09] Finished clean-extension-configuration-editing after 6125 ms
[00:26:09] Starting watch-extension:configuration-editing ...
[00:26:09] Finished clean-extension-css-language-features-client after 6159 ms
[00:26:09] Starting watch-extension:css-language-features-client ...
[00:26:09] Finished clean-extension-css-language-features-server after 6175 ms
[00:26:09] Starting watch-extension:css-language-features-server ...
......
......
......
[00:30:55] Finished compilation with 0 errors after 286169 ms
^C
[root@anliven vscode-1.45.1]#

2.3 Dependencies

在代碼根目錄下，執行 yarn 命令安裝依賴，用時較久，耐心等待

[root@anliven temptest]# cd vscode-1.45.1/
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# yarn
yarn install v1.22.4
$ node build/npm/preinstall.js
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.1: The platform "linux" is incompatible with this module.
info "fsevents@2.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
......
......
......
Done in 1378.21s.
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# ls -la
total 756
drwxr-xr-x  12 root root   4096 Jun 10 22:31 .
drwxr-xr-x   4 root root     59 Jun 10 22:12 ..
-rw-r--r--   1 root root    391 May 14 03:59 azure-pipelines.yml
drwxr-xr-x   9 root root   4096 Jun 10 23:35 build
-rw-r--r--   1 root root  10526 May 14 03:59 cglicenses.json
-rw-r--r--   1 root root  23508 May 14 03:59 cgmanifest.json
-rw-r--r--   1 root root   5508 May 14 03:59 CONTRIBUTING.md
-rw-r--r--   1 root root    365 May 14 03:59 .editorconfig
-rw-r--r--   1 root root    374 May 14 03:59 .eslintignore
-rw-r--r--   1 root root  31211 May 14 03:59 .eslintrc.json
drwxr-xr-x  83 root root   4096 Jun 10 23:34 extensions
-rw-r--r--   1 root root    132 May 14 03:59 .gitattributes
drwxr-xr-x   5 root root    217 May 14 03:59 .github
-rw-r--r--   1 root root    512 May 14 03:59 .gitignore
-rw-r--r--   1 root root   1903 May 14 03:59 gulpfile.js
-rw-r--r--   1 root root   1133 May 14 03:59 LICENSE.txt
-rw-r--r--   1 root root    135 May 14 03:59 .mailmap
-rw-r--r--   1 root root    153 May 14 03:59 .mention-bot
drwxr-xr-x 972 root root  28672 Jun 10 23:34 node_modules
-rw-r--r--   1 root root      3 May 14 03:59 .nvmrc
-rw-r--r--   1 root root   6165 May 14 03:59 package.json
-rw-r--r--   1 root root     78 May 14 03:59 .prettierrc.json
-rw-r--r--   1 root root   3648 May 14 03:59 product.json
-rw-r--r--   1 root root   5597 May 14 03:59 README.md
drwxr-xr-x   4 root root     89 Jun 10 23:34 remote
drwxr-xr-x   6 root root     65 May 14 03:59 resources
drwxr-xr-x   2 root root   4096 May 14 03:59 scripts
drwxr-xr-x   4 root root    267 May 14 03:59 src
drwxr-xr-x   7 root root    136 May 14 03:59 test
-rw-r--r--   1 root root 151733 May 14 03:59 ThirdPartyNotices.txt
-rw-r--r--   1 root root    684 May 14 03:59 tsfmt.json
drwxr-xr-x   3 root root    191 May 14 03:59 .vscode
-rw-r--r--   1 root root 404463 May 14 03:59 yarn.lock
-rw-r--r--   1 root root     78 May 14 03:59 .yarnrc
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# cd ..
[root@anliven temptest]# du -h vscode-1.45.1/ |tail -1
1.6G    vscode-1.45.1/
[root@anliven temptest]#

2.4 Run Web VS Code

執行 yarn watch 命令 (watch是在package.json文件中scripts屬性指定的命令)

[root@anliven vscode-1.45.1]# grep \"watch\" package.json
    "watch": "gulp watch --max_old_space_size=4095",
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# yarn watch
yarn run v1.22.4
$ gulp watch --max_old_space_size=4095
[00:25:56] Node flags detected: --max_old_space_size=4095
[00:25:56] Respawned to PID: 7325
[00:26:03] Using gulpfile ~/temptest/vscode-1.45.1/gulpfile.js
[00:26:03] Starting 'watch'...
[00:26:03] Starting clean-out ...
[00:26:03] Starting clean-extension-configuration-editing ...
[00:26:03] Starting clean-extension-css-language-features-client ...
[00:26:03] Starting clean-extension-css-language-features-server ...
......
......
......
[00:26:03] Finished clean-out after 27 ms
[00:26:03] Starting watch-client ...
[00:26:09] Starting compilation...
[00:26:09] Finished clean-extension-configuration-editing after 6125 ms
[00:26:09] Starting watch-extension:configuration-editing ...
[00:26:09] Finished clean-extension-css-language-features-client after 6159 ms
[00:26:09] Starting watch-extension:css-language-features-client ...
[00:26:09] Finished clean-extension-css-language-features-server after 6175 ms
[00:26:09] Starting watch-extension:css-language-features-server ...
......
......
......
[00:30:55] Finished compilation with 0 errors after 286169 ms
^C
[root@anliven vscode-1.45.1]#

在執行 yarn watch 命令以後，執行 yarn web 命令構建 Web 版本的VS code

[root@anliven vscode-1.45.1]# grep \"web\" package.json
    "web": "node scripts/code-web.js",
[root@anliven vscode-1.45.1]#
[root@anliven vscode-1.45.1]# yarn web
yarn run v1.22.4
$ node scripts/code-web.js
Web UI available at   http://localhost:8080

在本機瀏覽器中訪問 http://localhost:8080/ 就可能打開web版本的VS Code

執行 yarn web 命令時，能夠指定Host和Port
例如：

[root@anliven vscode-1.45.1]# yarn web --host 192.168.56.200 --port 8080
yarn run v1.22.4
$ node scripts/code-web.js --host 192.168.56.200 --port 8080
Web UI available at   http://192.168.56.200:8080

注意：非本機訪問，須要開啓防火牆規則或者關閉防火牆

# 開啓防火牆端口
firewall-cmd --zone=public --permanent --add-port=8080/tcp
firewall-cmd --reload

# 關閉並禁止開機啓動防火牆
systemctl stop firewalld
systemctl disable firewalld

3 - Run Web VS Code with code-server

https://github.com/cdr/code-server
code-server 是 Coder公司（ https://coder.com/ ）基於VSCode的開源項目，能夠實現經過瀏覽器訪問在遠程服務器上的VS Code 。
簡單地說，是基於 VSCode 進行了一些修改，專門爲瀏覽器設計優化，以便做爲可託管的 Web 服務來運行。
換而言之，配置服務器端（code-server）後，就能夠在任何瀏覽器上訪問和使用 VS Code。
此外，Coder還提供了sshcode工具（Run VS Code on any server over SSH.） https://github.com/cdr/sshcode

Documentation

general overview：https://github.com/cdr/code-server/blob/master/README.md
installation：https://github.com/cdr/code-server/blob/master/doc/install.md
Setup Guide：https://github.com/cdr/code-server/blob/master/doc/guide.md
FAQ：https://github.com/cdr/code-server/blob/master/doc/FAQ.md

3.1 Preparation

[root@anliven ~]# uname -a
Linux anliven 3.10.0-1127.el7.x86_64 #1 SMP Tue Mar 31 23:36:51 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
[root@anliven ~]#
[root@anliven ~]# cat /etc/system-release
CentOS Linux release 7.8.2003 (Core)
[root@anliven ~]#

3.2 Download Code

下載: https://github.com/cdr/code-server/releases
針對不一樣系統，有多種安裝方式

選取Standalone Releases，下載code-server-3.4.1-linux-x86_64.tar.gz

wget https://github.com/cdr/code-server/releases/download/3.4.1/code-server-3.4.1-linux-x86_64.tar.gz
tar -xzvf code-server-3.4.1-linux-x86_64.tar.gz

查看內容

[root@anliven code-server]# ls -la
total 72392
drwxr-xr-x 8 root root      237 Jun  4 06:46 code-server-3.4.1-linux-x86_64
-rw-r--r-- 1 root root 74127238 Jun  4 12:38 code-server-3.4.1-linux-x86_64.tar.gz
[root@anliven code-server]# 
[root@anliven code-server]# du -h code-server-3.4.1-linux-x86_64/ |tail -1
252M    code-server-3.4.1-linux-x86_64/
[root@anliven code-server]#
[root@anliven code-server]# ls -la code-server-3.4.1-linux-x86_64
total 504
drwxr-xr-x  8 root root    237 Jun  4 06:46 .
drwxr-xr-x  3 root root     89 Jun 11 21:55 ..
drwxr-xr-x  2 root root     25 Jun  4 06:46 bin
lrwxrwxrwx  1 root root     17 Jun  4 06:46 code-server -> ./bin/code-server
drwxr-xr-x  3 root root    113 Jun  4 06:32 dist
drwxr-xr-x  3 root root     32 Jun  4 06:46 lib
-rw-r--r--  1 1001  116   1084 Jun  4 06:24 LICENSE.txt
lrwxrwxrwx  1 root root     10 Jun  4 06:46 node -> ./lib/node
drwxr-xr-x 56 root root   4096 Jun  4 06:46 node_modules
drwxr-xr-x  5 root root     47 Jun  4 06:32 out
-rw-r--r--  1 root root   2953 Jun  4 06:39 package.json
-rwxr-xr-x  1 1001  116   1335 Jun  4 06:24 postinstall.sh
-rw-r--r--  1 1001  116   1924 Jun  4 06:24 README.md
drwxr-xr-x  3 root root     21 Jun  4 06:39 src
-rw-r--r--  1 root root 151733 Jun  4 06:30 ThirdPartyNotices.txt
-rw-r--r--  1 1001  116 335925 Jun  4 06:24 yarn.lock
[root@anliven code-server]#

3.3 Start in CMD

code-server 命令

[root@anliven code-server-3.4.1-linux-x86_64]# cd bin/
[root@anliven bin]# 
[root@anliven bin]# ./code-server --help
info  Using config file ~/.config/code-server/config.yaml
code-server 3.4.1 48f7c2724827e526eeaa6c2c151c520f48a61259

Usage: code-server [options] [path]

Options
      --auth                The type of authentication to use. [password, none]
      --password            The password for password authentication (can only be passed in via $PASSWORD or the config file).
      --cert                Path to certificate. Generated if no path is provided.
      --cert-key            Path to certificate key when using non-generated cert.
      --disable-telemetry   Disable telemetry.
   -h --help                Show this output.
      --open                Open in browser on startup. Does not work remotely.
      --bind-addr           Address to bind to in host:port. You can also use $PORT to override the port.
      --config              Path to yaml config file. Every flag maps directly to a key in the config file.
      --socket              Path to a socket (bind-addr will be ignored).
   -v --version             Display version information.
      --user-data-dir       Path to the user data directory.
      --extensions-dir      Path to the extensions directory.
      --list-extensions     List installed VS Code extensions.
      --force               Avoid prompts when installing VS Code extensions.
      --install-extension   Install or update a VS Code extension by id or vsix.
      --uninstall-extension Uninstall a VS Code extension by id.
      --show-versions       Show VS Code extension versions.
      --proxy-domain        Domain used for proxying ports.
 -vvv --verbose             Enable verbose logging.
[root@anliven bin]#
[root@anliven bin]# ./code-server --version
info  Using config file ~/.config/code-server/config.yaml
3.4.1 48f7c2724827e526eeaa6c2c151c520f48a61259
[root@anliven bin]#

經過code-server命令啓動後，將輸出服務器啓動的日誌信息，其中包含配置文件、數據目錄、監聽地址和端口等

[root@anliven code-server-3.4.1-linux-x86_64]# ./code-server
***** Please use the script in bin/code-server instead!
***** This script will soon be removed!
***** See the release notes at https://github.com/cdr/code-server/releases/tag/v3.4.0
info  Using config file ~/.config/code-server/config.yaml
info  Using user-data-dir ~/.local/share/code-server
info  code-server 3.4.1 48f7c2724827e526eeaa6c2c151c520f48a61259
info  HTTP server listening on http://127.0.0.1:8080
info      - Using password from ~/.config/code-server/config.yaml
info      - To disable use `--auth none`
info    - Not serving HTTPS

TIPS：能夠在Web VS Code 啓動時指定工做區，命令格式爲「./code-server 」

config file ~/.config/code-server/config.yaml 啓動後建立
user-data-dir ~/.local/share/code-server 啓動後建立
HTTP server listening on http://127.0.0.1:8080
Using password from ~/.config/code-server/config.yaml

在瀏覽器中訪問

根據提示獲取密碼

[root@anliven ~]# cat  ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: 26e679d7d949e17f8a2aac57
cert: false
[root@anliven ~]#

成功登錄後，將顯示Web code的頁面

3.4 Configuration

能夠在config.yaml文件中更改訪問地址和密碼等配置信息，從新啓動後生效

[root@anliven code-server-3.4.1-linux-x86_64]# vim ~/.config/code-server/config.yaml
[root@anliven code-server-3.4.1-linux-x86_64]# cat ~/.config/code-server/config.yaml
bind-addr: 192.168.56.200:8080
auth: password
password: mycodeserver
cert: false
[root@anliven code-server-3.4.1-linux-x86_64]#
[root@anliven code-server-3.4.1-linux-x86_64]# ./code-server
***** Please use the script in bin/code-server instead!
***** This script will soon be removed!
***** See the release notes at https://github.com/cdr/code-server/releases/tag/v3.4.0
info  Using config file ~/.config/code-server/config.yaml
info  Using user-data-dir ~/.local/share/code-server
info  code-server 3.4.1 48f7c2724827e526eeaa6c2c151c520f48a61259
info  HTTP server listening on http://192.168.56.200:8080
info      - Using password from ~/.config/code-server/config.yaml
info      - To disable use `--auth none`
info    - Not serving HTTPS

使用新的配置信息，從新登錄

4 - Run code-server in Docker

從DockerHub獲取code-server的images

Docker命令

docker run -dit -p 192.168.56.200:8080:8080 \
  --restart=always \
  --name codeserver \
  -h vscode \
  -u root \
  -v /tmp/coder-data:/home \
  -v /tmp/coder-config:/root \
  -v /etc/localtime:/etc/localtime:ro \
  -e PASSWORD=mycodeserver \
  codercom/code-server:3.4.1

注意：-e PASSWORD=mycodeserver 設置密碼爲mycodeserver

[root@anliven ~]# docker pull codercom/code-server:3.4.1
3.4.1: Pulling from codercom/code-server
376057ac6fa1: Pull complete
e9328b5d4ce4: Pull complete
b235a90e52e2: Pull complete
050b6dc28509: Pull complete
e1d3f4aae495: Pull complete
13719612fc66: Pull complete
44f1c3cd316e: Pull complete
10e54f3cdd62: Pull complete
Digest: sha256:da8fe9ad6f6528b17e8d2fb927504e60d1e69527da165f69ffdf86f9d90b4c09
Status: Downloaded newer image for codercom/code-server:3.4.1
docker.io/codercom/code-server:3.4.1
[root@anliven ~]#
[root@anliven ~]# docker images codercom/code-server
REPOSITORY             TAG                 IMAGE ID            CREATED             SIZE
codercom/code-server   3.4.1               ece4f1a1e6ae        6 days ago          883MB
[root@anliven ~]#
[root@anliven coder-server]#
[root@anliven coder-server]# docker run -dit -p 192.168.56.200:8080:8080 \
>   --restart=always \
>   --name codeserver \
>   -h vscode \
>   -u root \
>   -v /tmp/coder-data:/home \
>   -v /tmp/coder-config:/root \
>   -v /etc/localtime:/etc/localtime:ro \
>   -e PASSWORD=mycodeserver \
>   codercom/code-server:3.4.1
5d7f430d13f5da90bf913d5c7471d4217dbff42ccfa8254f7fde5b121b86a6d4
[root@anliven coder-server]#
[root@anliven coder-server]# docker ps
CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS              PORTS                           NAMES
5d7f430d13f5        codercom/code-server:3.4.1   "dumb-init fixuid -q…"   37 seconds ago      Up 36 seconds       192.168.56.200:8080->8080/tcp   codeserver
[root@anliven coder-server]#

在瀏覽器訪問 http://192.168.56.200:8080

輸入 docker run 命令中設置的密碼，打開Web版VS code

根據需求進行設置和安裝擴展，就可使用了。

5 - Comparison

在實際使用中，體驗感與本地版VS Code的幾乎相同，只是在某些方面有細微的差異。
例如：

Web VS Code的頁面沒有最小化、最大化、關閉的按鈕
將菜單欄移到了左上角，並將功能列表摺疊在一個標籤中
在Docker環境中，從終端的顯示信息，能夠看出 Web VS Code 運行在容器中

6 - Troubleshooting

01 Error: Cannot find module 'gulp-bom'

Description

[root@anliven vscode]# yarn watch
yarn run v1.22.4
$ gulp watch --max_old_space_size=4095
[00:06:49] Node flags detected: --max_old_space_size=4095
[00:06:49] Respawned to PID: 5769
{ Error: Cannot find module 'gulp-bom'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/root/tempfiles/vscode/build/lib/compilation.js:11:13)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[root@anliven vscode]#
[root@anliven vscode]# grep "gulp-bom" package.json
[root@anliven vscode]#

Solution
yarn add gulp-bom
Verify

[root@anliven vscode]# grep "gulp-bom" package.json
    "gulp-bom": "^3.0.0",
[root@anliven vscode]#

02 error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory

Description

.build/electron/code-oss: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
Solution
yum install libXScrnSaver

03 Unable to open 'sample-folder'

Description

Unable to open 'sample-folder': Unable to resolve resource memfs:/sample-folder.
Solution
在yarn web命令時，指定host和port，而後訪問指定的host和port的地址。

04 failed: NetworkError when attempting to fetch resource.

Description

Activating extension 'vscode.github-authentication' failed: NetworkError when attempting to fetch resource..
Activating extension 'vscode.vscode-web-playground' failed: NetworkError when attempting to fetch resource..

Solution
截止2020-06-10，當前 Web 版本的 VS Code 仍是主要用於測試目的，插件功能沒有適配。

05 command 'markdown.showPreviewToSide' not found

Description

command 'markdown.showPreviewToSide' not found
Solution
截止2020-06-10，當前 Web 版本的 VS Code 仍是主要用於測試目的，插件功能沒有適配。

06 code-server is being accessed over an insecure domain

Description

code-server is being accessed over an insecure domain. Web views, the clipboard, and other functionality will not work as expected.

Solution 無實際影響，暫不關注。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。