VSC - VS Code 运行Web IDE

1 - Web VS Code

1.1 WebIDE

通过浏览器访问IDE,实现云端开发环境获取、代码编写、编译调试、运行预览、访问代码仓库、命令行执行等能力,同时支持丰富的插件扩展。
可以让开发者拥有一个统一、标准化的开发环境,节省了安装配置和维护组件的成本,可以更加专注于开发本身。
WebIDE已经有了一段时间的发展,不同的组织和厂商,先后推出了多种工具和产品。

1.2 Visual Studio Codespaces

云端IDE,可随处访问的云托管的在线开发环境。

基于 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

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
VSC - VS Code 运行Web IDE
执行 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

VSC - VS Code 运行Web IDE
注意:非本机访问,需要开启防火墙规则 或者 关闭防火墙

# 开启防火墙端口
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

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
针对不同系统,有多种安装方式
VSC - VS Code 运行Web IDE
选取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

在浏览器中访问
VSC - VS Code 运行Web IDE
根据提示获取密码

[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的页面
VSC - VS Code 运行Web IDE

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

使用新的配置信息,重新登陆
VSC - VS Code 运行Web IDE

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
VSC - VS Code 运行Web IDE
输入 docker run 命令中设置的密码,打开Web版VS code
VSC - VS Code 运行Web IDE
根据需求进行设置和安装扩展,就可以使用了。
VSC - VS Code 运行Web IDE

5 - Comparison

在实际使用中,体验感与本地版VS Code的几乎相同,只是在某些方面有细微的差别。
例如:

  • Web VS Code的页面没有最小化、最大化、关闭的按钮
  • 将菜单栏移到了左上角,并将功能列表折叠在一个标签中
    VSC - VS Code 运行Web IDE
  • 在Docker环境中,从终端的显示信息,可以看出 Web VS Code 运行在容器中
    VSC - VS Code 运行Web IDE

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
VSC - VS Code 运行Web IDE
.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
VSC - VS Code 运行Web IDE
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
VSC - VS Code 运行Web IDE

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
VSC - VS Code 运行Web IDE
command ‘markdown.showPreviewToSide‘ not found
Solution
截止2020-06-10,当前 Web 版本的 VS Code 还是主要用于测试目的,插件功能没有适配。

06 code-server is being accessed over an insecure domain

Description
VSC - VS Code 运行Web IDE

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

Solution
无实际影响,暂不关注。

VSC - VS Code 运行Web IDE

上一篇:记录一个web自动化工具


下一篇:Django和flask中使用原生SQL方法