Using VSCode On Code Ocean

VSCode is a popular programming IDE, with several options for development and code editing and availability of plugin extensions. VSCode is a versatile workstation within Code Ocean with the ability to run and debug a multitude of languages and programs. You can access a web server version in Code Ocean.

No specific base image is required - if VSCode is not previously installed in your starter image, it will be installed when the Cloud Workstation is started.

Launching a VSCode Cloud Workstation

To launch the web server VSCode version in your Code Ocean Capsule, click the icon in the Cloud Workstation panel.

Upon startup, you will be met with the beginning dashboard of the VSCode workstation.

Using Extensions in the VSCode Cloud Workstation

The power of VSCode is supported primarily by the use of extensions, such as those used for certain programming language editing, running, and debugging capabilities. They can be found in the toolbar for download during a Cloud Workstation session.

Installing extensions in this manner will persist for the currently active Cloud Workstation only, and will not remain installed once the Cloud Workstation is shut down.

Adding VSCode Extensions to Capsule Environment

If you install a package in the VSCode Cloud Workstation, it will not persist from session to session simply by that action. To set up extensions whose installation will persist session to session, they can be installed in the Capsule's postInstall script. This section covers how to add extensions to a Code Ocean Capsule environment so that whenever VSCode is opened, the extensions will be installed.

1. Click Edit Post-Install Script at the bottom of the Environment Editor to create the postInstall file in the environment folder.

2. Navigate to the postInstall file in the environment folder which for now is an empty bash script where you'll add your extensions. For this example, we'll add a Python Extension.

An extension can be added to the environment. For this example a Python extension for VSCode is added.

3. To add extensions, you must have the ID of the extension. This can be found by searching for the extension on the VSCode Marketplace. The webpage for the extension will display as below:

4. In the Overview tab of the extension's VSCode Marketplace page, scroll down to More Info. Take note of the Unique Identifier. In this example the unique identifier is ms-python.python.

5. Enter this code block into postInstall

if code-server --disable-telemetry --version; then
if [ ! -d "/.vscode/extensions" ]
    then
       echo "Directory /.vscode/extensions DOES NOT exists."
       mkdir -p /.vscode/extensions/
       fi
       
       code-server --disable-telemetry --extensions-dir=/.vscode/extensions --install-extension ms-python.python
       else
          echo "code-server not found"
       fi

If the extension's author is not verified on the VSCode marketplace, you may experience difficulties installing the extension.

6. Once your extensions have been added to the postInstall, they will automatically be installed upon launching the Code Server (VSCode) Cloud Workstation and available for use.