Powerful Visual Studio Code extensions that you’ll want to use
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.
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:
But if that doesn’t work for whatever reason, you can still use the extension.
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:
This extension categorizes your comments into:
- Any other comment style
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.
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.
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 brings the functionalities of Git to VSCode. You can use this extension to reduce time doing tedious tasks, such as,
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.
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.
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.
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:
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:
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.
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.
You can even set paths to update automatically when files change places.