Can you use ChatGPT in VS Code??

you've no doubt seen and probably even used chat GPT an AI that can answer questions summarize text translate languages chat with humans and write code in this video we're going to take a first look at the new chat GPT like experience that's coming soon to vs code and we're going to see how to use it to get the most out of it and make it work for you the new chat functionality is enabled by the GitHub copilot extension and for now you'll need to sign up for the waitlist to get this new experience Link in the video description once that's installed and you've signed into GitHub co-pilot there's a new chat icon in the activity bar this opens a chat sidebar that functions very much like chatgpt with the important difference that co-pilot knows about your code and the tabs that you have open you don't need to copy things in and out of a chat window and just like chat GPT you can have a conversation with it about pretty much anything programming related for instance we might ask it how to build a website with node and it gives us some suggestions but they're quite generic and Broad just like if you were talking to a human the more detail you give co-pilot the better answer you get back for instance if I ask it to create an Express app using typescript and View for the front end it gives me actual code and the steps that I need to take to create that app if we click this copy button we can copy the code if we click the add to file at cursor button it adds the code to the file at the cursor now I've been a developer for a while and I know a thing or two about Express and I've got a mostly completed Express app here I know that I need routes views and models it's still up to me to structure this app correctly and I'm not always a hundred percent sure that I'm doing this and that causes a feeling of resistance in me towards this whole project but copilot is your pair programmer so I can ask copilot what it would recommend and I see that it's saying that I should have a folder for controllers that contains all of my route logic interesting I kind of like this nice pattern and separation of concerns I might implement this chat in the sidebar is great for longer conversations and bootstrapping code but the whole point of putting the chat in vs code is to reduce your context switching and we can reduce it even further by getting chat out of the sidebar and into your actual coding flow so we've added a brand new inline chat experience that you can open right from within your code for instance here in this HTML file I know that I want to iterate over the to-do's array but I can never remember what the template syntax is for that so let's just ask copilot to do it and it knows about the CSS framework that I've included here so it attempts to use those styles but I don't like this answer that it's given me I don't like this table layout so I'm gonna ask it to use an unordered list instead iteration is key to using copilot effectively as you aren't always going to like the answer that it gives you so this new inline chat experience makes it easy to iterate with copilot to get you to the right place now not only does copilot know about my code but it knows about my vs code there are some special slash commands that you can use in this box to scope the context for your chat I can use the slash DS code command and ask it to attach the debugger and it gives me a launch config which is exactly what vs code needs to do this and its knowledge of vs code is super handy for finding things like settings especially the Obscure ones for instance if I like the minimap but I don't like it when I'm writing markdown I can ask copilot how to disable the minimap while editing markdown and it gives me the exact setting that I need we're working on fine-tuning this context experience so that you can scope your conversations and get much more accurate answers and there are other slash commands in here as well the explain command is super handy when you come across some code that you've never seen before or you have zero memory of writing like when you get assigned an issue on an app that you haven't touched in ages or if you're just starting out in a new language the explain command will tell you what the code is doing in this case this is a react component that conditionally displays content if a user is logged in that's good to know let's open the inline chat here and ask it to document this for the next time I see it and can't remember what it's doing we probably need a unit test here as well so we'll use the slash test command to create one and we'll double check the code before we run it because remember you are still the pilot copilot is just here to help the debug command can tell you why your code isn't working or what you can do to make your code more robust and the fix will try to fix this selected text for me now I may not like the fix that it gives me but at least it gives me an idea for how to fix it and therefore a starting point for my brain if you want to try out this new chat experience click the link in the video description to get on the waitlist now and to learn more about what we're going to be doing with Visual Studio code and AI powered by GitHub Copilot happy coding

Channel: Visual Studio Code

Views: 103,535

Keywords: vscode, #chatgpt, #ai, #github, #copilot

Id: gDJzr9DBKTI

Length: 5min 24sec (324 seconds)

Published: Thu Mar 30 2023