VSC - VS Code 运行Web IDE
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
- https://hub.docker.com/r/codercom/code-server
- https://hub.docker.com/r/codercom/code-server/tags
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. (/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
无实际影响，暂不关注。