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!

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.