{"id":1122,"date":"2025-04-23T13:00:12","date_gmt":"2025-04-23T13:00:12","guid":{"rendered":"http:\/\/www.diveintoaccessibility.com\/?p=1122"},"modified":"2025-04-30T10:23:04","modified_gmt":"2025-04-30T10:23:04","slug":"how-to-integrate-chatgpt-with-visual-studio-code","status":"publish","type":"post","link":"http:\/\/www.diveintoaccessibility.com\/index.php\/2025\/04\/23\/how-to-integrate-chatgpt-with-visual-studio-code\/","title":{"rendered":"How to Integrate ChatGPT With Visual Studio Code"},"content":{"rendered":"
In the past, if you ran into a coding issue in Visual Studio Code (VS Code) and wanted help from ChatGPT, you\u2019d usually have to copy your code, paste it into ChatGPT, type your question, then copy the answer and paste it back into VS Code.<\/p>\n
This back-and-forth could be a bit slow and interrupt your flow.<\/strong><\/p>\n But now, with the latest version, ChatGPT can work directly with apps on your desktop, including VS Code<\/strong>. This means ChatGPT can \u201csee\u201d the files you have open when you ask for help, so it understands the context without you needing to copy and paste everything.<\/p>\n Let\u2019s see how this works.<\/p>\n See Also: How to Use ChatGPT with macOS Apps<\/a><\/p>\n First, you need to install the official ChatGPT extension for VS Code<\/a>.<\/p>\n Next, you will need to make sure that it\u2019s setting in Settings > Works with Apps > Enable Work with Apps<\/strong> is on.<\/p>\n First, make sure that ChatGPT is opened and running<\/strong>. Then, type Option<\/kbd> + Space<\/kbd>. This shortcut will open the ChatGPT \u201cCompanion Chat\u201d window on top of VS Code.<\/p>\n Now, we\u2019ll see how to use ChatGPT with VS Code.<\/p>\n 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.<\/p>\n The best part? You don\u2019t 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.<\/p>\n Besides making changes to existing code, ChatGPT is also smart enough to generate boilerplate code to help you get started quickly.<\/p>\n In this example, I created a new file and asked it to generate the code to add a submenu in the WordPress dashboard.<\/p>\n What\u2019s great is that it understands the structure of your codebase and follows the same coding style as the other files.<\/p>\n 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: What I like is that the generated tests cover both the \u201chappy\u201d and \u201cunhappy\u201d paths<\/a>, which makes them quite thorough.<\/p>\n However, ChatGPT doesn\u2019t yet support creating these tests in a separate file. That means you can\u2019t just click the \u201cApply\u201d<\/strong> button. You\u2019ll need to copy the generated code and paste it into a new file yourself.<\/p>\n 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: If you\u2019re 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: Tip<\/strong>: Select the part of the code you want to improve before pressing Option<\/kbd> + Space<\/kbd>. This way, ChatGPT will focus only on the selected code instead of trying to update the whole file.<\/p>\n If you\u2019re concerned about the security of your code, you can ask ChatGPT to review it for potential vulnerabilities. While it\u2019s 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.<\/p>\n Just select the code you want to analyze and use a prompt like: 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.<\/p>\n ChatGPT and VS Code make a great pair. While it might not be as tightly integrated or as powerful as GitHub Copilot<\/a>, ChatGPT is still a helpful assistant. It\u2019s a solid alternative, especially if you prefer an AI that\u2019s less intrusive and only steps in when you ask for it.<\/p>\n The post How to Integrate ChatGPT With Visual Studio Code<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" In the past, if you ran into a coding issue in Visual Studio Code (VS Code) and wanted help from ChatGPT, you\u2019d usually have to […]<\/p>\n","protected":false},"author":1,"featured_media":1124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1122"}],"collection":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/comments?post=1122"}],"version-history":[{"count":3,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1122\/revisions"}],"predecessor-version":[{"id":1133,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1122\/revisions\/1133"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media\/1124"}],"wp:attachment":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media?parent=1122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/categories?post=1122"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/tags?post=1122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n<\/figure>\nEnabling Integration<\/h2>\n
\n<\/figure>\nExample: Using ChatGPT With VS Code<\/h2>\n
Batch Editing<\/h3>\n
\n<\/figure>\nGenerating Boilerplate<\/h3>\n
\n<\/figure>\nGenerating Tests<\/h3>\n
Create tests for all the public methods in this class.<\/q><\/p>\n
\n<\/figure>\nWriting Inline Docs<\/h3>\n
Generate inline docs for the methods within the class. Describe what each method is used for in as detailed as possible.<\/q><\/p>\n
\n<\/figure>\nImprove Code Readability<\/h3>\n
Make the code more readable.<\/q><\/p>\n
\n<\/figure>\nFind Potential Vulnerability<\/h3>\n
Check this code for security issues.<\/q>.<\/p>\n
\n<\/figure>\nWrapping Up<\/h2>\n