Learn to find, install, manage, and use extensions from the Visual Studio Marketplace.
- [Narrator] Visual Studio Code supports a rich ecosystem of extensions and it makes the process of finding, installing, and managing extensions very easy. There are a couple of ways to find extensions for VS Code. One way is to simply go to the extensions marketplace. In the browser, enter the URL marketplace.visualstudio.com and then select the Visual Studio Code tab. From here, you can search for extensions as well as see what's featured, popular, and trending. You can also do this from within VS Code itself.
So let's go back to the editor, and now let's go to the extensions view. And you can see here on my screen that I have already installed a couple of extensions. So your version might look a little different from mine. If you look in the _css folder, you'll notice that I have a file named, "test.sass." If I open it, you'll notice that there's no special formatting or code syntax coloring for it. So let's fix that with an extension. So back in the extensions view, I'm going to search for sass-related extensions. All right and here's one that looks promising.
So, to view the associated documentation for an extension, select the extension in the list. A page will appear showing everything you need to know about how to use and configure the extension. And you can do this with extensions that are already installed also, by the way. So I'll go ahead and install this extension, and once it installs let's make use of it. Now I need to reload VS Code so that the extension completes installation. So I'll do that. And now you can see that the sass extension is installed here in my list of extensions.
All right, so let's go give it a try. So let's go back to the file list and let's open test.sass and you can see that the sass code is now being color-coded. Let's add a variable using the snippets that are supported by the extension, and we'll get to snippets in a little bit. So I'll type "var" and you can see that the auto-complete pop-up shows that there's an option for inserting a sass variable. So I'll hit the tab key, and you can see that the variable construct is inserted. Now, again, we'll get to snippets in a little bit, but this demonstrates that extensions can do quite a bit inside Visual Studio Code.
Managing extensions is also easy within the app. Each extension has a small gear icon next to it. Using this icon, I can either disable the extension just for this workspace, for all workspaces, or I can uninstall the extension. At the top of the extensions list, there's a menu and this menu gives me the ability to quickly search for popular extensions, extensions that are recommended for my project based upon the kinds of files I have in it, or outdated extensions which apparently none of them currently are.
Now it's impossible for one tool to fill every need right out of the box, and this is where extensions come in. I highly recommend you invest some time customizing your installation of code with extensions. The return on investment will be well worth the effort.
Joe Marini kicks off the course by taking you through the app's user interface, and showing how to work with its basic editing features. Next, Joe demonstrates how to customize VS Code by configuring preferences, setting your own keyboard shortcuts, and working with snippets. He also explains how to maximize your productivity by installing and managing extensions from the Visual Studio Marketplace. Plus, he discusses how VS Code works with folders and collections of files, helps you understand the IntelliSense feature, and dives into the app's advanced code editing features, such as automatic formatting.
- Installing Visual Studio Code
- The VS Code UI
- Understand how VS Code works with built-in Git integration
- Customizing VS Code
- Configuring preferences
- Setting keyboard shortcuts
- Using extensions
- Working with snippets
- Using VS Code to edit different parts of the same file
- Using multiple selections
- Understanding how VS Code works with JSON files