How to Integrate ChatGPT With Visual Studio Code

In the past, if you ran into a coding issue in Visual Studio Code (VS Code) and wanted help from ChatGPT, you’d usually have to copy your code, paste it into ChatGPT, type your question, then copy the answer and paste it back into VS Code.

This back-and-forth could be a bit slow and interrupt your flow.

ChatGPT VS Code integration interface

But now, with the latest version, ChatGPT can work directly with apps on your desktop, including VS Code. This means ChatGPT can “see” the files you have open when you ask for help, so it understands the context without you needing to copy and paste everything.

Let’s see how this works.

Enabling Integration

First, you need to install the official ChatGPT extension for VS Code.

Next, you will need to make sure that it’s setting in Settings > Works with Apps > Enable Work with Apps is on.

ChatGPT VS Code settings panel

Example: Using ChatGPT With VS Code

First, make sure that ChatGPT is opened and running. Then, type Option + Space. This shortcut will open the ChatGPT “Companion Chat” window on top of VS Code.

Now, we’ll see how to use ChatGPT with VS Code.

Batch Editing

One powerful way to use the ChatGPT integration with VS Code is to make changes to multiple functions, classes, variables, arguments, or just strings all at once. In the example below, we ask ChatGPT to rename the plugin hooks.

ChatGPT batch code editing example

The best part? You don’t need to copy and paste any code. ChatGPT can scan the code directly and suggest edits. It even shows a diff and gives you a button to apply the changes with a single click.

Generating Boilerplate

Besides making changes to existing code, ChatGPT is also smart enough to generate boilerplate code to help you get started quickly.

In this example, I created a new file and asked it to generate the code to add a submenu in the WordPress dashboard.

ChatGPT WordPress submenu code generation

What’s great is that it understands the structure of your codebase and follows the same coding style as the other files.

Generating Tests

Another handy use case is generating tests. In this example, I asked ChatGPT to create tests for all the methods in a class. The prompt I used was: Create tests for all the public methods in this class.

ChatGPT test case generation example

What I like is that the generated tests cover both the “happy” and “unhappy” paths, which makes them quite thorough.

However, ChatGPT doesn’t yet support creating these tests in a separate file. That means you can’t just click the “Apply” button. You’ll need to copy the generated code and paste it into a new file yourself.

Writing Inline Docs

Another common utility is to generate inline documentation. In this example, I asked it to add inline documentation for the class and the method with the following prompt: Generate inline docs for the methods within the class. Describe what each method is used for in as detailed as possible.

ChatGPT inline documentation generation

Improve Code Readability

If you’re not sure whether your code is easy to read, you can ask ChatGPT to help make it clearer. In this example, I asked it to improve the readability of a piece of code. You can simply use a prompt like: Make the code more readable.

ChatGPT code readability improvements

Tip: Select the part of the code you want to improve before pressing Option + Space. This way, ChatGPT will focus only on the selected code instead of trying to update the whole file.

Find Potential Vulnerability

If you’re concerned about the security of your code, you can ask ChatGPT to review it for potential vulnerabilities. While it’s not a replacement for a full security audit, this can be a great first step to spot common issues like hardcoded secrets, unsafe function usage, or missing input validation or sanitization.

Just select the code you want to analyze and use a prompt like: Check this code for security issues..

ChatGPT code security analysis

I find the suggestions are good and valid. Because it does not understand the full picture of the code, it does not offer to apply the code updates immediately as you need to consider if this is something that you really need to apply.

Wrapping Up

ChatGPT and VS Code make a great pair. While it might not be as tightly integrated or as powerful as GitHub Copilot, ChatGPT is still a helpful assistant. It’s a solid alternative, especially if you prefer an AI that’s less intrusive and only steps in when you ask for it.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail