How to automatically install IDE extensions in AWS CodeCatalyst Dev Environments

Did you know that you can customize your AWS CodeCatalyst dev environment with IDE extensions? In this post, I will describe how you can automatically install IDE extensions in development containers which use the devfile configuration standard.

What is CodeCatalyst?

AWS CodeCatalyst is a CI/CD platform that bundles the different members of the AWS Code family (such as CodeCommit, CodeDeploy and CodeBuild) into a single service. A key feature of CodeCatalyst is its ability to spin up remote development environments. If you want to know more about the development environments and their benefits, I give a brief introduction in another article here.

In CodeCatalyst, development environments (or ‘dev environments’) are containers that can be configured using the devfile file format. The AWS documentation gives a brief overview on how to launch them. The great thing about development containers is that you can extend them with utility and productivity tools, like the AWS CLI or Github Copilot. Curiously, the official documentation does not actually explain how to do this! Let’s take a further look down below on how to achieve this.

Customizing your dev environment

IDE plugins are actually not defined in the devfile.yaml file itself (as opposed to, for example, the devcontainer standard). Instead, it expects the remote IDE server to handle this.

This means that customization will be implemented differently for each IDE! In this post, I will explain how to customize your VSCode environment. If you use a different IDE such as JetBrains, I hope this post can still serve as an inspiration for your own solution.

Let’s get started!

For VSCode, we can specify recommended extensions in a .vscode/extensions.json file as follows:

{
    "recommendations": [
        "AmazonWebServices.aws-toolkit-vscode",
        "GitHub.copilot",
        "dbaeumer.vscode-eslint"
    ]
}

After you have saved your changes and restarted your workspace, you will now receive a prompt whether to install your recommended plugins.

If you don’t want to install your plugins manually every time you create a new dev environment, we can also automate this step using VSCode tasks. We can define tasks in the vscode/tasks.json configuration file. Tasks can be used to automate various processes within VSCode, including installing IDE extensions!

Place the following configuration in your .vscode/tasks.json file:

{
    "version": "2.0.0",
    "tasks": [
            {
                "label": "Automatically install VSCode addons in AWS CodeCatalyst",
                "type": "shell",
                "command": "cat ./.vscode/extensions.json | jq -r .recommendations[] | xargs -L 1 code --install-extension",
                "runOptions": {
                    "runOn": "folderOpen"
                },
                "presentation": {
                    "reveal": "silent"
                }
            }
        ]
}

The command specified in this task will read all the recommended addons from the .vscode/extensions.json file and provide those as arguments to the VSCode CLI. The CLI then installs all the addons for us. We don’t necessarily have to use the .vscode/extensions.json file of course – it can be any file that we can read the input from.

After saving your changes, relaunch the dev environment and all your extensions will be installed! This can greatly speed up the installation of various tools that may not be baked into your standard development container image.

Summary

In this post I showed how to install IDE extensions in your CodeCatalyst development environment. For VSCode, you can manually install addons by specifying them in the .vscode/extensions.json file, or you can let the IDE server handle everything by by creating an extension installation task in the .vscode/tasks.json file.