---
url: /en/workspaces/usage-tips.md
---
## WebIDE Usage Tips

### How to Avoid the Clipboard Permission Pop-up

When using the `Ctrl/Cmd + V` shortcut to paste in the browser, a clipboard permission pop-up may appear.\
You can use the following methods to avoid it:

* Use the shortcuts below to paste. These will not trigger Chrome’s clipboard permission pop-up:
  * Windows: `Shift + Insert`
  * macOS: `Shift + Command + V`

* Add clipboard permissions in your browser settings. For Chrome, follow these steps:

  Copy `chrome://settings/content/clipboard` and paste it into the Chrome address bar to open clipboard settings.\
  Click **Add** next to **"Sites can ask to view text and images from your clipboard"**, then add `[*.]cnb.share.ralphlauren.cn` to the list.

### How to Avoid the System Font Permission Pop-up

When entering commands in the WebIDE terminal, the browser may show a permission pop-up requesting access to system fonts.\
You can prevent this by adjusting your settings:

Copy `chrome://settings/content/localFonts` and paste it into the Chrome address bar to open local font settings.\
Click **Add** next to **"Sites can ask to use fonts installed on your device"**, then add `[*.]cnb.share.ralphlauren.cn` to the list.

### Resolving Shortcut Conflicts

When WebIDE shortcuts conflict with browser shortcuts, you can use local client remote development

## VSCode Configuration File Roaming

### Configuration File Paths

**WebIDE configuration file (`settings.json`) paths:**

* User dimension: `~/.local/share/code-server/User/settings.json`. Configuration will roam by user dimension to save personal settings
* Machine dimension: `~/.local/share/code-server/Machine/settings.json`. Can be modified in .ide/Dockerfile to achieve configuration sharing
* Repository dimension: `.vscode/settings.json`. Relative to current workspace (default is `/workspace`), i.e., repository root directory

**VSCode client (Remote-SSH) configuration file (`settings.json`) paths:**

* User dimension: Stored locally on user's machine, can be configured manually
* Machine dimension: `~/.vscode-server/data/Machine/settings.json`. Can be modified in .ide/Dockerfile to achieve configuration sharing
* Repository dimension: `.vscode/settings.json`. Relative to current workspace (default is `/workspace`), i.e., repository root directory

### More Sharing Strategies

* **User dimension sharing: Enables configuration sharing for the same user while isolating different users**

For WebIDE: User dimension configuration file (`settings.json`) will automatically roam and only affect the user themselves.

Note: For clients, since user dimension configuration files are stored locally, they cannot roam. If configuration changes are needed, you need to modify local configuration files manually.

* **Repository dimension sharing: Enables configuration sharing within the same repository while isolating different repositories**

How to share configuration within the same repository: Simply commit `.vscode/settings.json` file to the repository

* **Environment dimension sharing: Enables cross-repository environment sharing**

If you already have a built development environment image, you can directly use it in `.cnb.yml` configuration:

```yaml{9} title=".cnb.yml"
$:
  vscode:
    - name: vscode
      services:
        - vscode
      docker:
        # Use custom image as development environment
        image: groupname/imagename:latest
```

## How to Install VSCode Extensions

When customizing development environment, you can install commonly used VSCode extensions in Dockerfile for reuse. There are two installation methods.

Note: WebIDE uses `open-vsx` (open source) as extension source,
not `Microsoft official extension source` (closed source).
If certain extensions are missing in `open-vsx`, you can search extensions in `Microsoft official extension source`,
download the vsx source file from extension details page for installation.

Note: When needed extensions can be found in `open-vsx`, you can install them via extension id;
When extensions are missing in `open-vsx`, you can install them via vsx extension files.

### Install via Extension ID

`code-server --install-extension ${extension id}`

How to find extension id: Search extension in WebIDE or `open-vsx`, check extension id in details page. For example: to install python extension, id is `ms-python.python`

### Install via VSX Extension File

Download vsx package and commit to repository, then you can install via vsx file:

`code-server --install-extension ms-python.vscode-pylance.vsix`

Below is an example of installing `python` (available in openvsx) and `pylance` (not available in openvsx) extensions for python development
(requires configuring .cnb.yml and .ide/Dockerfile files):

```yaml title=".cnb.yml"
$:
  # vscode event: specifically for launching Workspaces from page
  vscode:
    - docker:
        # Custom image as development environment
        build:
          dockerfile: .ide/Dockerfile
          # by: declare files needed for building image
          by:
            - .ide/ms-python.vscode-pylance.vsix
          # versionBy: declare files needed for version control
          # When .ide/Dockerfile and files in versionBy are updated, image will be rebuilt
          versionBy:
            - .ide/ms-python.vscode-pylance.vsix
      services:
        - vscode
        - docker
      stages:
        - name: ls
          script: ls -al
```

Note: Extension file `ms-python.vscode-pylance.vsix` must exist in .ide directory.

```dockerfile{7,9}
# .ide/Dockerfile
FROM python:3.8

COPY .ide/ms-python.vscode-pylance.vsix .

# Install code-server and extensions (install python extension via id, install pylance extension via vsix package)
RUN curl -fsSL https://code-server.dev/install.sh | sh \
  && code-server --install-extension ms-python.python \
  && code-server --install-extension ./ms-python.vscode-pylance.vsix \
  && echo done

# Install SSH service to support VSCode client accessing development environment via Remote-SSH
RUN apt-get update && apt-get install -y wget unzip openssh-server

# Specify character set to support Chinese input in command line (choose character set as needed)
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8
```