Chapter 9. Adding a Visual Studio Code extension to a workspace

Previously, with the devfiles v1 format, you used the devfile to specify IDE-specific plug-ins and Visual Studio Code extensions. Now, with devfiles v2, you use a specific meta-folder rather than the devfile to specify the plug-ins and extensions.

9.1. OpenShift Dev Spaces plug-in registries overview

Every OpenShift Dev Spaces instance has a registry of default plug-ins and extensions. The Che-Theia IDE gets information about these plug-ins and extensions from the registry and installs them.

Check this OpenShift Dev Spaces registry project for an overview of the default plug-ins, extensions, and source code. An online instance that refreshes after every commit to the main branch, is located here. You can use a different plug-in or extension registry for Che-Theia if you don’t work in air-gapped environment: only the default registry is available there.

The plug-in and extension overview for Che-Code Visual Studio Code editor is located in the OpenVSX instance. Air gap is not yet supported for this editor.

9.2. Adding an extension to .vscode/extensions.json

The easiest way to add a Visual Studio Code extension to a workspace is to add it to the .vscode/extensions.json file. The main advantage of this method is that it works with all supported OpenShift Dev Spaces IDEs.

If you use the Che-Theia IDE, the extension is installed and configured automatically. If you use a different supported IDE with the Che-Code Visual Studio Code fork, the IDE displays a pop-up with a recommendation to install the extension.

Prerequisites

  1. You have the .vscode/extensions.json file in the root of the GitHub repository.

Procedure

  1. Add the extension ID to the .vscode/extensions.json file. Use a . sign to separate the publisher and extension. The following example uses the IDs of Red Hat Visual Studio Code Java extension: 

      {
    "recommendations": [
      "redhat.java"
    ]
  }
Note

If the specified set of extension IDs isn’t available in the OpenShift Dev Spaces registry, the workspace starts without the extension.

9.3. Adding plug-in parameters to .che/che-theia-plugins.yaml

You can add extra parameters to a plug-in by modifying the .che/che-theia-plugins.yaml file. These modifications include:

  • Defining the plug-ins for workspace installation.
  • Changing the default memory limit.
  • Overriding default preferences.

9.3.1. Defining the plug-ins for workspace installation

Define the plug-ins to be installed in the workspace.

Prerequisites

  1. You have the .che/che-theia-plugins.yaml file in the root of the GitHub repository.

Procedure

  1. Add the ID of the plug-in to the .che/che-theia-plugins.yaml file. Use the / sign to separate the publisher and plug-in name. The following example uses the IDs of Red Hat Visual Studio Code Java extension: 

    - id: redhat/java/latest

9.3.2. Changing the default memory limit

Override container settings such as the memory limit.

Prerequisites

  1. You have the .che/che-theia-plugins.yaml file in the root of the GitHub repository.

Procedure

  1. Add an override section to the .che/che-theia-plugins.yaml file under the id of the plug-in.

  2. Specify the memory limit for the extension. In the following example, OpenShift Dev Spaces automatically installs the Red Hat Visual Studio Code Java extension in the OpenShift Dev Spaces workspace and increases the memory of the workspace by two gigabytes: 

      - id: redhat/java/latest
    override:
      sidecar:
        memoryLimit: 2Gi

9.3.3. Overriding default preferences

Override the default preferences of the Visual Studio Code extension for the workspace.

Prerequisites

  1. You have the .che/che-theia-plugins.yaml file in the root of the GitHub repository.

Procedure

  1. Add an override section to the .che/che-theia-plugins.yaml file under the id of the extension.

  2. Specify the preferences in the Preferences section. In the following example, OpenShift Dev Spaces automatically installs Red Hat Visual Studio Code Java extension in the OpenShift Dev Spaces workspace and sets the java.server.launchMode preference to LightWeight: 

      - id: redhat/java/latest
    override:
      preferences:
        java.server.launchMode: LightWeight
Note

You can also define the preferences in the .vscode/settings.json file, either by changing the preferences in the UI of your IDE or by adding them to the .vscode/settings.json file: 

{
"my.preferences": "my-value"
}

9.4. Defining Visual Studio Code extension attributes in the devfile

If it’s not possible to add extra files in the GitHub repository, you can define some of the plug-in or extension attributes by inlining them in the devfile. You can use this procedure with both .vscode/extensions.json and .che/che-theia-plugins.yaml file contents.

9.4.1. Inlining .vscode/extensions.json file

Use .vscode/extensions.json file contents to inline the extension attributes in the devfile.

Procedure

  1. Add an attributes section to your devfile.yaml file.
  2. Add .vscode/extensions.json to the atributes section. Add a | sign after the colon separator.

  3. Paste the contents of the .vscode/extensions.json file after the | sign. The following example uses Red Hat Visual Studio Code Java extension attributes: 

    schemaVersion: 2.2.0
metadata:
  name: my-example
attributes:
  .vscode/extensions.json: |
    {
      "recommendations": [
        "redhat.java"
      ]
    }

9.4.2. Inlining .che/che-theia-plugins.yaml file

Use .che/che-theia-plugins.yaml file contents to inline the plug-in attributes in the devfile.

Procedure

  1. Add an attributes section to your devfile.yaml file.
  2. Add .vscode/extensions.json to the atributes section. Add a | sign after the colon separator.

  3. Paste the content of the .che/che-theia-plugins.yaml file after the | sign. The following example uses Red Hat Visual Studio Code Java extension attributes: 

    schemaVersion: 2.2.0
metadata:
  name: my-example
attributes:
  .che/che-theia-plugins.yaml: |
    - id: redhat/java/latest