使用技巧

# 一、关于快捷键

# 1. 粘贴

方法一:使用以下快捷键粘贴,不会弹出 Chrome 的剪贴板授权框。

  • win: shift + insert
  • mac: shift + command + v

方法二:浏览器设置中添加剪贴板授权

复制 chrome://settings/content/clipboard 到 chrome 浏览器中打开剪贴板设置,添加网站域名到 允许查看您的剪贴板 列表中。

具体打开路径:设置 -> 隐私设置和安全 -> 权限(更多权限) -> 剪贴板 -> 允许查看您的剪贴板

# 2. 彻底解决快捷键冲突的方法

由于 VSCode 用的快捷键,会跟浏览器用冲突。这时候有两个办法:

  • 修改浏览器的快捷键。
  • 将当前页面保存为 PWA 应用。如 chrome 浏览器,可在地址栏点击安装应用按钮。

# 二、关于 VSCode 客户端远程开发支持

# 1. 准备工作

如果需要使用 VSCode 客户端访问开发环境,需要准备:

  • 开发环境中安装 openssh-server,安装方式:
# 基础镜像不同,安装方式可能存在差异,可根据实际情况采用不同安装方式
apt-get update
apt-get install -y openssh-server

自定义开发环境时可在 Dockerfile 文件中提前安装好 ssh 服务。

  • 下载 VSCode 客户端,并安装 Remote-SSH 插件

# 2. 如何配置免密登录

可借助 publicKey 配置免密登录:

  • 在本地机器生成密钥对,如已存在可直接使用:
ssh-keygen -t rsa
  • 将公钥拷贝到服务器
# windows 拷贝方式,将密钥拷贝到开发环境的 ~/.ssh 目录下
# 需要先将上面生成的公钥文件 id_rsa.pub 拷贝到开发环境中,然后使用命令或手动复制内容到 ~/.ssh/authorized_keys 文件中
cat id_rsa.pub >> ~/.ssh/authorized_keys

# mac 拷贝方式,其中 ip 和端口号会发送到消息到企业微信中 
ssh-copy-id -p 49169 root@xxx.xxx.xxx.xxx

说明:开发环境销毁时,会漫游 ~/.ssh/authorized_keys 文件,下次新建/重建环境时,会恢复到开发环境中,即不用每次都做上述配置

# 3. 客户端使用小技巧

  • 窗口覆盖问题: 点击按钮打开 VSCode 客户端,可能会出现覆盖原有窗口问题。

解决办法: 可修改 VSCode 设置解决问题,将 Open Folders In New Window 设置为 on,可每次打开新窗口。

设置路径: Manage(管理) -> Settings(设置) -> User(用户) -> Window(窗口) -> New Window(新建窗口) -> Open Folders in New Window 设置成 on

# 三、关于漫游

以下内容按用户维度进行漫游,对所有项目有效果:

  • 用户 Git 凭证(以账号密码方式登录),即登录一次后,票据会被漫游,后续无需再登陆(ssh 方式暂不支持漫游)

  • 用户喜好设置,目前会对以下文件进行漫游(如果有别的文件也想漫游,可以提issue来支持):

// src/services/vscode.service.ts
// 指定需要持久化的用户文件列表
// 相对于 ~ 目录
const USER_DATA_FILE_LIST = [
  '.gitconfig',
  '.zshrc',
  '.bashrc',
  '.local/share/code-server/User/settings.json',
  '.local/share/code-server/User/snippets/*'
];

以下内容按项目维度保持一致,不同的项目间相互隔离

  • 插件

漫游原理和时机:用户在开发环境修改配置(如 settings.json)后,不会立马漫游修改,而是等到开发环境销毁时,再从开发环境中取出需漫游的文件,保存到远程硬盘中;重建开发环境时,再将远程云硬盘中保存的文件恢复到开发环境中。 因此初次修改某文件后(如 settings.json),需等到开发环境销毁后,再重建开发环境看效果

# 四、如何访问业务端口

假如远程开发地址为:https://xx.com/vscode-web/coding-ci-xxx

开发者在远程开发容器中,启动了一个端口为 3000 的 web 服务,访问此 web 服务的地址的方式为:https://xx.com/vscode-web/coding-ci-xxx/proxy/3000/

即在 url 路径后加上端口 /proxy/3000/ 即可。

# 五、使用 endpoints 暴露端口

说明:仅私有化部署支持 endpoints,SaaS 场景不支持

流水线中声明 endpoints 目标端口列表, 可通过环境变量 $CODING_PIPELINE_ENDPOINT_{port} 获取到外部可访问的 ip:port。即开发环境中启动在某个端口的服务, 可直接使用 ip:port 访问

配置方法详见 endpoints

# 六、VSCode 配置文件(settings.json)说明

# 1. 配置文件路径说明

