Visual Studio Code is one of the most popular code editors used by software developers. While it has many great features built-in, there are a lot of extensions you can install to increase your productivity.
We just published a video on the freeCodeCamp.org YouTube channel that will teach you about ten Visual Studio Code extensions.
Raman Hundal developed this video. Raman is a software developer who has used many different extensions. In this video he shares some of his favorite VS Code extensions.
In this course, you will learn about the following extensions:
- GitLens
- LiveShare
- Pieces
- Better Comments
- Turbo Console Log
- Code Runner
- Import Cost
- Prettier
- ESLint
- Docker
And people have been sharing even more great extensions in the comments of the video.
Watch the video below or on the freeCodeCamp.org YouTube channel (30-minute watch).
Transcript
(autogenerated)
In this course, you will learn about popular Visual Studio Code extensions that can help improve your productivity.
Hey, everyone, my name is Ramin, and I'm a full stack developer.
And today I'm going to talk about 10 VS code extensions that are going to make your life easier as a developer, and also have just made me more productive.
Below this video is a list of all 10 of those extensions along with the places you can go to download them.
So let's get started.
So the first extension we're going to talk about is get lens.
Get lens is a VS code extension that allows you to visualize get context around files, but also lines of code, you can go ahead and search for get lens in the VS code extension marketplace, and it will probably be the first search result that pops up.
Now it's published by get cracking.
And if you see that, go ahead and install.
And after you're done installing, you're going to want to reload your window for the extension to take effect right away.
For Mac, you can press Command Shift P for Windows Ctrl, Shift P, and it's gonna open up the command palette, and just type in reload window and go ahead and reload it.
Now what you're immediately going to notice is wherever your cursor is, there's going to be this unobtrusive annotation.
Basically, it's going to say the git commit author, the git commit date, and the git commit message.
And now if you hover that line, you're going to get a better visualization of all that information.
On the bottom left, you're going to notice a git commit number, if you click that, you're going to get a bunch of options, you're going to be able to reveal the commit in a sidebar, you can revert the commit, you can reset the commit, and so on and so forth.
In our particular case, we're going to review this commit in a sidebar.
And what you're going to see is this tree that shows every commit, and it's already expanded the committee were interested in, you can go ahead and interact with this tree, I'm just going to click the calendar view file because it says it was added.
And I can see all the additions that were made in this file.
In this particular case, the whole file was added.
And now if you're interested in looking at other commits, you can unexpanded this and you you can expand other commits at will.
And if you go up one level, you can see all the things that Git lens allows you to do.
It allows you to use source control, it allows you to use this commits view, a file history view, you can look at all your local branches, I only have one, that being the main branch, you can look at your remote branches.
Again, I only have one which is the remote main branch, you can look at git stashes tags.
And there's this Search and Compare feature where you can search for commits by message, author, file, etc.
Now, if you go back to this hover menu, what you're going to notice is a globe icon.
What this globe icon allows you to do is look at your commit and GitHub.
Before you do this, you're going to want to sync with GitHub.
In my particular case, I've already done this, it's going to be an icon right here.
And what it will do is pull in the picture of the author from GitHub, and also allow you to click this icon.
So I'm going to go ahead and click this icon.
And it's going to show me all the changes in this commit through GitHub.
Now we're going to go back.
And the final thing I'm going to show you is this team option.
This allows us to open a live share session with the author of this commit.
In this particular case, we haven't quite installed live share yet.
I'll show you how to start sessions and interact with live share later in this video.
But this is just a handy feature to know about.
Now at the bottom, you're going to see this bar blame option.
And basically, this shows us the last author on this file, along with the last commit date.
And then at the top we're going to see is all the authors on this file.
In this case, it's just me.
So it's only showing me as a singular author.
But if there's multiple authors, it will show the name of all the authors along with how many there are.
I often find this really helpful when I need to tag people in prs.
Often the best people to tag on a PR are the ones who have either authored the file or worked with it before.
Now that's all the things I'm going to touch on about get lens in this video.
If you're interested in learning more about different features, be sure to look at the documentation.
And I hope you find this useful when you're looking for the right people to tag on PRs, or you're just trying to visualize get better.
During this time when remote work has become so normalized.
I've often found it really hard to collaborate with my peers VS code.
Live share is an extension that has made collaboration and pair programming incredibly easier.
Live share is a way for me to host sessions with up to 30 people where I can debug files with others pair program and even teach when I'm using live share.
I can also share various resources Like a server, my terminal, or my files straight through my session using Read and or write permissions.
Right now I'm going to hop on a call with my buddy, Liam, who's going to help me debug an issue with my calendar app using VS code, live share.
To kick things off, I'm going to click down here on my name, this is going to open some options, it's going to say start a collaboration session, start read only collaboration session or join a collaboration session.
In my case, I want to start one.
And then what I'm going to do is open this again.
And I'm going to copy my link.
So I can invite my friend Liam to help me with this bug I've been struggling on.
Now, my friend, Liam has joined the call, and I'm going to start an audio call with him.
So I'm going to go ahead and click on that bar down there and start or join audio call.
This is going to start up a call with Liam, and he'll be joining shortly.
What you're also going to notice in the meantime, is there's this live share chat.
The live share chat has also said Liam has joined, you could opt to chat with others through this, but in my case, I find it a lot easier to pair program over a call.
Hey, Robin, can you hear me? Hey, lamb.
How's it going? It's going well, it's going well, I heard you were having calendar problems.
Yeah.
So there's this problem with this calendar app I made.
Basically, I just I create an event.
And after I create the event, it goes on my calendar.
But then when I go to delete the event, it doesn't delete on the first time around, but it deletes on the second time I try.
Take me to your calendar to lead function.
Yeah, I think that's called delete event.
Okay, yeah, it's online.
156.
Okay.
I think you're gonna want to async await this calendar service, delete events.
Okay.
Try saving that and give it a shot.
All right.
I'll try saving that.
I'm going to try this out real quick, just to make sure that works.
Oh, cool.
Wow, that worked.
Hey, I'm happy to help.
Awesome, thanks.
Yep.
See you later.
Bye soon.
And I'm going to go ahead and stop that collaboration session, which is also going to end the call with Lam.
And that's the power of VS code live share, you can immediately share your session and your screen with someone else.
But also set up an audio call, and a chat straight in your VS code editor.
pieces is an AI assisted code snippet manager that auto classifies languages helps save and reuse code snippets, and allows you to convert screenshots of code to actual text, among many other things using their VS code extension and other integrations.
So to get started with pieces, you can go straight to code pieces.
Up on the top right, you can see this get pieces button.
When you see that go ahead and click it.
And it's going to take you to an installation page for pieces O S, which is basically the engine that powers all integrations in pieces, including the VS code extension.
Depending on your machine, you're going to want to download for Mac or Windows.
In my case, I want to install for Mac.
So after the initial installation, I want to get both pieces OSs and pieces for developers, pieces for developers looks like this.
And it's just the GUI for my code snippets, which I'll touch on a little bit more later to make the most of my setup.
But before we touch on pieces for developers, let's hop into VS code and install the pieces for VS code extension.
So when you go into VS code and type in pieces, the first result is probably going to be pieces for VS code.
If you see this, you're going to go ahead and install and you're going to immediately see this new pieces icon upon installation on the left.
So right now I don't have any code snippets.
So to empty, what I'm going to want to do is add a code snippet.
In practice, the kind of code snippet I want to add is something I might reuse a lot or something I might reference or maybe just something I found especially difficult to write or create that I want to keep for safekeeping.
So let's just say this update rain function fits one of those criteria.
So I'm going to go ahead and save that to pieces with a right click and then save to pieces.
What we're immediately going to see is there's a new top level directory called JavaScript from pieces Auto Classification of the snippet.
And then if you expand that directory, you can click on the JavaScript snippet, and you're going to see the update range function, you can also hover the snippet, and it's going to show you a preview of that function.
What I'm going to do now is delete the update range function in my calendar Dot View file.
And let's just say, you know, I'm working on a project I want to pull in that update range function, all I have to do is go to my snippet, and press Insert snippet.
And it saved the way I formatted this function, and also pulled that piece of code directly into the place I wanted the snippet to be put in.
Now the last thing I'm going to want to do is rename the snippet to something more appropriate, I'm just going to pick the function name, which is update range.
And now it's saved as update range.
Awesome.
Just to recap, what pieces allows me to do is store my code easily straight in my ID, and also gives me the ability to pull that code out.
So now where pieces starts to become really powerful is when you start using the other integrations along with VS code.
So what I'm going to do now is go to Stack Overflow.
And I'm looking at this cohort analysis sequel snippet.
Now I find this cohort analysis sequel snippet really helpful.
And it's also kind of hard to write.
So I want to go ahead and save that to pieces.
Since I have the Google Chrome extension.
What I'm going to see on the top right is this pieces icon.
And this allows me to click the icon and directly save this code snippet to pieces without leaving StackOverflow.
So I'm going to go ahead and click that.
And then what I'm going to do instead of looking in VS code is open up pieces for developers.
What I'm going to see in pieces for developers is an Auto Classification of the sequel snippet, which is the cohort analysis I just showed you.
And then if I click on this little information view, it's going to give me more metadata about this particular snippet.
It pulls in the title from StackOverflow as a description, it pulls in the link of the StackOverflow question, and it pulls in the origin, which is a pieces Chrome extension.
And depending on what extension or what integration you save with using pieces, it'll have a different origin.
Now for search, I can add tags, so I'm going to add cohort as a tag, most I'm going to add SQL as a tag, I'm going to write cohort, and SQL has a tag.
And this is just generally going to help me search better using pieces for developers.
And now if we go back to VS code, we can open our pieces explorer and refresh the tree.
And if you expand the SQL section, you'll see the SQL snippet we just created, which is the cohort analysis.
Cool.
Now the second practical use case I found for pieces integration, especially pieces for developers is converting screenshots of code to actual code I can use.
So oftentimes, when I'm watching tutorial videos, I don't want to pause the video or leave the video, because I'm really trying to understand the subject I'm learning.
But I do want to take a piece of code or copy the piece of code for safekeeping, or I just want to run it locally to test it out while I'm watching the video.
pieces can be really useful for this.
So this particular video is a video on Free Code Camp that just came out for building a live stream using flutter.
I want to copy these three lines of code, which is Dart.
And I'm going to convert that to code using pieces for developers.
So immediately when I drag the screenshot over to pieces for developers, it identifies it as an image with Dart.
There's this option to view as code on the right hand side.
I'm going to go ahead and click that.
What I get is copyable code from pieces for developers straight from the screenshot.
And just to show you, I'm going to open up my IDE.
I'm going to copy it and you can see I copied that code straight from pieces for developers.
Better comments is a VS code extension that improves your comments by helping you annotate and document code more efficiently using a custom tagging system.
After you're done installing better comments.
You're going to want to open up your command palette and type in open Settings and you're going to get this JSON option.
What Go ahead and click that.
So after we click that, we're gonna type better comments.
And IntelliSense is going to kick in and show this better comments dot tags, go ahead and pick that.
And this is going to show all the default settings for better comments.
So there's a couple of tags that come out of the box for better comments.
There's the alert tag using an exclamation mark, there's a question.
There's a commenting tag, there's a to do tag, and there's a catch all tag.
And within a tag, there's a color property, there's a strikethrough and underline a background color, a bold and italic property.
And each of these can be manipulated differently, in order to make a unique tag that anyone can identify in your code system or can be made for you to read easier.
So before we go ahead and dive into code, let's add an additional tag here.
And we're going to create a bug tag.
And then I'm going to change the color.
So we can identify this to some random color here.
Go ahead and save this file.
And I'm also going to reload my window again, just so this kicks in.
Cool, so that bug tax should show up in our code.
What we're going to do is suppose we just want to add a comment on line 15.
So I want to add a comment saying this is a bug and it has a race condition.
So bug fix race condition, here.
And now better comment is taking the tag from the settings dot json file and applying the properties we set over there.
Immediately.
What I'll be able to tell with the use of better comments is that any pink comment is probably documentation for a bug.
And suppose this race condition is just you know, it's a very big deal.
And we want to make sure people know about this, we can switch it to an alert.
And it changes to that orangish color that was set by better comments.
We can also look at different tags, like a question mark, which is blue.
And you could change each of these the way you want to in our settings dot JSON file.
Say you know, we had a bug comment.
And now we've decided this bug is fixed.
But we want to leave the comment in the code base.
We can use the better comments strike their feature, and it will just strike it through without getting rid of the comment.
So essentially, what better comments has done is it's made it easier to visualize any comments in your code base.
And if you're using similar settings, or if everyone on your team is using it, now they're going to be able to associate different color comments to different types and different problems.
Let's just admit it.
We all end up console dot logging a bunch when we're trying to find an error or a bug.
And I'd love to say I use the debugger every time.
But that's just not the case.
And that's where turbo console log comes into play.
Turbo console log is basically a VS code extension that makes logging a lot easier.
You can easily add detail to console dot log messages, delete these messages all at once, and even comment them out altogether.
So I'm going to dive in real quick.
Basically, suppose that there is a bug I'm trying to find on this calendar Dot View file.
And I want to console that log a few things that might help me track down this bug.
I'm going to go ahead and highlight a couple of variables.
And I'm going to use Turbo console log to help me create logging messages for them.
So for this event variable, I'm going to press Ctrl option L.
And that will create a logging message for me on Mac.
for Windows users, you're going to do Ctrl Alt L.
And then I'll pick a couple more variables or do this event here.
CTRL option l do this type here Ctrl option L.
And now we have a couple of console dot logging statement.
Cool.
This is what a file ends up looking like.
And if we look at these console dot log statements, what we have is each console dot log message has the file name, the line number associated with the comment, the function and then the exact variable name.
So now suppose we think we've solved the problem we're trying to track down.
And we want to comment all these lines out to make sure the code works without getting all the extra noise.
For Mac users, you want to do Option Shift C and for Windows users, you want to do Alt Shift C.
So we're going to do Option Shift C since I'm on Mac, and now we've commented out all lines.
The only thing to remember here or the only thing to know is that all these keyboard shortcuts I'm showing you will only work for logging statements created by turbo console log, if you're creating your own logging statements, and then also creating some by turbo console log, these keyboard shortcuts won't work for the ones that you created yourself.
Now, after we've commented, all these console dot logging statements, we've now realized that we haven't tracked down the error.
So we want to get these back in action.
For Mac users, you would want to do Option Shift U.
And for Windows users, you want to do Alt Shift U, and that will uncomment all those commented console dot log statements.
So the last thing left here is, you know, you're done debugging, you want to get rid of all these console dot logs.
Historically, the way I usually do this is I just search for them and get rid of them through a search.
But with turbo console log, all you need to do is press Option Shift D for Mac or Alt Shift D for Windows.
And it will get rid of all console dot logging statements at once.
Code runner is a VS code extension that allows you to run code snippets and files easily with just a highlight in a right click.
So I'm going to go ahead and open this loop dot p y file and show you how code runner works.
Let's say I have this function in my code.
It's called Create List.
And basically it just creates an array or list of numbers from zero through nine.
I want to show you how this works.
Right now.
I'm just going to print this list and use code runner highlight all this code and just right click run code.
Cool.
It showed me that lists 0123456789.
And let's say you know in a practical scenario, I'm looking at this code and I'm like, Well, I can actually refactor this to be a lot better.
But first, I want to make sure it's being refactored correctly.
So what I'm going to do is make my refactor my refactor is a list comprehension.
So let's say i for i in range 10.
And let's just make sure this is returning the same thing as our final variable over here.
I'm going to go ahead and highlight this again, real quick run code, I see the same result for both.
So now all I'm going to do is take my refactor code, put it in the return value and get rid of all this extraneous code.
And as easy as that I made the refactor and now I know it works.
And hopefully after this, I tested against my tests, and that also confirm it works.
But I've often just found code runner really helpful when I'm trying to make these quick refactors.
And get an immediate response on whether this change is working or not.
As developers, we know the importance of fast applications and websites.
And one of the things that affects performance is the size of your bundles.
Now, a slow application or website can lead to lower SEO rankings, more users bouncing off your websites or applications, and just generally a bad user experience.
So that's where import cost comes into play.
import costs forces you to look at the size of your third party JavaScript packages straight in your editor.
And you can fix any large import right away.
So after you've installed import costs, go ahead and open a j s file.
In my case, I have this main dot j s file with a couple of third party imports.
What I immediately notice is lodash is my largest package, but I'm only taking this for each function.
So how can I make this smaller? I can make this smaller by maybe just deconstructing? No, that doesn't exactly work.
import costs as it hasn't really made a difference in the size of the package I'm importing.
Well, let's use a sub module to just grab this for each function.
And there we go.
Now it's down to 5.7 kilobytes.
And in real time, import cost tells me that I have made my bundle smaller.
And this just instills best practices.
So when you're pushing up a new application, or when you pushing up a new website, you're making sure your third party packages are not bloating your bundle.
Now prettier is an opinionated code formatter for various web development languages, such as JavaScript, TypeScript, JSX, etc.
My prettier set up in a way where formats all JavaScript files upon it being saved, which is just a huge convenience because it enforces code styling that I've customized through my own settings.
Now there's two caveats to prettier.
The first caveat being that if you don't like your code being rewritten, which is essentially what prettier does with its automated code formatting, You might not like it so much, it can be often really difficult to set up with a linter.
But once you get it set up, it could be great in conjunction with IES lint, which is the next extension we'll talk about.
To start off, we're going to look at prettier settings, which will dictate how prettier will format its own files.
So on Mac, you're going to do Command comma, on Windows, you're going to do Ctrl, comma.
And you can type in prettier.
And it's going to open all the prettier related settings.
There's a setting for arrow functions, there's a setting for bracket spacing, and so on and so forth.
I'm just gonna go with the default settings for the sake of this video.
But if you're inclined to use a customized settings file, or you want some sort of customization, so you're prettier, doesn't overwrite some styling that you're used to, you can go ahead and customize your print here.
What we're going to want to do next is search for format on save up here.
And you want to make sure this box is checked.
What it's essentially going to allow you to do is format the file on Save using your prettier settings.
Now the last thing I want to touch on before I show you a demo of prettier is that sometimes I've struggled to set up prettier because another extension conflicts with it.
In my case, that extension was beater abuse extension, and I had to set it up in a way to let that extension though that prettier is going to be the default format.
So I'm going to show you how I did that.
I'm going to open my settings dot JSON file.
And essentially what I did is there's some Vietor settings that sets a default format.
For all the files that I want prettier to format, I did specify that prettier is the default format for that file, not Vietor.
So what you want to go ahead and do is if you find that your printers not working, you should check if any of the other extensions you have are conflicting with it.
So the last thing I'm going to do over here is popping up in this calendar Dot View file.
And I have a bunch of poorly formatted code.
I want to format this properly.
According to the settings I have my prettier configurations.
I'm going to go ahead and save this file, and prettier automatically enforces all of its styling.
As you can see, it's pretty seamless and it is often used in conjunction with the linter es lint, which is going to be the next extension we're going to talk about.
The EES lint package is a winter and for matter that statically analyzes JavaScript code to find problems.
These problems can be both stylistic and coding ones.
Some of the coding ones are stuff like a missing variable name, or using a let where a constant makes more sense.
Now in this video, we'll be talking about the ES lint extension mostly which works with the Eastlands package to help you visualize linting errors along with suggestions on how to fix them.
And the VS code extension for ES lint gives you quick fixes directly in the editor, which are super helpful in picking up mistakes or poorly written code in real time.
So to get started, we'll have to make sure our project has ESLint first, and we also have to make sure that the IES lint package is installed globally.
To do so you can go ahead and run this command over here, which is npm install dash g es lint to install it globally.
And then in my case, I already have it installed globally.
So I'm going to go to the next step, which is bootstrapping my project with IES lint.
So after it's installed globally, go ahead and type in ies lint dash dash N it and you're going to be prompted with how to set up Eastlands for your project.
In my case, I want the full capabilities of Eastland.
So I'm going to check it for syntax find problems and enforce code styles.
And then my modules are JavaScript modules.
The framework I'm using for the Calendar app is Vue js, my project does not have TypeScript.
It's running in the browser.
And I want to go ahead and use a popular style guide.
If you want to answer questions about your style, you can go ahead and do that.
It'll allow you to customize ies lint more than otherwise, but I'm going to go ahead and pick the Airbnb style guide.
And the final thing I'm going to pick here is I want my config file to be JSON.
And I want to go ahead and also make sure I have all peer dependencies installed.
So once that's done running, what we're going to see on our left hand side in the file tree is a new file called es lint RC dot JSON.
And this has all the configurations that we just talked about.
It's the exact setup I had through all those prompts.
And now what I'm going to want to do speaking from experience is add in ES lint ignore file.
So I'm going to touch.es lint ignore and is Lint is automatically going to lint, some files, I don't want lint it and the.es lint ignore file is going to make sure yes, lint ignores those particular files that I specified.
So I'm going to go ahead and add node modules as a directory, I don't want limted SRC slash assets, and then the public directory, save that.
And the final thing we want to do is make sure es lint, the extension is installed.
In my case, I already have it installed.
And after all that is done, you can go ahead and reload your window.
And you're going to see Yes, lint tick effect.
So what you immediately see here is that there are a bunch of errors that yes, lint has picked up on.
And I'm going to go through and fix a couple just to show how Eastland works.
I'm going to go ahead and hover over this first one, which is on the snapshot variable.
It shows a brief visualization of what the problem is, you can also click View problem.
And it'll give an expanded message.
It also shows that yes, lint rule that is making this show up, you can click on this rule.
And it'll open the browser to show you a specification of what this rule exactly is in excellent documentation.
So now we see snapshot is never reassigned us constant said, Okay, that makes sense.
So I want to fix this real quick.
What's the way to do this? Well, you just hover over again, there's this quick fix option, you get a bunch of options here, you could fix all prefer Khan's problems at once, which would take care of a lot of the problems in this file, you could fix this one in particular, you can disable it.
So ESLint just ignores this error for once, you could show documentation for the file.
And finally, you could fix auto fixable problems, which would take care of a lot of this file.
So in this case, I'm just going to fix this one constant problem.
And immediately what we're going to see is ies lint changes, this led to a constant.
And now that error is gone.
Now we'll go to the next one, hover over quick fix this will just fix all auto fixable problems.
And you can see that most of the errors are gone.
I know this seems a little messy right now.
And that's just because I bootstrap the whole project at once.
But often linters are set up in the beginning of the project.
So in practice, you would probably do a lot of this during project setup.
And in real time, you would get these errors and you would just fix them.
So generally, the VS code extension has allowed me to pick and choose where to fix my problems, but also enforces best coding practices, like the ones I just showed you.
The last extension I want to talk about is Docker.
Docker is a containerization platform that developers use to deliver applications uniformly across multiple environments.
Now if you don't know much about Docker outside of this tutorial, I highly encourage you to learn more about it before looking at the extension because it just won't make a ton of sense.
If you have Docker downloaded locally already, you can go ahead and install this extension as well.
And it's published by Microsoft and that's how you're going to know you're installing the right one.
If you don't have Docker installed locally, and you know how to use Docker, be sure to download it from Docker COMM And you'll be able to install by getting started.
Once the extension is installed.
One of the first things you'll notice is a new icon on the left hand side, it's going to be one of the Docker whale.
And that's going to signify that you have the installation of Docker and you're gonna see this new left pane on the side that shows you various commands you can run in Docker.
Before we get to this left pane, we're going to take a look at the command palette BS.
This is a place where you can run a lot of Docker commands that the extension powers.
So I'm going to go ahead and load the command palette up and I'm going to type in Docker and what you're going to see is many many Docker commands you're going to see a command a pruner container, a command to add Docker files to your workspace, a command to print the system and so on and so forth.
So what I want to do is generate a Docker file file for this repo that I'm working on, because I want to containerize my application.
So all I'm going to do is type in Docker and then files.
And I'm going to have two options one to add Docker files to my workspace, or one to add Docker compose files.
In this case, I'm not working with multiple containers, I just want to containerize this one repo, and there's one application, so I just want a single Docker file.
So I want to add Docker files to my workspace, the first option, I'm going to click that now my application is probably going to work on a Node js application platform.
So that's what I'm going to pick from my base image here.
I have a package json file in my repo.
So I'm going to pick that when I agree to port 3000.
I do not want to include an optional Docker compose file because I don't need it.
And what we're going to see on the left side, when we open our tree is there's going to be a newly generated Docker file here, we see the Docker ignore that gets populated in.
And now we can click the Docker file.
And we have a brand new Docker file here that should help us containerize this application.
We'll also notice if we interact with this Docker file, that there's some built in IntelliSense, using vs codes, native IntelliSense.
Basically, if you go in this Docker file, and you type in something like run, which is a Docker command vs codes built in IntelliSense, will pick up that this is a Docker command.
And it's going to show you some documentation for that specific command, which is really cool and really handy all the time.
Now if we go back to the Docker will, we're going to look at this pane on the left hand side.
And the first thing we're going to notice is that there's a container running for me.
And that's just the Getting Started container that comes with the Docker desktop app.
What I'm going to do is stop this container directly in my VS code editor.
And when I'm hovering over it to do this, I get a better visualization of information regarding this particular container, including the name of the container, the image, the ports it's running on, and so on and so forth.
I'm going to go ahead and stop this by right clicking and then pressing stop.
And it's going to stop the container.
And now what I can do is I can also decide I want to print this container, I don't even want to stop it, I just want to make sure it's completely gone to clean up my setup.
So I'm going to go ahead and prune this container in the command palette.
It's going to ask Are you sure you want to remove all stopped containers I want to say yes.
And I've removed that getting started container.
Now if you keep on looking at the left pane, you're going to see there's an images options.
In my particular case, I only have the Getting Started image.
And if you expand the images, you're going to get each image tag, I only have the latest tag, and that's why it's only showing a singular image.
You can also set your extension up to be synced with a registry.
Um synced with an Azure registry.
Many people use AWS and Docker Hub, you can go ahead and do that.
And basically what that allow you to do is push Docker images straight to your registries from VS code.
And there's many more advanced features that you can pull off here in VS code using the Docker VS code extension, like volumes and networks and so on and so forth.
So it's really incredible how much power VS code and the extension particularly gives you with Docker once you have the Docker extension installed in your VS code editor, you get built in IntelliSense.
With Docker, you get the ability to stop and start containers straight in the editor.
You get the ability to set up multiple containers using Docker compose in VS code.
And you can also interact with your registry without ever leaving VS code.
So that's gonna be it for this video.
If you liked this video, please give it a like and also be sure to subscribe to Free Code Camp.
There's always a variety of content coming out.
And I've personally learned a ton from it.
And thanks for watching.