使用技巧

# 一、关于快捷键

# 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. 客户端使用小技巧

窗口覆盖问题： 点击按钮打开 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 和内存配置。

← 快速开始工作原理 →