vscode作为一个非常强大的IDE，虽然已经适配了linux，mac，但是还是不够，如果有了web端的，那么只要有了浏览器，我们就可以在任何设备上进行访问，今天文章的主题就是搭建一个基于vs code的web ide，当然不是自己去编写代码，而是站在巨人的肩膀上，用到的就是code server，它是基于vscode的一个开源项目，发布在github上（附上网址：code-server/github）。
接下来就说一下code server如何安装使用。
1.下载对应的压缩包
- 先通过ssh连接到linux服务器，查看系统信息，code server也分多个版本，因此，要根据不同的系统下载相对应的版本
[root@VM-4-7-centos ~] uname -a
Linux VM-4-7-centos 3.10.0-1127.19.1.el7.x86_64 #1 SMP Tue Aug 25 17:23:54 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
code-server
- 一般都是x86_64，如果知道的话，该步骤可以跳过，目前github上code server的新版本已经取消了windows和x86_64版本的，如果显示是x86_64，直接下载amd64版本的，目前最新版的是3.11.0
2.解压
#解压
[root@VM-4-7-centos lsy] tar -zxvf code-server-3.11.0-linux-amd64.tar.gz
#进入该目录
[root@VM-4-7-centos lsy] cd code-server-3.11.0-linux-amd64/
#查看有哪些文件
[root@VM-4-7-centos code-server-3.11.0-linux-amd64]# ls
bin lib node out postinstall.sh src typings code-server LICENSE.txt node_modules package.json README.md ThirdPartyNotices.txt yarn.lock
3.配置
- code server有一个配置文件
config.yaml，在启动服务前我们先进行修改一下。
[root@VM-4-7-centos ~] vim ~/.config/code-server/config.yaml
#绑定ip和端口，默认端口是8080，注意在防火墙打开对应的端口
bind-addr: 0.0.0.0:8080
auth: password
password: 123456789 #这里输入自己的密码
cert: false
- 注意：如果你选择在公网上搭建code server，请尽量不要使用默认的端口，或者将访问密码设置的复杂一些，因为一旦有其他人进入到了你的vs code网页端，就可以直接通过vs code上的终端访问你服务器上的文件，这是一件极为危险的事。
4.启动
- 进入到bin目录
cd bin
./code-server
启动后打开浏览器，输入ip和端口，然后输入刚刚配置的密码，就可以访问了。
你还可以通过命令启动，如果觉得每次输入命令太长的话，还可以单独新建一个启动的脚本：
$ /root/lsy/code-server-3.11.0-linux-amd64/bin/code-server --bind-addr 0.0.0.0:9000
$ /root/lsy/code-server-3.11.0-linux-amd64/bin/code-server --bind-addr 0.0.0.0:9001
这里通过命令启动了两个code server，它们同时共用一个配置文件
访问code server
输入刚刚配置好的密码，就可以进入了，界面和vs code一模一样。
Tips1：
code server虽然成功通过命令运行了，但是如果终端关闭后，程序可能就停止了，我们希望它在后台继续运行。这时，就要用到screen。如果没有的话，可以通过命令安装：
$ sudo apt-get install screen
或
$ sudo yum install screen
安装完成后直接输入命令screen，这时会重新进入一个终端，在这个终端里面运行code server就好了
- 如果想要查看screen中运行的服务，可通过：
[root@VM-4-7-centos] screen -ls
There are screens on:
18763.pts-0.VM-4-7-centos (Attached)
31774.codeserver (Detached)
2 Sockets in /var/run/screen/S-root.
-
也可以通过ps 命令查看当前进程，想要结束，就使用命令
kill -9 <你的进程pid>来强行结束：
查看进程 -
如果想连接到创建的终端，就输入
screen -r <这里输入你的screen_id>：
连接到创建的终端
Tips2：
如果你想搭配nginx使用，可以在nginx的配置文件的location部分加上以下配置，甚至，你还可以通过配置文件启动多个code server实现负载均衡
code server搭配nginx使用
location / {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
Tips3：
说一下插件部分，部分插件还无法在线安装，我们可以在微软官方插件库里面下载（附上链接：Extensions for Visual Studio family of products | Visual Studio Marketplace），下载好后，选择从VSIX安装即可。
vs code插件
