VSCode在线编辑器及插件安装安装

拼搏现实的明天。 2021-09-23 10:20 498阅读 0赞

code-server是一款在线的vscode工具，只要将 code-server 部署到自己的服务器之后，就可以通过浏览器使用vscode，很好的解决了远程编辑服务器中文件的问题，方便好用。  
code-server的地址为： https://github.com/cdr/code-server

## 1、docker安装 ##

### (1)、准备 ###

*  准备一台linux机器
 *  安装docker：https://docs.docker.com/install/linux/docker-ce/centos/
 *  如果要反向代理，安装nginx

### (2)、安装 ###

*  在linux上创建一个目录，用来存放编辑器可以访问的文件例如：
    
        mkdir -p /usr/local/codefolder
 *  修改文件夹的权限，否则无法创建和修改文件
    
        chmod -R 777 /usr/local/codefolder
 *  安装：
    
        docker run --name codeserver -d -p 127.0.0.1:8443:8443 -v "/usr/local/codefolder:/home/coder/project" codercom/code-server --allow-http --no-auth
 *  浏览器访问http://localhost:8443

### (3)、参数配置详情 ###

sage: code-server [options]
    
    Run VS Code on a remote server.
    
    Options:
      -V, --version                         output the version number
      --cert <value>
      --cert-key <value>
      -e, --extensions-dir <dir>            Override the main default path for user extensions.
      --extra-extensions-dir [dir]          Path to an extra user extension directory (repeatable). (default: [])
      --extra-builtin-extensions-dir [dir]  Path to an extra built-in extension directory (repeatable). (default: [])
      -d, --user-data-dir <dir>             Specifies the directory that user data is kept in, useful when running as root.
      -h, --host <value>                    Customize the hostname. (default: "0.0.0.0")
      -o, --open                            Open in the browser on startup.
      -p, --port <number>                   Port to bind on. (default: 8443)
      -N, --no-auth                         Start without requiring authentication.
      -H, --allow-http                      Allow http connections.
      --disable-telemetry                   Disables ALL telemetry.
      --socket <value>                      Listen on a UNIX socket. Host and port will be ignored when set.
      --trust-proxy                         Trust the X-Forwarded-For header, useful when using a reverse proxy.
      --install-extension <value>           Install an extension by its ID.
      -h, --help                            output usage information

### (4)、插件安装 ###

code-server目前还不支持在线安装插件，不过它提供了.VSIX方式的安装，下面以python插件为例演示插件的安装。

*  下载python插件：https://github.com/Microsoft/vscode-python/releases。可以通过命令下载：
    
        wget https://github.com/Microsoft/vscode-python/releases/download/2019.3.6558/ms-python-release.vsix
 *  查看docker容器中是否有Python环境，没有则安装Python。
    
        #进入dockers容器
        docker exec -it codeserver /bin/bash
        #查看Python环境
        sudo python -V
        sudo python3 -V
        #安装python，根据主机选择相应命令
        sudo apt-get update
        sudo apt-get install python3
        #再次查看Python环境
        sudo python3 -V
        #退出Python及docker容器（注意一定要退出容器）
        exit()
        exit()
        #切换到刚才下载的Python插件目录，将文件复制到docker容器
        sudo docker cp ms-python-release.vsix codeserver:/usr/local
 *  利用VSIX安装  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVybG92ZXJf_size_16_color_FFFFFF_t_70]
 *  测试代码
    
        #!/usr/bin/python3
         
        # 计算面积函数
        def area(width, height):
            return width * height
         
        def print_welcome(name):
            print("Welcome", name)
         
        print_welcome("Runoob")
        w = 4
        h = 5
        print("width =", w, " height =", h, " area =", area(w, h))
    
    测试结果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVybG92ZXJf_size_16_color_FFFFFF_t_70 1]

## 2、二进制文件 ##

### (1)、准备 ###

*  准备一台Linux
 *  下载二进制文件，下载地址：https://github.com/cdr/code-server/releases
 *  如果要反向代理，安装nginx

### (2)、安装 ###

*  解压缩下载的文件
 *  然后运行二进制文件`./code-server`。默认情况下，`code-server`使用随机生成的密码启用密码身份验证。您可以将`PASSWORD`环境变量设置为使用您自己的环境变量，或用于`--auth none`禁用密码身份验证。
 *  如需后台启动请运行`nohup ./code-server --auth none > /dev/null 2>&1 &`，如需指定端口`--port 8443`
 *  在浏览器访问`localhost:8080`。

### (3)、参数配置详情 ###

./code-server --help

### (4)、插件安装 ###

code-server目前还不支持在线安装插件，不过它提供了.VSIX方式的安装，下面以python插件为例演示插件的安装。

*  下载python插件：https://github.com/Microsoft/vscode-python/releases。可以通过命令下载：
    
        wget https://github.com/Microsoft/vscode-python/releases/download/2019.3.6558/ms-python-release.vsix
 *  利用VSIX安装  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVybG92ZXJf_size_16_color_FFFFFF_t_70 2]
 *  测试代码
    
        #!/usr/bin/python3
         
        # 计算面积函数
        def area(width, height):
            return width * height
         
        def print_welcome(name):
            print("Welcome", name)
         
        print_welcome("Runoob")
        w = 4
        h = 5
        print("width =", w, " height =", h, " area =", area(w, h))
    
    测试结果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVybG92ZXJf_size_16_color_FFFFFF_t_70 3]

## 3、Nginx反向代理 ##

配置文件：

#user  nobody;
    worker_processes  2;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
        #                  '$status $body_bytes_sent "$http_referer" '
        #                  '"$http_user_agent" "$http_x_forwarded_for"';
    
        #access_log  logs/access.log  main;
    
        sendfile        on;
        #tcp_nopush     on;
    
        client_max_body_size  200m;
    
        #gzip  on;
        
        map $http_upgrade $connection_upgrade {  
            default upgrade;  
            '' close;  
        }
        
        upstream websocket {
            server localhost:8443;  
        }
     
    	server {
            listen       80;
            server_name  localhost;
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {  
                proxy_pass http://websocket;  
                proxy_http_version 1.1;  
                proxy_set_header Upgrade $http_upgrade;  
                proxy_set_header Connection "Upgrade";  
            }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVybG92ZXJf_size_16_color_FFFFFF_t_70]: /images/20210923/c5479ce1c9a340329ca6df79fc9eda63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVybG92ZXJf_size_16_color_FFFFFF_t_70 1]: /images/20210923/d5e6a4f7b5ec4bc6aa8f213376f3962f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVybG92ZXJf_size_16_color_FFFFFF_t_70 2]: /images/20210923/1889b6bf5e334122a05cedb0b6a94d01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVybG92ZXJf_size_16_color_FFFFFF_t_70 3]: /images/20210923/29708b19b0344e84bacd36b852ca7f73.png