Everyone has things they can't live without, whether it is your pet, a really loud neighbor, taxes, the dank memes, or even water! (This is my way of reminding you and myself to drink water more often, got it? ok, let's keep going).
But this time I wanna talk about an editor that has a special place in my heart:
(VS Code, in case you didn't read the title)
This little bad boi comes with some pretty cool features out of the box:
- Intellisense
- Integrated version control
- Markdown support with previewer
- Built in terminal
- Peek definition
- Debugger
- And blah blah blah... let's get to the good part:
Plugins! wait, no.
Extensions! 👏
These are basically a way to add extra functionality to your existing editor to make it go over 9,000 (WHAAAT?!).
Alright, alright, alright. Enough chit-chat.
List of extensions I can't live without
Auto Close Tag
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Auto Rename Tag
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Auto import
Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
Beautify
Automatically formats your JavaScript, HTML and CSS code. (Yeah, like magic!).
Clipboard History
Keeps a history of your copied and cut items and let's you re-paste them if needed.
Git History
View git log along with the graph and details. You can view the history of a file or a specific line.
Code Runner
Let's you run a file or a selected part of your code to quickly check the output. I normally use it when working with JavaScript, but it supports quite a wide range of other languages as well.
Docker
Do I really need to explain this one? If you don't know what Docker is by now, go ahead and google it. You can thank me later 😉.
(Jk. You can go here, here and here for more Docker goodness).
Material Icon Theme
What? Don't you like cute little icons on your explorer? Ok, then. Skip this one if you want.
Path Intellisense
I mean... the name says it all, doesn't it?
CSS classes intellisense
Aids you by giving you hints of possible CSS class names that are already in your project so you don't have to constanlty switch tabs over and over.
NodeJS Modules Intellisense
Autocompletes the names of the core NodeJS modules and the ones you specified in your package.json available for you. Quite useful when starting to learn about Node.
ExpressSnippet
If you are learning/using NodeJS, chances are that you are also going to be using ExpressJS, so this extesion provides a few code snippets so you can focus on your logic rather than the boilerplate around your get(), post(), put(), delete() methods.
Markdownlint
This extension is similar to jshint. It warns you of possible mistakes in your Markdown code that is commonly used in open source projects across GitHub and other version control hosting platforms in a way, whether it's a RAEDME.md or CONTRIBUTING.md, they all use Markdown.
Polacode
Allows you to copy and paste blocks of code that you want and transform them into a screenshot with a good looking standard template. (Similar to how window-based screenshots look in MacOS).
That's it. These are my favorites extensions so far.
Do you have some extensions that could replace the ones I mentioned? Or would you add some more to the list?
Go ahead and let me know below, I'm always up for extension hunting.
Latest comments (49)
Oh nice, thanks for Polacode!! Thats really needed for all my thesis'
I really like vscode-powertools - allows you to add buttons for configureable actions to the status-bar.
With todo-tree I keep track of TODO-comments in my code. VERY useful!
And I use the "Bad Code Highlighter" to highlight my typical problem: unpaired quotes. (You can configure a rx and if it find it, it would highlight the line)
Finally I found Favorites Manager to be useful to keeo a list of my favourtite file easily at hand.
Try Binary Jump as well, it's a small extension that can save you some keypresses and faster the navigation by allowing you to jump half distances on either direction on a line.
Great list!
What's the memory usage? How fast does it start? How is it better than Webstorm?
Hey Janszky,
In terms of performance, I think you will have to give it a try yourself on your machine since specs can vary.
Being better than Webstorm? Not sure. I can say that Webstorm does provide more features out of the box than VS Code, so it all depends if you like or not having to download a few handy extensions or just get straight to coding after installing your tools.
You can refer to this and this other article to check out other people's reviews.
Clipboard history sounds nice, or if there is an undo for the action when you accidentally push copy instead of paste.
Not a plugin but I've recently discovered ligatures with the fira code font and for me it's the biggest improvement in code readability since color coded text.
I'd recommend Live Server as well. It's quite useful.
Would you mind explaining what it does or a link to it for others?
It runs a web server in the root directory of your project so as to automatically update the page once you edit anything. Check the gif in its marketplace page: marketplace.visualstudio.com/items...
Do you know of any strong refactoring extensions? VS Code’s refactoring capabilities seem pretty weak (almost nonexistent) out of the box. Considering switching to WebStorm just for that.
That's a good question. I don't currently have any, but I'll let you know if I find one :)
Any way to sync the installed extensions across computers?
I think Settings Sync is the one for you!
I am searching a extension that enable to rename file using shortcut (cmd + p) similar Sublime Text.
Have you looked into the keymapping settings? You may be able to achieve it that way.
I need to enable rename file via
cmd + shift + p. On Sublime Text there is a option to rename a file using the same command but, in the VSCode there isn't the option. Look the image attachment: thepracticaldev.s3.amazonaws.com/i...Edit: I did a search and I've found this extension: marketplace.visualstudio.com/items...
I think another cool extension is quokka.js 'A live scratchpad for javascript' it supports typescript now too
I uninstalled Auto Import because VS Code seems to have that feature built-in now.
Path intellisense is built in these days...
Also, my favorite extension is eslint-disable 😂
Great article Christian. For us the number one extension is the Go extension by Luke Hoban. It makes VS Code into a very useful and productive environment for Go development.
For C# development, Visual Studio is still the boss.
Thanks NexWebSites, this is the first time I read about someone using Go in VS Code. What do you guys use it for?
We use Go for everything from microservices, web services, to complete high performance servers. You name it. IMO, many applications are much more fun and effective written in Go. And that is coming from someone who has been writing in C# and Java since they were first released.
Although it is a great product, if it wasn't for the Go extension, we wouldn't even have VS Code on our machines.
That sounds awesome. Props to Luke Hoban for his initiative!
VS Code with 20 extensions...curious about the performance...
Haven't really noticed much of an impact on load times to be honest.
But now that you mention this, I'll look into it. Thanks!
For anyone who may wonder:
Here'a post about performance issues and how to work around them for version 1.19 or later. And this one is for version 1.18 or older.