WebIDE 的配置文件(settings.json)路径如下:

  • 用户维度:~/.local/share/code-server/User/settings.json
  • 机器纬度:~/.local/share/code-server/Machine/settings.json
  • 仓库维度:.vscode/settings.json。相对目录为当前工作区(默认为 /data/orange-ci/workspace

VSCode 客户端(Remote-SSH) 的配置文件(settings.json)路径如下:

  • 用户维度:~/.vscode-server/data/User/settings.json
  • 机器纬度:~/.vscode-server/data/Machine/settings.json
  • 仓库维度:.vscode/settings.json。相对目录为当前工作区(默认为 /data/orange-ci/workspace

# 2. 配置如何复用/共享

  • 用户维度配置:可实现同一个用户的配置复用

用户纬度的配置文件(settings.json)会被自动漫游,且只对用户自己生效。在 VSCode 页面中修改配置后,下次新打开的开发环境,配置还会在。

  • 仓库维度配置:可实现同一个仓库的配置共享

如何在同一个仓库内共享配置:提交 .vscode/settings.json 文件到仓库即可

  • 机器维度配置:可实现跨仓库的配置共享

如何跨仓库共享同一份配置:可制作一个公共的镜像供团队内所有仓库使用。在用于生成公共镜像的 dockerfile 中修改 settings.json 文件来实现共享配置。















 
 





FROM node:14

# install vscode and extension
RUN curl -fsSL https://code-server.dev/install.sh | sh &&\
    code-server --install-extension redhat.vscode-yaml &&\
    code-server --install-extension orta.vscode-jest &&\
    code-server --install-extension dbaeumer.vscode-eslint &&\
    code-server --install-extension eamodio.gitlens &&\
    echo done

# 安装 ssh 服务,用于支持 VSCode 客户端通过 Remote-SSH 访问开发环境
# RUN apt-get update && apt-get install -y wget unzip openssh-server

# 将 .ide/.settings.json 文件复制到开发环境中,需要复制两份,分别对应 WebIDE 和 Remote-SSH 的配置
COPY ./settings.json /root/.vscode-server/data/Machine/
COPY ./settings.json /root/.local/share/code-server/Machine/

# 指定字符集支持命令行输入中文(根据需要选择字符集)
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8

假设上述 dockerfile 构建的镜像名为 groupname/imagename,yml 配置如下:










 



#.coding-ci.yml
(**):
  branch.create:
    - name: vscode
      services:
        - vscode
      docker: 
        # 使用公共镜像作为开发环境基础镜像
        image: groupname/imagename:latest
      stages:
        - name: ready
          type: vscode:go

# 七、关于工作区未提交代码如何保存

工作区未提交的代码,无需担心开发环境销毁时会丢失:

  • 未提交代码如何保存: 开发环境销毁时,工作区未提交的代码不必担心会丢失。开发环境销毁时,云原生构建 会将工作区未提交代码 git stash 保存, 然后把整个 stash 列表提交到远程仓库
  • 保存的代码如何恢复到工作区: 重建开发环境时,会自动将上述 git stash 列表恢复到本地,同时将最新一个stash内容恢复到工作区(git stash pop --quiet)。












#.coding-ci.yml
(**):
  branch.create:
    - name: vscode
      services:
        - vscode
      docker: 
        build: .ide/Dockerfile
      stages:
        - name: ready
          type: vscode:go

# 八、如何安装 VSCode 扩展

可在 dockerfile 中安装常用的 VSCode 扩展,方便复用。

安装方式:

  • 方法一:通过扩展 id 安装,code-server --install-extension ${扩展 id}

扩展 id 如何查看:在 WebIDE 或 open-vsx (opens new window) 搜索插件,在插件详情页查看扩展 id。

  • 方法二:通过 vsx 扩展文件安装,code-server --install-extension ms-python.python.vsx

说明:WebIDE 使用的扩展源是 open-vsx (opens new window) (开源), 非微软官方扩展源 (opens new window)(闭源), 如果 open-vsx 缺失某些插件,可在 微软官方扩展源 (opens new window) 搜索插件, 在插件详情页下载 vsx 源文件安装。







 
 
 
 

 









# .ide/Dockerfile,在项目根目录下增加此文件
FROM node:14

# install vscode and extension
RUN curl -fsSL https://code-server.dev/install.sh | sh &&\
    # 方法一:通过 id 安装插件 
    code-server --install-extension redhat.vscode-yaml &&\
    code-server --install-extension orta.vscode-jest &&\
    code-server --install-extension dbaeumer.vscode-eslint &&\
    code-server --install-extension eamodio.gitlens &&\
    # 方法二:通过 vsx 源文件安装插件,vsx 文件可存在在 .ide 目录
    code-server --install-extension ms-python.vscode-pylance.vsx &&\
    echo done

# 安装 ssh 服务,用于支持 VSCode 客户端通过 Remote-SSH 访问开发环境
# RUN apt-get update && apt-get install -y wget unzip openssh-server

# 指定字符集支持命令行输入中文(根据需要选择字符集)
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8

# 九、如何修改资源配置

支持定制开发环境 cpu 和内存配置。

目前默认配置是 cpus: 8核,内存:16G,可通过 yml 配置修改 cpu 和内存配置