Shortcuts

Browser Clipboard Authorization

When using ctrl/command + v shortcut to paste in browser, a clipboard authorization dialog may pop up. You can avoid this dialog using the following methods:

• Use these alternative shortcuts for pasting, which won't trigger Chrome's clipboard authorization dialog:

  • Windows: shift + insert
  • Mac: shift + command + v

• Add clipboard authorization in browser settings

Copy chrome://settings/content/clipboard to chrome browser to open clipboard settings, add the website domain to the Sites can read from your clipboard list.

Specific path: Settings -> Privacy and security -> Site Settings (Additional permissions) -> Clipboard -> Sites can read from your clipboard

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