VS Code For Non-Developers

If you think VS Code was just for developers, well, think again. In this video, I'm going to show you how you could use VS Code for non-development tasks. So, this video is going to be all about an intro to VS Code for non-engineers. Let's take a look.

Before we get started, I would like to show you where you can install VS Code, which is on this website here. On VS Code's website, there are two versions that you can install. There is the regular stable version of VS Code, but there's also what's referred to as Insiders. And Insiders, the main difference is that it has the latest features that are available to be tested. And once it's tested and ready to go for final shipment, then it will go back to the stable version and become available there.

Right now, you see download for Mac OS. If you're on Windows, you'll most likely see an option for Windows. Or you could always just go to the download button right here, and you'll have options for Windows, Linux, or Mac to download. And from here, you can also click Insiders to bring you right to where we just looked at.

When you first launch VS Code, after it's installed, you'll come to a screen that's similar to this, where you'll have a few shortcuts to some areas in VS Code, which really match areas that you could access with the icons on the left. The first is the Explorer. If I choose this, it'll give me an option to open a folder and a couple of other options that are irrelevant for this course since they're out of scope. Let's go ahead and open a folder. And I'm going to navigate to a folder that I've already created within my documents and dev folder, and it's called VS Code for nondevs.

Now, once we're here, we have like a full view of the activity bar. Right below Explorer, we have the icon to Search, where you could search content in your files and folders. Below that is Source Control, so you could track changes in your files. Below that are a few more icons that are irrelevant to us, such as Running and Debugging, since that's used by developers. Extensions is essentially a marketplace that could be relevant to us if we decide to add additional features to VS Code. You could type in a name of an extension and install it through here. Below these, we'll skip these since they're out of scope. But what is important is to just know that you can click on your account icon here to log into GitHub, which we'll need to do in order to be able to save content to GitHub. And right below this is our Settings icon, where you could come in to configure and modify VS Code. The last thing that I'd like to show is the Chat toggle icon right over here, which allows you to bring up GitHub Copilot, where you could ask it questions just like you would ChatGPT, and it will answer questions based on the content that you have open.

Now, let's turn our attention to actually using this as a non-developer, which if we are, most likely it's going to be for writing. So let's go to the Explorer and we're going to go ahead and create a file called, let's say, my content. Now, when we're writing in VS Code, there's this thing called Markdown, which we would end the name of our file with .md to indicate that it's Markdown. And it's a way to write almost like it's HTML, but in a much easier fashion. And VS Code will recognize that it's Markdown by changing this icon here to a down arrow. And it also says it at the bottom right-hand corner here.

So in Markdown, if I just wanted to put, let's say, a shopping list together, I could follow syntax where I first put the title starting with the pound sign and then say, "Shopping List." Right away, you could see Copilot is trying to give us some suggestions, but let's go ahead and just skip that. And now for a subtopic, I'll use two pounds. I'll say, "Items." And if I want to preview how this looks, I can navigate to here and click "Open Preview on the Side." And we could see how this would end up rendering if we were to publish this Markdown. So let's add some more content, such as "a very fast laptop." And I'll accept these uh suggestions here for two and three. And we'll stop there.

If I wanted to add an image, I have an image of an office photo that I can drag into my folder. And now that that's there, I can just highlight it and, keeping the focus on my code, I can drag this image and, by holding the Shift key, bring it down to line eight and boom, right there it shows it. And if I wanted to add some alt text, "photo of office." So there's a lot more to Markdown that you could learn. I actually created a video on it if you wanted to review that, and you could watch that video right over here.

"Five Tips for Note-Taking with VS Code and Git." Now, I call this file my content. But let's say I want to make it a little bit more specific. It's really a list, right? So let's call it my list. And all I did to do this is just highlight it and hit Enter. And it immediately let me rename it. So let me do that again by clicking Escape. By any file that I click, I can just hit Enter. And then it prompts me with a highlighted text for me to just type in what I want and then hit Enter. And there you go.

