Powerful Visual Studio Code extensions that you’ll want to use

Photo by Labradudel from GoodFon.com

Thunder Client

Thunder Client is a lightweight REST Client extension for VSCode. Since It’s built-in the VSCode, you do not need to leave the editor to test your APIs.

The interface is just like in Postman. So if you’re familiar with it, you won’t have trouble with getting used to using a Thunder Client.

Quokka.js

This is a playground tool for JavaScript and TypeScript. As you type in your code, Quokka.js will display output in your IDE in real-time.

Once you install the extension, press CTRL/CMD + SHIFT + P, type Quokka and choose the file format JS/TS.

This will create a new playground file. Simply start typing and watch the magic happen.

Bracket Pair Colorizer

We’re all familiar with the trouble of missing one little bracket.
Well, say no more. With this add-on, brackets are colorized. Each pair is painted with a different color to help you spot the issues in no time.

This feature is now natively supported in VSCode. To enable it, open a settings.json file (CTRL/CMD + SHIFT + P and choose settings.json) and paste in these commands:

"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"

But if that doesn’t work for whatever reason, you can still use the extension.

Snippets

These types of extensions upgrade VSCode with snippets for the most commonly used commands of your favorite programming language/framework. To execute it, enter a shorthand and hit the TAB key.

Here are a few useful snipping extensions:

Better Comments

This extension categorizes your comments into:

  • Alerts
  • Queries
  • TODOs
  • Highlights
  • Any other comment style

Live Server

Live Server extension creates a local development server for your static websites. After making changes, be it in HTML, CSS, or JavaScript, hit save, and then Live Server will automatically reload the page and display the latest build.

Path Intellisense

With this extension, the VSCode autocompletes file names, by displaying a dropdown menu of available options on HTML attributes like href and src.

ESLint + Prettier

The ESLint extension combines VSCode with your ESLint config file.

What this will do is point out common mistakes that developers make when typing, such as trailing spaces, not writing semi-colons, not including spaces at the end of the file, etc.

Using Prettier code-formatter you can fix these issues either by running a script via npm or by installing an extension and executing it by pressing the save button.

It also comes with its own custom configuration file, but you can also tweak settings using UI. Simply open VSCode Settings using CTRL/CMD + , and search for Prettier.

Import Cost

This extension gives you a rough size of each external dependency you are importing into your project.
This can come in handy if application size is your concern.

GitLens

GitLens brings the functionalities of Git to VSCode. You can use this extension to reduce time doing tedious tasks, such as,

git add
git commit
git push

You can also see the full commit history, current changes, and previous revisions, remote commit URL, current branch, etc.

What better way to blame others for broken code than GitLens inline git blame.

Angular Language Service

One extension I recommend for everyone working with Angular is Angular Language Service. It basically extends VSCode with Angular features.

For example, it lets you access components directly from HTML templates.
To do so, hover over the name of the component with your mouse and click on it while holding the CTRL/CMD key.

Another useful thing is that the extension will immediately warn you if you’re to attach a property that doesn’t exist within a component.

To see the full list of features, feel free to explore the docs.

Custom Icons

Tired of looking at the default file icons in VSCode? This is for you!

There are plenty of variations:

You just need to install one of the extensions and it will automatically update the editor.

PolaCode

Take beautiful screenshots of your code with the Polacode extension.

To run the extension, press CTRL/CMD+ SHIFT + P and choose PolaCode from the menu.
Now select the code you want to save with your mouse click on the snapshot circle. Name the file and press save.
Now you will have an image of the previously selected code snippet.

Settings Adjustments

You can further customize your VSCode by changing the settings.json file. The easiest way to open this file is to hit CTRL/CMD+ SHIFT + P and then select Preferences JSON file from the dropdown menu.

This opens a configuration file for your editor.
Anything you see here can be edited.

Trim Trailing Whitespace

One behavior any lint software will complain about is trailing whitespace.
The trailing whitespaces are unnecessary spaces highlighted in yellow, sitting around your code commands.

To get rid of it, you can once again update the settings.json file. Simply paste the command:

“files.trimTrailingWhitespace”: true

What this will do is remove all trailing spaces every time you save the file.
If you also want to format file on save, add this command to the settings file:

"editor.formatOnSave": true

You can of course format any file manually using hotkeys ALT + SHIFT + F.
You can press the TAB key to indent text or SHIFT + TAB to reverse it.

Some file types may require an extension (like SCSS Formatter) to do the formatting.

TypeScript Configuration

One thing TypeScript is good at is auto-importing classes/functions from other files. If you prefer to use a specific quote type in your imports, you can use this command to set them as you desire.

"typescript.preferences.quoteStyle": "single"

You can even set paths to update automatically when files change places.

"typescript.updateImportsOnFileMove.enabled": "always"

Bonus

In case you’re wondering what theme am I using, It’s called Cobalt2 and is designed by Wes Bos.

For more tips on VSCode, be sure to visit the official site.

If you like my work you can support me with a cup of coffee

Until next time!

--

--

--

IT enthusiast. I Code, Speak, & Blog about JavaScript and Software Development

Recommended from Medium

How to add fast realtime search to your Firebase app with Algolia

How to validate a custom form component in Vue 3?

Real Time Events Made Easy with Pusher

Integrate Storybook with VueJS

Tips for building an API in Node.js

The Pseudoclassical inheritance pattern in Javascript

Adding automatic dark mode to a website

Angular Hierarchical Injection System

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mirza Leka

Mirza Leka

IT enthusiast. I Code, Speak, & Blog about JavaScript and Software Development

More from Medium

The Best VS Code Extensions

Top 5 VS Code (Visual Studio Code) Extensions Every Developer Should Have

Our Top 10 Visual Studio Code Extensions

Top 10 useful VS Code hotkeys