Usage Tips

About 649 wordsAbout 2 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 alternative shortcuts (these won't trigger Chrome's clipboard permission pop-up):
- Windows: Shift + Insert
- macOS: Shift + Command + V
Permanently authorize in browser settings. For Chrome:
Open chrome://settings/content/clipboard, and add [*.]cnb.space under "Sites can ask to view text and images from your clipboard".

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. Open chrome://settings/content/localFonts, and add [*.]cnb.space under "Sites can ask to use fonts installed on your device".

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

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:
        image: groupname/imagename:latest

How to Install VSCode Extensions

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

WebIDE uses open-vsx (open source) as its extension source, not the Microsoft official extension source. If an extension is missing from open-vsx, you can download a .vsix package from the Microsoft source to install.

Install via Extension ID

code-server --install-extension ${extension ID}

Extension ID can be found on the extension details page in WebIDE or open-vsx. For example, the Python extension ID is ms-python.python.

Install via VSIX Extension File

Download the .vsix package and commit it to the repository, then install via the package:

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

If an extension is missing from open-vsx, download the .vsix file from the Microsoft official source to install.

Below is an example for Python development, installing python (available in open-vsx) and pylance (not available in open-vsx, requires .vsix).

The vscode event launches Workspaces from the page:

.cnb.yml
$:
  vscode:
    - docker:
        build:
          dockerfile: .ide/Dockerfile
      services:
        - vscode
        - docker

Example .ide/Dockerfile (requires ms-python.vscode-pylance.vsix in the .ide directory):

FROM python:3.8

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

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

RUN apt-get update && apt-get install -y wget unzip openssh-server

ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8