Web VS Code

2021-07-07 11:56 JavaScript菜鸟

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 的的 Codespaceshttps://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/sshcodeDocumentation

  • 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 本文章转载自公众号:JavaScriptDoc

首页 - JavaScript 相关的更多文章: