Skip to content

VSCode Configuration

Using the Command Palette

These instructions use the VSCode Command Palette. The following keyboard shortcuts will open it:

  • MacOS: cmd-shift-P
  • Linux: ctrl-shift-P
  • Windows: ctrl-shift-P

Add code command to PATH

The code command is an easy way to open VSCode from your terminal.

To add code command to PATH:

  1. Open the VSCode Command Palette.

  2. Type install, then select Shell Command: Install 'code' command in PATH.

  3. Run the codecommand to open VSCode from any directory.

Prettier setup

Typescript projects typically include a .prettierrc.json file with settings for the Prettier code formatter. For example, the xxx-cdk-lib/.prettierrc.json file contains the following settings:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "printWidth": 250,
  "endOfLine": "auto"
}

For Prettier to format your code whenever you save your file in VSCode, you need to install the Prettier VSCode Extension and edit your VSCode user settings file.

To install the Prettier VSCode extension:

  1. From the Extensions tab in VSCode, type prettier in the Search field.
  2. Click Prettier - Code Formatter, confirm the extension is created by Prettier, then click Install.

To configure 'Format On Save' and make Prettier the default formatter for Typescript:

  1. In the settings.json file for VSCode, verify or add the following lines:

    "editor.formatOnSave": true,

    "[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

  2. Open the VSCode Command Palette.

  3. Type user settings and select Preferences: Open User Settings (JSON).

    Tip

    If you don't see the JSON option, select Preferences: Open User Settings instead, then click Open Settings (JSON) on the Settings page.

VSCode AWS Toolkit Plugin

To install the VSCode AWS Toolkit Plugin:

  1. Follow the instructions in the AWS Toolkit for VS Code User Guide to install the plugin.

  2. Follow the instructions in Authenticating With Okta to configure temporary AWS credentials.

  3. In VSCode, click the AWS logo to expand the plugin details.

  4. In the Explorer section, click the ellipses menu, then click Choose AWS Profile.

  5. You will see the credentials you just generated. When prompted to associate the region with the one in your credentials, click Yes.