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

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

.cnb.yml

$:
  # vscode event: specifically for launching remote development 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 character set as needed)
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8