Now I want to create another Markdown file. So, I could actually right-click and copy this or hit Command C on the Mac. And then if I hit Command V on the Mac, it'll make a copy of that file right there. So, this is a quick way to just create another file that I could start modifying. So, why don't we change this to my blog? And now what I'm going to do is highlight the content that's in here. And using Chat, I'm going to ask it to correct some errors that it might see in my blog. So let's say I started a blog and I called it "Writer's Journey," and I have deliberately spelled journey wrong, but I'm going to put in a sentence just to get the blog started. And what you'll notice is that I can ask Copilot to correct errors that I have in there. "I was a writer that struggled to sell my story." I'm really going all out with the misspelling here. So here, if you're using VS Code, you could literally ask it to make some of these uh corrections to improve the grammar and the way that it looks. So, let me ask it to correct the grammar in my blog. I'm not even going to mention the file name. Let's see if it's smart enough to do it. Let's remove the preview here for a second. And look at that. "I can see the grammar issues in your blog post. Here are my corrections." It added an apostrophe and then it corrected my sentence. "I was a writer that struggled to sell my story." And with this, it's an extremely powerful way to get an idea of what was corrected and learn from it. And now I can go ahead and make the corrections. So I'll copy this and I can paste it.

Now, if I want to make this more visually appealing, I could literally ask Copilot to add some emojis and format it to look nicer. I don't always have to type. I can just voice command. "Can you ask my... Can you make this blog look a little bit nicer? And add some emojis and also uh finish the story. And I'll let you go ahead and do that on your own, but just add one paragraph." And look at that. Now I can go ahead and copy this. If you notice when I hover over here, there's an option to copy, insert at cursor, or apply to my blog. Let's go ahead and choose "Apply to the blog." And now it went ahead and applied the updates, and I can choose "Keep" or "Undo." Let's keep. There you go.

But now let's show some more powerful aspects of using Copilot by understanding the difference between Ask and Agent mode. Now let's create another file here. And I'm going to use my little shortcut by copying and pasting on an existing file. And I'm going to call this Copilot content. And let's highlight everything in here and erase it. We want to explain the difference between Ask and Agent mode. But you know what? Why don't we just ask Copilot to explain it itself? "Can you explain to me the difference between Ask mode and Agent mode in VS Code?" Now, it's going to explain the differences here. And the reason I'm showing you this is because you could use Copilot to explain almost anything that you're learning within VS Code. And this is great. It explains Ask mode, Edit mode, and Agent mode and gives you a little bit more details. But the short version is: Ask is just so that you could ask it questions and it responds without affecting your code or your content. Edit allows you to make some changes to your code after you've asked it some questions, but you control the pace that it does it. And then Agent mode starts making the changes on its own after it answers your question. But because this is essentially a code editor, the answers here are going to be a little bit more involved, indicating that it could build new features that span multiple files and uses terms like refactoring. This is all code-related stuff, but what I explained is essentially what it is. Agent mode does stuff for you right after you ask it. Edit mode allows you to control what Copilot is going to change, and Ask mode just answers without affecting your code.

So now, why don't we change this to Agent mode and ask it to do some work for us, such as brainstorming some ideas as a writer. "Can you give me some popular blog topics that I could try to write about? And maybe give me a sample of it? And make sure to format it nicely and use some emojis and give me five different topics." One of the best things about AI is to go through the journey of learning how to use it properly. You don't want it to do everything for you; you want to have it work with you. So, this is a great approach to let it give you ideas for something for which you could just then take over and then control the narrative the way that you wanted to.

Now, you'll notice that it says, "Let me check what's currently in the file and then add some content because it's taking into consideration work that you might have already done." Now, in my case, it was blank, but let's see what it did here. And I'm going to go ahead and keep this 'cause this looks good so far. "Five Morning Habits That Changed My Life." "Meditation in five minutes." "Reading and hydrate first." And actually, all this was under one topic, "Personal Development." If we scroll down, we'll see that the next topic is actually "Food and Recipe Sharing." At first, I was thinking that these were the different topics, but these are subtopics for number one. Number two, "Food and Recipe Sharing." Number three, "Travel and Adventure." This is great. Number four, "Productivity and Life Hacks." And last but not least, "Personal Finance and Money Tips." And look at that, towards the end, it even added "Bonus Writing Tips." How's that for giving you some general ideas to start brainstorming?

But what if it comes to creativity? How will Copilot perform if I asked it to write some jokes or maybe even poetry or some scripts that I could use as a starting point if I wanted to write a sketch? That's up next.

Now, let's go ahead and see how creative Copilot could be if we just asked it to do some creative stuff. How about seeing how fun it is? I'm going to ask it to write a joke. "Could you go ahead and tell me a joke inspired by moonlight, the moon in the sky?" There you go. "Why does a moon ever go to therapy? Because it's already comfortable going through phases." That's actually kind of funny. I don't really care that it always tries to start jokes with "Why." Could you imagine a comedian actually starting their material like that? Okay, let's ask it something else. Uh, I'm going to go ahead and change this into "Add this to the editor." Let's go ahead and just have it add it to the editor and let's see if it does it in Markdown by default. And it does. Cool.

