1 - Web VS Code
1.1 WebIDE
通過瀏覽器訪問IDE，實現雲端開發環境獲取、代碼編寫、編譯調試、運行預覽、訪問代碼倉庫、命令行執行等能力，同時支持豐富的插件擴展。
可以讓開發者擁有一個統一、標准化的開發環境，節省了安裝配置和維護組件的成本，可以更加專注於開發本身。
WebIDE已經有了一段時間的發展，不同的組織和廠商，先后推出了多種工具和產品。
- 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，可隨處訪問的雲托管的在線開發環境。
- 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/
- 適用於任何項目的托管環境
- 從任何位置進行開發
自托管功能
可以將任何計算機注冊到 Visual Studio Codespaces 並通過 VS Code 或基於瀏覽器的編輯器連接。
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。
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.8
[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 ~]#
安裝依賴
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和npm
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs
node --version
npm --version
再安裝yarn
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包，然后解壓
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
無實際影響，暫不關注。