Visual Studio Code is one of the top most popular choices among IDEs regarding web development. Besides being open-source and completely free of charge, it also has a huge community backing it. From VS Code you can find literally thousands of extensions, small as big, and they’re all mostly just a single click away.
In this article, I will cover 12 VS Code Extensions that I find particularly useful in regards to productivity and satisfaction of work.
If you still haven’t converted to VS Codeism, this is where you should start 😉 Go here, and convert for free right away: https://code.visualstudio.com/
Material Theme
The first extension I want to mention is Material Theme. It is bar far one of the most popular themes out there, and versions are created for varies different IDEs; IntelliJ, Atom, Sublime and of course VS Code.
It’s very pleasant and satisfying to work with and comes in different color variants for all tastes. I, for one, have this theme installed in almost every IDE I use, and I’m not planning to go back.
In these example screenshots, you can compare the standard layout of VS Code with Material Theme
Standard layout on the left, Material Theme on the right
Get started with Material Theme right away by visiting their official webpage: https://material-theme.site/
And while you’re at it, go and install Material Theme Icons: https://github.com/PKief/vscode-material-icon-theme
Your eyes will be forever grateful!
Indent Rainbow
This simple little extension colorizes indentation in your code with different colors for each level. For languages where indentation is a part of the language syntax, this can be particularly helpful. In other languages like JavaScript, it makes indentation slightly more readable, thus becomes an extra little eye-pleaser.
As a default, the indentation colors come in — as the name indicates — rainbow colors. Personally, I prefer having the colors more toned down so they appear more subtle to the eye.
Check it out
Fortunately, it is very easy to change the colors of the indents. Simply navigate to Settings, search for ‘colors’, choose Appearance and click the ‘Edit in settings.json’.
Find or create the property indentRainbow.colors and add the colors to the array.
The colors from the example above look like this:
"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],
Try out this cool little extension here: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Bracket Pair Colorizer
This is actually one of my favorite visual extensions for VS Code. The extension will colorize matching brackets and parenthesis, thus highlight the scope that the brackets wrap.
This neat little tool really helps you create a quick overview of what is what in your code. And of course you can configure both the colors and what to match, so the tools will fit any additional visual extensions/themes you might have.
You definitely owe yourself to try this extension: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
Highlight Matching Tag
While we’re at the topic of matching opening and closing brackets, you might as well extend with this little tool. It’s a brief enhancement of the functionality that already comes with VS Code, that is the ability to highlight matching opening or closing tags in HTML and JSX. However, this extension is a bit sleeker and is more configurable than the one that comes out of the box with VS Code. It’s very minimalistic but definitely worth mentioning.
In this example screenshot, we see the Provider component nicely highlighted for us
Check out the GitHub repo of this tool, and see how easy this is to configure so it matches your needs exactly: https://github.com/vincaslt/vscode-highlight-matching-tag
Better Comments
The last visual extension that I want to mention, is Better Comments. This extension helps you use different types of annotations for different types of comments and colorizes these for you
As we see in this example, we can use different annotations like
* for highlighting
? for questions! for warnings
TODO for todos
//// for line-through comments
Especially the highlighting of warnings and todos, I personally find super useful. It’s quite hard to miss when you read through the code.
I also really like how you can explicitly communicate that certain out-commented code is meant to be removed, just by adding two extra //
Git Lens
This is without a doubt one of the most powerful collaboration extensions for VS Code. In extension with Git, Git Lens helps you visualize code authorship using Git Blame annotations.
Notice how I get some really valuable insights about this code.
Firstly, I see that the author of this class HueStore is me and 2 others.
Secondly, on every line that I place the cursor, insights about the git history will be displayed.
If I hover this line of insight, I will be prompted with even more options.
I can explore git history, I can navigate to remote source, and much more.
In fact, this extension is huge and serves you a large variety of really useful options. If you don’t have this extension installed already, I strongly recommend that you go and install it right away!
Check out the official GitHub repo and learn more here: https://github.com/eamodio/vscode-gitlens
WakaTime
Now that I’m at the topic of insights, I really want to recommend WakaTime. This online tool will automatically generate useful metrics about your coding activity, directly from your IDE.
All it takes is to install WakaTime VS Code extension, and your metrics will automatically appear on your personal WakaTime dashboard, which you can visit from your browser.
Metrics from my last 7 days of coding activity
You can also embed individual widget directly to your own webpage, in case you want to customize the look and feel or blend in with other widgets from similar services. Likewise, sharing metrics is made smooth and easy.
Of course, WakaTime integrates with all major IDEs, including JetBrains IDEs, Sublime, and VS Code.
Get started with WakaTime right away: https://wakatime.com/ https://github.com/wakatime/vscode-wakatime
Import Cost
Now, let’s talk performance for a bit. With all the beauty of Webpack comes a typical bottleneck — that is a bundle size that quickly gets out of control. This is a quite debated topic, and there exist varies approaches and tools for analyzing and limiting the bundle size of your distribution. Import costs is a very handy tool that will simply show you the size of the third party packages that you import
The information will appear at the moment you import a package and will help you identify obvious issues with your bundle size.
If you want to learn more in-depth about why this is important, I suggest you read the article Keep Your Bundle Size Under Controle by Yair Haimovitch
It couldn’t be more simple to get started with Import Cost. Install the extension and get useful insights about your imports right away! https://github.com/wix/import-cost
ESLint & Airbnb JavaScript Style Guide
In modern-day programming, you will want to use a linter. A linter is a tool that will perform analysis of your code and help you identify problematic patterns and keep good code hygiene. Given the dynamic and loosely-typed nature of languages like JavaScript, a linter becomes especially important. ESLint is an open source linting utility for JavaScript that runs on Node and will perform live code analysis on-the-fly. Fortunately, VS Code already runs on Node in an Electron wrapper, which makes it very convenient to simply install the ESLint extension in VS Code, and you’re good to go! Microsoft/vscode-eslint VSCode extension to integrate eslint into VSCode. Contribute to Microsoft/vscode-eslint development by creating an…github.com
ESLint in itself is fully configurable, and rules can be removed and added in a .eslintrc file which lives at the root of your project, or in the package.json file. Learn more about configuring ESLint here: https://eslint.org/docs/user-guide/configuring
Airbnb JavaScript Style Guide is an opinionated set of ESLint rules that define a style guide for JavaScript. The full Airbnb JavaScript Style Guide is huge and quite strict, but it is very easy to overwrite or bypass individual rules that you or your team might not find convenient to use. However, there is a lot of good arguments for adhering to a certain set of style guidelines, especially if you collaborate with other developers on a JavaScript project. Airbnb JavaScript Style Guide is one of the absolute most popular choices, and by enforcing the style and practices from Airbnb, you secure uniform, clean and hygienic code, and you also benefit from adhering to a style guide that MANY other teams and developers have chosen.
Whether working on your own, in a small team or on a huge project, I would strongly recommend utilizing ESLint and Airbnb JavaScript Style Guide.
This popular style guide exists for both JavaScript and TypeScript (using TSLint for the latter) https://github.com/airbnb/javascript https://github.com/progre/tslint-config-airbnb/
In addition, I have created my own TSLint configuration which includes custom made rules that you won’t get with any other Style Guide libraries. This goes really well in combination with Airbnb Style Guide for TypeScript.
You can find the project here: https://github.com/Silind/tslint-config-silind
Prettier
While talking about adhering to a certain set of style guidelines, I want to also introduce the code formatter, Prettier.
Simply put, Prettier will perform auto formatting of a huge part of your code to ensure that it complies with a given set of rules. Prettier can be configured individually, or it can be configured to simply inherit the rules of ESLint / TSLint.
You can easily format your document with the command: Ctrl + shift + P -> Format Document. Or format a given selection with Ctrl + shift + P -> Format Selection.
Prettier can also be configured to perform formatting on save. I personally find this really useful, and I’m using it almost always.
In combination with ESLint / TSLint, Prettier is a really handy tool! Give it a try — I’m sure you won’t regret
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Debugger for Chrome
Generally, the debug tool for VS Code is greatly underappreciated.
Even though VS Code’s inbuilt debugger has been around almost since the beginning, I still encounter many developers that tend to use console.log or debugger; in situations where VS Code’s debugger seems to be an obviously better choice.
And to be honest — it’s not even that long since I was among these developers. However, VS Code’s debugger along with the extension; Debugger for Chrome is bar far one of the discoveries that have saved me the most time and pain.
If you’re still using console.log everywhere in your code, I strongly suggest that you spend a bit of time and get used to using VS Code’s debugger and Debugger for Chrome.
Trust me, it will be perfectly worth the effort!
If you want a good place to start out, read this article, VS Code Chrome Debugger and Webpack by Michael Main.
Turbo Console Log
Of course, there are still cases where it is much easier to simply log out the value of some variable.
So, finally, I will mention this handy little tool. Turbo Console Log will automate the procedure of writing meaningful log messages. It’s very simple: Highlight the variable that you wish to log out, then press Ctrl + Alt + l.
You will get a console.log that produces a log message in the format of:
TCL: functionName -> variableName, variableValue
Additionally, you can comment out all console.log by the press of a button.
So if you do need console.log, this will ease up your life a bit.
Check it out here:
https://github.com/Chakroun-Anas/turbo-console-log
That was it! 12 VS Code extensions that I think you should consider using. It was actually quite hard to limit myself on this list, cause there’s just so many really nice and useful extensions out there.
I’d like to finish up by throwing out a huge cheers to the hardworking developers in our community, that lay down time and effort in order to contribute with all these nice tools! It certainly makes us all more productive and makes our work so much more satisfying. It is greatly appreciated!
If you happen to know some cool extensions that you think deserves a mention, please comment below or reach out to me on **Twitter!**