VSCode is one of the most popular IDEs among developers, and for a good reason. With its out-of-the-box functionality and extendability, it offers a versatile and customizable experience.

Tasks are a great feature that allows you to use bash commands to create custom VSCode build commands. For example, you can create easy deploy, destroy, and synth commands for CDK.

To get started, you need to create the .vscode folder at the root of your project and add tasks.json in to that folder. In tasks.json, you can define a series of commands that VSCode needs to run in order to destroy, deploy, or synth your CDK code.

The code below shows the high-level structure of the task.json:

{ 
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [],
    "inputs": []
  }

In the tasks property, you can define as many commands as you wish to have. For example, the synth command is the easiest to create:

 {
    "label": "Synth CDK",
    "type": "shell",
    "command": "npx aws-cdk synth",
    "group": "build",
    "presentation": {
        "reveal": "always",
        "panel": "shared",
        "clear": true,
        "focus": true
    }
},

Before diving into creating a task for the deploy command, it's worth noting that I use aws-vault to manage my credentials and access AWS via the aws-cli. If you haven't installed it, I highly recommend doing so. You can use brew to install aws-vault:

brew install --cask aws-vault

Now, let's get back to creating the configuration for the CDK deploy command. As we have multiple profiles and accounts set up in aws-vault, VSCode must know which account we wish to deploy our code to. To achieve this, I will leave a placeholder in the configuration for the profile name:

{
    "label": "Deploy CDK",
    "type": "shell",
    "command": "aws-vault exec --prompt=osascript ${input:accounts} -- npx aws-cdk deploy",
    "group": "build",
    "presentation": {
        "reveal": "always",
        "panel": "shared",
        "clear": true,
        "focus": true
    }
}

The ${input:accounts} is the placeholder. But, we don't want to type the profile's name. Instead, we want VSCode to show us the list of the available profiles so we can choose from them. To achieve this, we can define an input in the input section of the tasks.json to list those profiles for us.

However, VSCode's inputs do not run bash scripts. To fix this, you need to install Tasks Shell Input from the marketplace.

{
    "id": "accounts",
    "type": "command",
    "command": "shellCommand.execute",
    "args": {
        "command": "aws configure list-profiles"
    }
}

We can also use the same approach for the CDK destroy command as well. The whole file should looks like this:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Deploy CDK",
            "type": "shell",
            "command": "aws-vault exec --prompt=osascript ${input:accounts} -- npx aws-cdk deploy",
            "group": "build",
            "presentation": {
                "reveal": "always",
                "panel": "shared",
                "clear": true,
                "focus": true
            }
        },
        {
            "label": "Destroy CDK",
            "type": "shell",
            "command": "aws-vault exec --prompt=osascript ${input:accounts} -- npx aws-cdk destroy",
            "group": "build",
            "presentation": {
                "reveal": "always",
                "panel": "shared",
                "clear": true,
                "focus": true
            }
        },
        {
            "label": "Synth CDK",
            "type": "shell",
            "command": "npx aws-cdk synth",
            "group": "build",
            "presentation": {
                "reveal": "always",
                "panel": "shared",
                "clear": true,
                "focus": true
            }
        },
    ],
    "inputs": [
        {
            "id": "accounts",
            "type": "command",
            "command": "shellCommand.execute",
            "args": {
                "command": "aws configure list-profiles"
            }
        }
    ]
}