Now, let's switch this to Edit mode. "Switching chats will end your current edit session. Do you want to keep pending edits?" And I will keep and continue. And if you recall, I had mentioned Edit mode will allow me to get requests and then determine whether or not to like move forward with it, rather than Agent mode, which does everything for you almost immediately. This time I'll ask it to write me a poem. "Can you go ahead and write a poem inspired by Moonlight?" Okay, it's going to add the poem. And I went ahead and added. It looks like it's a nice poem. And as you can see, because we're in Edit mode, it didn't go ahead and just drop it in and save it. It's letting me choose whether or not if I want to keep it or undo. I'm going to keep this. So, now we have a joke and we have a poem.

Now, let's add one more thing, in a script format. I'm going to ask it to create a scene. "Can you go ahead and create a sitcom scene, a short one that's maybe 2 minutes long with two people bantering about moonlight and its revel uh re uh revelence relevance in the world?" You know, in editing, I could have like fixed that just so you could hear "relevance." But let's see if it figures out, even with me stumbling over the words, what I actually mean. "I'll add a short sitcom scene about Moonlight's relevance to your existing file." And look at that, a two-minute scene. It has a setting with the character names and their dialogue. Let's go ahead and take a look at that in preview. See how that looks. Look at that. Our Moonlight sitcom scene.

So, we just created three different things: a scene, a poem, and a joke that could be used for inspiration for a wide variety of type of content. It's completely limitless what you could do with with Copilot. Drop in the comments what you are going to experiment with it in terms of creativity. I'm interested to know.

Now, one last thing I want to show you is that we've added several prompts here. But what happens when you want to go back in history to like some earlier prompts? I want to show you that there's an option here to "Show Chats." And right here, you can see it has like "Moonlight inspired poetry creation." But then if I go back to "Blog grammar requests," then I could go back to like the history of all these other requests that I did much earlier on. So, in case you ever want to switch between chat modes and you want to go back to what you've done before, you have this option to go back.

So, we've put together quite a bit of content. Now, what about if we want to track this in Source Control? Let's talk about that next. When we want to start tracking all this material that we have here, this is where Source Control comes into play and we want to save it to GitHub. Now, I created an intro video on how to use Git with Visual Studio Code, and you could check this out. When you do save content to GitHub, it goes into what's referred to as repositories. As you could see here, when I click on the repositories tab, you could see "Custom Chat Mode." If I click on here, it'll bring up some code that I saved. I could download code from this site, update it, and then like push it back to GitHub.

Now, in this video, I'm going to be showing you how we could do this using Copilot, which makes it a lot easier. The first thing you need to know is that you do need to be logged on to GitHub. And you could do that by going to the account icon and make sure that you sign in. If you don't have a GitHub account, you'll need to create one, which I cover in the video I just showed you. Now, I'm already signed in here, and what I'm going to do is switch to Agent mode and ask it, just like in plain English, to save all my content to GitHub. And it's going to eventually just walk me through the process. First, it's going to check to see if a repository already exists. I'll click continue. It sees that it doesn't. So, it will initialize a Git repository. And you can see here that it's already giving the name also for the repository "VS Code for nondevs" with a nice description "Content and resources for VS Code for non-developers." Now I'll click continue here. It says that authentication is not set up, but it's going to add my files to Git and prepare them so that I could push them later on. Now, to check the status of the files, and you can see the changes by the way being made on the left-hand side here. "Commit all files with an initial commit." Let's go ahead and do that. And now let's confirm by checking the commit history.

So now it's done everything locally. But we want it to be on GitHub. So let's ask it, "Can you create the repository for me here and a remote connection?" Okay, it says that authentication isn't configured in VS Code environment. "Let me help you set the repository manually." So let's go ahead and try to do this. We have the CLI installed. It's going to go ahead and check my O auth status. Let's see if we could have this done. A repository has been created and the remote connection has been established. Now, let's push your content to GitHub. What's beautiful about this is that you can work with it like it's another person. It didn't do this perfectly at first, but then I asked it again and just walked through the process. And now it says that my repository is live. Theoretically, I should be able to see it here. And look at that, "VS Code for nondevs." So now, at this point, anytime I make any changes to the code, I could just have it save it and it'll update it, and we are able to sleep at night knowing that our code is not going to be just randomly lost.

