AWS Toolkit for VS Code: Amazon Q & CodeWhisperer
Explore AWS Toolkit for VS Code: Boost coding with Amazon Q & CodeWhisperer's AI suggestions and cloud integration. Enhance development workflow & productivity.
Published Feb 1, 2024
AWS Toolkit for Visual Studio Code
Installing AWS Toolkit for Visual Studio Code
Download and Install AWS Toolkit for Visual Studio Code
Installing AWS Toolkit for Visual Studio Code from the VS Code IDE Marketplace
Authentication for Amazon Q + CodeWhisperer
Authentication and Connection Using AWS Builder ID
Authentication and Connection Using IAM Identity Center
Authentication for AWS Explorer
Authenticate and Connect Using IAM Identity Center
Authenticate and Connect Using IAM Credentials
Working with AWS Services in AWS Explorer
Working with Amazon Q from the Toolkit
Opening Amazon Q Chat from VS Code Toolbar
Developing Features with Amazon Q
Explaining and Updating Code with Amazon Q
The AWS Toolkit for Visual Studio Code is an open-source extension, designed for the Visual Studio Code (VS Code) editor. This tool aids developers in developing, debugging, and deploying serverless applications using Amazon Web Services (AWS).
To learn more about Visual Studio Code, visit here.
Amazon Q is a conversational assistant that helps in building, maintaining, and transforming applications. From the Integrated Development Environment (IDE), Amazon Q can:
- Answer questions about AWS.
- Address queries about common programming concepts.
- Explain the meaning of command lines or code functions.
- Write unit tests and code.
- Debug and repair code.
- Refactor code.
An AI-powered productivity tool for IDEs.
- Real-Time Code Suggestions: Automatically suggests code in over 15 languages, including Infrastructure as Code (CloudFormation, AWS CDK, and Terraform).
- Optimized for AWS Service Usage: Code suggestions are optimized for AWS APIs such as Amazon Elastic Compute Cloud (Amazon EC2), AWS Lambda, and Amazon Simple Storage Service (Amazon S3).
- Integrated Security Scanning: Detects hard-to-find security vulnerabilities in code and provides immediate repair suggestions.
To start working with the AWS Toolkit for Visual Studio Code from VS Code, you need to meet the following requirements. To learn more about accessing all AWS services and resources from the AWS Toolkit for Visual Studio Code, see the Optional Requirements section in this guide. User Guide
- VS Code requires the Windows, macOS, or Linux operating system.
- AWS Toolkit for Visual Studio Code requires you to use VS Code version 1.73.0 or later.
- For more information about VS Code or to download the latest version of VS Code, visit the VS Code download page.
You can download, install, and set up the AWS Toolkit for Visual Studio Code via the VS Code Marketplace in your IDE. Alternatively, you can download the AWS Toolkit for Visual Studio Code installation files by accessing the VS Code Marketplace from your web browser.
- Open the AWS Toolkit for Visual Studio Code extension in your VS Code IDE
AWS Toolkit - Amazon Q, CodeWhisperer, and more - From the AWS Toolkit for Visual Studio Code extension in the VS Code Marketplace, select Install to begin the installation process.
AWS Toolkit - Amazon Q, CodeWhisperer, and more - When prompted, choose to restart VS Code to complete the installation process.
When signing up for any of AWS’s tools and services using an AWS Builder ID, you create your own AWS Builder ID. Registering with your email address, name, and password is part of the process for signing up for an AWS tool or service.
- Passwords are case-sensitive.
- Passwords must be between 8 to 64 characters in length.
- Passwords must include at least one character from each of the following categories:
- Lowercase letters (a-z)
- Uppercase letters (A-Z)
- Numbers (0-9)
- Non-alphanumeric and non-letter characters (~!@#$%^&*_-+=`|(){}[]:;"’<>,.?/)
- The last three passwords cannot be reused.
- Passwords must not be used if they have been disclosed in a third-party data breach.
Note: Tools and services using the AWS Builder ID will guide you in creating and using an AWS Builder ID as necessary.
- Visit the registration page of the AWS tool or service you wish to access, or go to the AWS Builder ID profile.
AWS Toolkit - Amazon Q, CodeWhisperer, and more - On the Create AWS Builder ID page, enter your Email Address. We recommend using your personal email.
- Click Next.
- Enter your Name, then click Next.
AWS Toolkit - Amazon Q, CodeWhisperer, and more - On the Email Verification page, enter the verification code sent to your email address. Click Verify. Depending on your email provider, it may take a few minutes to receive the email. Check your spam and junk folders for the code. If you do not receive an email from AWS after five minutes, click Resend Code.
- After we verify your email, on the Choose a Password page, enter your Password and Confirm Password.
- If a Captcha appears as an additional security measure, enter the characters you see.
AWS Toolkit - Amazon Q, CodeWhisperer, and more - Click Create AWS Builder ID.
After you select the This is a trusted device option from the login page, we consider all subsequent logins from the web browser on that device as authorized. This means you will not need to provide an MFA code on that trusted device. However, if your browser, cookies, or IP address changes, you may need to use an MFA code for additional verification.
To start working with Amazon Q and Amazon CodeWhisperer from the Toolkit, you need to authenticate and connect using your AWS Builder ID or IAM Identity Center credentials.
For detailed information on the packages and pricing of Amazon Q, refer to the Amazon Q pricing guide at: http://aws.amazon.com/q/pricing.
The following steps describe how to authenticate and connect your Toolkit with your AWS account.
From the CodeWhisperer section of the user interface Sign in to Get Started, select the Use for free with AWS Builder ID button and confirm you wish to proceed to the AWS authorization request page on your default web browser.
On your default web browser, verify that the authorization code matches the one from VS Code, then select the Confirm and continue button to proceed.
Follow the instructions on your default web browser. You will be notified when the authorization process is complete, and you can close the browser and return to VS Code.
- From the CodeWhisperer section of the user interface Sign in to Get Started, expand the Sign in with IAM Identity Center (SSO) section.
- Enter your starting URL, then select Select a Region and choose your AWS region.> **Note:**Choose the region that corresponds with the IAM Identity Center credentials you are using.
- Select the Sign in button and confirm you wish to open the AWS authorization request page on your default web browser.
- On your default web browser, verify that the authorization code matches the one from the Sign in with AWS Builder ID dialog, then select the Confirm and continue button to proceed.
- Follow the instructions on your default web browser. You will be notified when the authorization process is complete, and you can close the browser and return to VS Code.
To start working with AWS Explorer from the Toolkit, authenticate and connect using your IAM credentials or IAM Identity Center credentials.
The following procedures describe how to authenticate and connect your Toolkit with your AWS account.
- In the AWS Explorer section of the user interface, under Sign in to Get Started, expand Sign in with IAM Identity Center (SSO).
- Enter your Start URL, then choose Select a Region and select your AWS region.> Note> Choose the region that corresponds to the region associated with your IAM Identity Center credentials.
- Click the Sign in button and confirm that you want to open the AWS authorization request webpage in your default web browser.
- In your default web browser, verify that the authorization code matches the code from the Sign in with AWS Builder ID dialog, then click Confirm and continue to proceed.
- Follow the instructions in your default web browser. You will be notified when the authorization process is complete. You can then close the browser and return to VS Code.
- In the AWS Explorer section of the user interface, under Sign in to Get Started, expand Or, provide IAM Roles Credentials.
AWS Toolkit - Amazon Q, CodeWhisperer, and more - Enter the Profile Name, Access Key, and Secret Key of your AWS account in the provided fields, then click Add Profile to add the profile to your configuration file and connect the Toolkit with your AWS account.
AWS Toolkit - Amazon Q, CodeWhisperer, and more - The AWS Explorer Toolkit will update to display your AWS services and resources once authentication is complete and a connection has been established.
AWS Toolkit - Amazon Q, CodeWhisperer, and more
AWS Explorer provides an overview of several AWS services that you can interact with using the AWS Toolkit for Visual Studio Code. See a general overview of AWS Explorer in the navigation topic.
This section provides information on how to access and use AWS Explorer in VS Code. This assumes you have already installed and configured the Toolkit for VS Code on your system.
Key points:
- If the toolkit is properly installed and configured, you should see items in AWS Explorer. To view AWS Explorer, select the AWS icon on the activity bar.Example:
- Certain features require specific AWS permissions. For instance, to view AWS Lambda functions in your AWS account, the credentials you configure in ‘Authentication and access’ must include at least read-only Lambda permissions. Refer to the following topics for more information on the permissions required for each feature.
- If you wish to interact with AWS services that are not immediately visible in AWS Explorer, you can go to ‘More resources’ and choose from hundreds of available resources to add to the interface.For example, you can select ‘AWS Toolkit:CodeArtifact::Repository’ from the choice of available resource types. Once this resource type is added to ‘More resources’, you can expand the entry to view a list of different CodeArtifact repository resources with their unique properties and characteristics. Furthermore, you can describe the properties and characteristics of the resource in JSON format templates, which can be saved to create new resources in AWS Cloud.
Amazon Q is an AI-based natural language chat toolkit capable of suggesting code for various files, creating PRs for collaborative approval, and deploying them in your projects. For detailed information about the Amazon Q service, see the Amazon Q User Guide.
- To start working with Amazon Q, authenticate and connect to AWS using your AWS Builder ID or IAM AWS login information.
- View detailed plans and pricing for Amazon Q at the Amazon Q Pricing Guide.
- For details on connecting your AWS account with the Toolkit, see the Authentication for Amazon Q + CodeWhisperer section in this User Guide.
- Initiate a chat with Amazon Q by asking questions in the Chat. Amazon Q can discuss various topics including AWS, software development, programming languages, and more. You can also ask Amazon Q specific questions about your project in VS Code.
- For detailed information about Amazon Q Chat, including topics and sample questions, see the Amazon Q Chat topic in the Amazon Q User Guide.
- Below are Quick Chat commands of Amazon Q that you can enter in the chat window.
- /clear: Clear the current chat by removing all previously saved text and context.
- /dev: Start a chat about developing Amazon Q features and create a deployment plan for your project.
- /transform: Initiate a chat about Amazon Q Code Transformation, assisting you in converting code from one language version to another.
- /help: Display a list of help topics and information about Amazon Q.
- To start a new chat with Amazon Q or access an existing one, follow one of the procedures below.
- From the VS Code Toolbar, select the Amazon Q (preview version) icon to open the Amazon Q (preview version): Chat window.
- Start a new conversation by selecting the + icon.
- Enter your question or command in the “Ask a question or enter ‘/’” text field to continue the conversation.
- Develop your project by chatting with Amazon Q about the type of feature you want to create. Explain the desired features in the chat and Amazon Q will generate a deployment plan for your new or existing project.
- For detailed information on developing features with Amazon Q, see the Developing Features with Amazon Q topic in the Amazon Q User Guide.> Note: Amazon Q feature development is only accessible with IAM identification authentication. See detailed plans and pricing of Amazon Q at the Amazon Q Pricing Guide.
- Amazon Q does not modify or update code until you have reviewed and approved the change in the file diff.
- To get started with Amazon Q feature development, complete the following steps:
- From a new or existing VS Code project, open Amazon Q Chat.
- In the Amazon Q Chat window, enter
/dev, then press enter to launch Amazon Q feature development; the Amazon Q Chat text field updates with the prompt Briefly describe a task or issue. - Respond to the prompt in the Amazon Q Chat window, briefly describing the feature you want to develop, then press enter to start creating the deployment plan.
- Amazon Q responds with a deployment plan upon completion, and the text field updates with the prompt.
- Enter any modifications or questions about the deployment plan into the text field.
- When satisfied with the plan, select Write Code from the chat window for Amazon Q to suggest code for your project.
- Amazon Q can explain and update code. To get an explanation or code update, send code to Amazon Q with a request, after which Amazon Q responds with updates.
- For detailed information about Amazon Q’s code explaining and updating, see the Explaining and Updating Code with Amazon Q topic in the Amazon Q User Guide.
- Here are the options you can specify when requesting a code explanation or update from Amazon Q:
- Explain: Explain the code in natural language.
- Refactor: Make performance adjustments to the code.
- Debug: Debug the code.
- Optimize: Perform code performance improvements.
- Send to Prompt: Send marked code to the Amazon Q window for further queries.
- To request a code explanation or update, complete the following steps:> Note: Amazon Q does not modify or update the code until you have reviewed and approved the changes in the file diff.
- From the VS Code editor, highlight a section of code and open the context menu (right-click).
- From the context menu, expand Send to Amazon Q.
- Select an option from the list to send the code to Amazon Q.
- In Amazon Q, review the proposed explanations or changes to the code, and if there are additional steps required to complete the request, follow the prompts in the chat window.
- Amazon Q Code Transformation can update the language version of code in a project or workspace.
- For detailed information about Amazon Q Code Transformation, see the Code Transformation topic in the Amazon Q User Guide.> Note: Amazon Q Code Transformation is only accessible with IAM Identity Center authentication. See detailed plans and pricing for Amazon Q at the Amazon Q Pricing Guide.
- Currently, Amazon Q Code Transformation only upgrades code from Java 8 or Java 11 to Java 17.
- Amazon Q Code Transformation starts by verifying if the language version can be upgraded, which takes up to 30 minutes.
- After successful verification, the code transformation process can take up to 15 minutes.
- Amazon Q does not make any modifications or updates to the code until you have reviewed and approved all changes in the file diff.
- From VS Code, open the project you want to upgrade the language version for.
- From the AWS Toolkit for Visual Studio Code, expand Amazon Q (preview version), then select Transform or type
/transforminto the Amazon Q Chat. - Amazon Q begins the verification process by rebuilding the project in the source language version.> Note: The verification process can take up to 30 minutes.
- No changes are made to the code during this process.
- If the transformation process cannot be completed, Amazon Q generates a build export for your review.
- After a successful verification build, Amazon Q begins the code transformation process. This can take up to 15 minutes.
- Amazon Q notifies you when the build process is complete, select View diff to review and approve the proposed code updates.
With Amazon Q activated, you can now start a chat to receive programming support. You can ask Amazon Q to describe your source code file.
From here, you can enhance your application by integrating it with Amazon DynamoDB. You can ask Amazon Q: “Generate code to save data into DynamoDB table called save_data() accepting data parameter and return boolean status if the operation successfully runs.”
After reviewing the generated code, you can manually copy and paste it into the editor. You can also choose Insert at cursor to place the generated code directly in the source code.
An advanced AI-powered productivity tool for integrated development environments (IDEs).
- Real-time source code suggestions: Automatically suggest code in over 15 programming languages, now including infrastructure as code (CloudFormation, AWS CDK, and Terraform).
- Optimized for AWS service usage: Suggests code optimized for AWS APIs, including Amazon Elastic Compute Cloud (Amazon EC2), AWS Lambda, and Amazon Simple Storage Service (Amazon S3).
- Security scanning integration: Scan your code to detect hard-to-find vulnerabilities and receive code suggestions to fix them immediately.
CodeWhisperer will provide suggestions automatically as you type. If you don’t receive suggestions, you can always trigger suggestions manually using the shortcut Option + C (on Mac) or Alt + C (on Windows). CodeWhisperer may sometimes provide multiple suggestion options for you to choose from. You can use the arrow keys → and ← to navigate between available suggestions.
The suggestions that CodeWhisperer provides are not fixed, meaning you may receive different suggestions compared to what is displayed in this article. If you receive an inappropriate suggestion for your needs, try switching between all available suggestions using the arrow keys or try expressing the code prompts differently. Even changing punctuation marks can generate new suggestions.
The examples in this article are written in JavaScript and TypeScript. However, the techniques I will present are suitable for many programming languages supported by CodeWhisperer. Now, let’s start with some examples!
At its most basic level, CodeWhisperer can be used as an advanced auto-completion tool, significantly reducing the amount of typing when writing individual lines or blocks of code. To use CodeWhisperer in this way, simply write code as you normally would. CodeWhisperer will provide automatic suggestions as you type. Accept suggestions when they are helpful, and ignore them when they are not. In my experience, using CodeWhisperer in this way alone has reduced my typing by 50% or more.
Skilled programmers use clear, descriptive names for their functions and parameters. If you apply this practice in your programming, CodeWhisperer will have enough context to implement many functions for you.
After I enter the function signature below, CodeWhisperer generates the function body for me.
User input (JavaScript):
1
function standardDeviation(numbers)Result:
1
2
3
4
5
6
function standardDeviation(numbers) {
let mean = numbers.reduce((a, b) => a + b) / numbers.length;
let variance =
numbers.reduce((a, b) => a + Math.pow(b - mean, 2)) / numbers.length;
return Math.sqrt(variance);
}
Sometimes a good function signature alone is not enough to convey the desired behavior of a function. In those cases, you can use detailed code comments as a prompt for CodeWhisperer. I recommend using your language’s doc comment delimiter when using this technique.
User Input (JavaScript):
1
2
3
4
5
/**
* Given a list that contains some numbers and strings, format them into a string
* in which the numbers are prepended with "#" and the strings are wrapped in
* double quotes.
*/Result:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* Given a list that contains some numbers and strings, format them into a string
* in which the numbers are prepended with "#" and the strings are wrapped in
* double quotes.
*/
function formatList(list) {
return list
.map((item) => {
if (typeof item === "number") {
return ` ````#${item}`;
} else {
return `"${item}"`;
}
})
.join(", ");
}
You can create classes or partial class implementations from a single comment line. That comment should describe the main properties and behavior of the class. Simple descriptions are usually enough.
User input (TypeScript):
1
2
3
4
/**
* A folder has a name, children, and an optional parent. A child can't be added
* twice.
*/Result:
After I commented out the above block, CodeWhisperer provided many suggestions, including the following implementation, with documentation comments for each method!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
* A folder has a name, children, and an optional parent. A child can``'t be added
* twice.
*/
export class Folder {
name: string;
children: Folder[];
parent?: Folder;
constructor(name: string, parent?: Folder) {
this.name = name;
this.children = [];
this.parent = parent;
}
/**
* Add a child to the folder.
* @param child The child to add.
* @returns True if the child was added, false if it was already present.
*/
addChild(child: Folder): boolean {
if (this.children.includes(child)) {
return false;
}
this.children.push(child);
child.parent = this;
return true;
}
/**
* Remove a child from the folder.
* @param child The child to remove.
* @returns True if the child was removed, false if it wasn``'t present.
*/
removeChild(child: Folder): boolean {
const index = this.children.indexOf(child);
if (index === -1) {
return false;
}
this.children.splice(index, 1);
child.parent = undefined;
return true;
}
}
CodeWhisperer helps you implement famous algorithms with ease. Just tell CodeWhisperer which algorithm you want to apply to a specific programming problem, and it will respond to that request.
User Input (JavaScript):
1
2
const actors = [ ... ];
// Sort the actors by age using the merge sort algorithm.Result:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const actors = [ ... ];
// Sort the actors by age using the merge sort algorithm.
function mergeSort(arr) {
if (arr.length < 2) {
return arr;
}
const middle = Math.floor(arr.length / 2);
const left = arr.slice(0, middle);
const right = arr.slice(middle);
return merge(mergeSort(left), mergeSort(right));
}
function merge(left, right) {
const result = [];
while (left.length && right.length) {
if (left[0].age < right[0].age) {
result.push(left.shift());
} else {
result.push(right.shift());
}
}
while (left.length) {
result.push(left.shift());
}
while (right.length) {
result.push(right.shift());
}
return result;
}
console.log(mergeSort(actors));
CodeWhisperer helps speed up unit test deployment. Not only was it able to build logic for most of the obvious unit tests I asked for, but it frequently suggested unit tests for edge cases I hadn’t thought of.
When I want CodeWhisperer to execute a unit test, I start by declaring the condition I’m testing and the expected result as shown in the following example.
User Input (JavaScript):
1
2
describe("Folder.addChild()", () => {
it("when adding an existing folder should not add duplicate"Result:
1
2
3
4
5
6
7
8
9
describe("Folder.addChild()", () => {
it("when adding an existing folder should not add duplicate", () => {
const folder = new Folder("root");
const child = new Folder("child");
folder.addChild(child);
folder.addChild(child);
expect(folder.children.length).toBe(1);
});
});
One of the interesting discoveries I made is that CodeWhisperer can create fake data - or really any piece of code that has a repeating pattern. To illustrate, for the following list, I only imported the first “user” pattern, and CodeWhisperer was helpful in continuing that pattern.
User input (JavaScript):
1
2
const fakeUsers = [
{ name: "User 1", id: "user1" },Result:
1
2
3
4
5
6
7
8
const fakeUsers = [
{ name: "User 1", id: "user1" },
{ name: "User 2", id: "user2" },
{ name: "User 3", id: "user3" },
{ name: "User 4", id: "user4" },
{ name: "User 5", id: "user5" },
{ name: "User 6", id: "user6" }
]
- View, Edit, and Deploy AWS Resources Multiple Accounts and AWS Regions - Access Your AWS Resources Across Your Accounts and Regions
- S3 Support - View, Create, and Edit S3 Buckets, Folders, and Files
- Lambda - Download & Upload Lambda Functions
- Lambda - Step Through AWS Lambda Functions with VS Code Debugger
- CloudWatch - Search Logs Generated by Your AWS Resources
- ECS - Execute Commands on Running ECS Containers (or Open a Terminal)
In conclusion, the AWS Toolkit for Visual Studio Code represents a significant leap forward in cloud-based development, offering unparalleled access to AWS services directly from your editor. With the addition of Amazon Q and Amazon CodeWhisperer, developers are equipped with cutting-edge tools that not only enhance productivity but also inspire innovative solutions through AI-driven code assistance and efficient cloud management. These tools underscore AWS's commitment to empowering developers with the resources needed to build, deploy, and manage applications more effectively in the cloud.
We encourage you to explore these tools further and integrate them into your development workflow. Whether you're a seasoned AWS user or new to cloud services, the AWS Toolkit for Visual Studio Code, complemented by Amazon Q and Amazon CodeWhisperer, offers a comprehensive suite of features that can help streamline your projects and bring your ideas to life with greater speed and efficiency. Embrace the future of development with AWS and unlock the full potential of your cloud-based applications today.