CNB Docs

English

简体中文

English

简体中文
简体中文

Appearance

Usage Tips

Copy page

About 803 wordsAbout 3 min

WebIDE Usage Tips

How to Avoid the Clipboard Permission Pop-up

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

  • 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 browser settings. For Chrome:

    Copy chrome://settings/content/clipboard to the address bar to open clipboard settings. Click Add next to "Sites can ask to view text and images from your clipboard", then add [*.]cnb.space to the list.

How to Avoid the System Font Permission Pop-up

When entering commands in the WebIDE terminal, the browser may show a system font permission pop-up. Prevent this with the following setting:

Copy chrome://settings/content/localFonts to the browser address bar to open font settings. Click Add next to "Sites can ask to use fonts installed on your device", then add [*.]cnb.space to the list.

Resolving Shortcut Conflicts

When WebIDE shortcuts conflict with browser shortcuts, use the local client for 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, the user-level configuration file is stored locally and cannot roam. If configuration changes are needed, modify the local configuration file 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:

.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 a development environment, you can install commonly used VSCode extensions in a Dockerfile for reuse. There are two installation methods.

Note: WebIDE uses open-vsx (open source) as its extension source, not the Microsoft official extension source (closed source). If certain extensions are missing from open-vsx, you can search and download .vsix packages from the Microsoft source.

Note: Extensions available in open-vsx can be installed via extension ID; missing extensions can be installed via .vsix 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 open-vsx) and pylance (not available in open-vsx) extensions for Python development (requires .cnb.yml and .ide/Dockerfile):

.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.

# .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 as needed)
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8
© 2026 cnb.cool