Now let's make some space here on the screen. I'll clear my terminal here, which as a non-developer, you won't be using this much, but the command to clear it is just `clear`. I could also close it by just hitting this X here. I want to show you this feature in Copilot, and they just refer to it as Copilot Vision domain. The name may have uh changed by the time that you see this. It's the ability of Copilot to examine screenshots. So, for example, on a Mac, I can hit Shift Command 4 and take a screenshot of this activity bar here and drag it up to our chat. If I click on it, it's this screenshot right here of this activity bar. And I could ask Copilot, "What is this? What is this?" And it should be smart enough to describe to me what it is. And there you go, that it's the co- it's the VS Code activity bar, and it's explaining several parts of it.

Now I can also take a screenshot of a photo like this here, and I'm going to bring this up to the chat window and ask again, "What is this?" And there you go. This feature is pretty useful, especially if you're working with legal documents or condensed documents with legal ease that you're not familiar with. So, for example, right over here, I have this residential lease agreement. Let's say I went down to where's a condensed portion here. This looks good. I can take a screenshot of this and ask Copilot to summarize this for me. I'll say, "Explain this like I'm in 12th grade. Keep it simple." And there you go. Beautiful. Drop this in the text editor. And now we have it in a text editor. If I want, I could also just take all this and just put it in a new file since really it has nothing to do with joke scenes and creative content. So I can come to File, New File, put in lease.md for Markdown and save it with my other files. Just to be consistent, let's capitalize L.

Now, if I'd like to save this to GitHub, it should be a lot easier this time around. I'll execute this command here. And this is going to end up adding the modifications that I made in addition to the new file that I've added. And we will commit all this. And now we can push to GitHub. And look at that. It gives us a link so we can see our content.

Now, there's a lot that Chat can do in VS Code, but it can't do everything. And sometimes there are features that you just need to use something called MCP in order to add new capabilities and tools to it. MCP stands for Model Context Protocol, and it is beyond the scope of this course, but I did think it was worth a mention and wanted to at least point to another resource that demonstrates it. To learn more about MCP, you could check out this video here where my colleague James Montagna will show how you could configure MCP within VS Code to do something straightforward, such as getting the time in a different time zone. But there's so much more you can do with MCP. So definitely check that out.

One last thing that I'd like to show you is that while you are using VS Code to write content, sometimes there might be some other documents that you want to refer to and get information from. You could actually attach documents into Chat here. And in fact, why don't I go ahead and ask, "What attachments does VS Code Chat support?" Tells us what it supports, such as Markdown, text, JSON, all these files here. So, let's add a couple of examples. I've attached a JSON file, a CSV file, and a YAML file. The YAML file looks like this with this content. The CSV file looks like this. And this. Now, let me ask it to explain what's in each of them for me. "Can you go ahead and tell me what are in each of these files that I just attached?" Now, imagine these were really huge files with lots of content. It's amazing that we could easily get Copilot to just explain the content, and then if you needed to like grab and copy some of this and put this in a Markdown, you can easily do that as we did earlier on.

Actually, there is one more last thing I want to circle back to which I referenced earlier in the video, which were the extensions. Even if you're not a developer, I do want to mention how there are some extensions that might just be fun to install and use even if it has nothing to do with development. There's a large marketplace available, and the extensions that you see here, most were downloaded from this marketplace here, and some are just for fun. There's a really cool one called Pets. Almost 2 million people installed it. Now, I could try to download it here, but it really doesn't make sense. Let me go straight to our marketplace and type in Pets, and I can see it right from here. I'll choose Trust.

Now that I have it installed, you'll see that there's an icon here of what looks like a squirrel. And if I go to my code and click the squirrel icon, now I can choose a pet that I want to have while I use my code. And now we have like, I believe I chose a a fox. And now life will be a lot more fun while you execute all your creative writing in VS Code. And writing is no longer lonely.

So what did you think? See, there's a lot that you can do, even if you're not even focused on coding with VS Code. So, there's going to be more features coming up, too. So, make sure that you're subscribed to the channel and keep up to date with all the new things that are coming out, especially with AI now. Things are moving so fast. If you like this video, you might also want to check out this video here. That will be it for now. So, I will see you in the next one. Thanks for watching.