10 VS Code Plugins Frontend Dev’s should not miss!

Ram Murat Sharma
Nov 3 · 4 min read

1) Todo Tree

Many of us follow our own ways to handle the situation and put some kind of comments in code and promise ourselves that we will comeback and revisit this code (although, which never happens) and then we keep finding that legacy code later on.
This plugin helps us to write ToDo in comment section in different styles and then allows you find all the occurrences of the same, later on in the codebase.

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

2) CSS Triggers

This plugin helps you do code smartly and provides more information around Layout, Paint and Composition of CSS properties.
This extension adds inline decoration to css properties to indicate their cost.

https://marketplace.visualstudio.com/items?itemName=kisstkondoros.csstriggers

Also, you can find more examples of what exactly triggers by mutating a given CSS property while writing these properties. This change varies as per browser engines including Blink, Gecko, WebKit, EdgeHTML.

3) REST Client

This tool is a short cut and readymade solution of curl commands within VS code. It allows you to test your Rest APIs including any Get/Post/Put/Delete (CRUD) operations with params and request headers.

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

4) Regex Previewer

Most of the people use https://regex101.com/ for complex regex and test different variations. This plugin helps you to not visit any other site and test your regex on the fly within your editor. It opens side to side results and matches.

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

5) Compareit

This extension helps you to compare two files which you can choose from your current project and other directory on your computer or clipboard. You may not need any other online text compare tool or offline licensed softwares.

https://marketplace.visualstudio.com/items?itemName=in4margaret.compareit

6) Bookmarks

This is super helpful when you are dealing with large files and stuck searching piece of code again and again within the file. The bookmarks help you jump from one location to another within file and saves time. You can also see a list of bookmarks on left hand side menu.

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

7) React Snippets

Who does not love code snippets as its a super time saver and productive way but this tool goes beyond and provides writing dynamic components, class components, import, export, pure functions snippets.

If you start typing csc for snippet below in editor; it will start showing-up a selection list with all available options. You can pass different values as params saying $2, $3 etc.

https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

8) Prettier

There are different plugins available to prettify/beautify your code in JavaScript and other languages; and I think it’s a matter of choice. Initially it may bother you a bit as the configuration is not straight forward and time taking. It makes the code reviewer’s life easy apart from it formats the code and handles LF, RF (UTF-8) and other formats.

It allows you to beautify the code on document save or specific code selection and hit (Command + Shift + P).

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

9) Code Spell Checker

This plugin help you catch any english typos you do while writing code. It supports almost all the major programming languages. I like it when this behaves like Outlook.

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

10) Add JSDoc Comments

This is so fun; You do not need a snippet to add some dummy params including params, return, description etc and then update this params from dummy to actual but all you have to do is to select the function definition and hit (command + Shift + p) on mac to open command palette and select “Add doc comments”; a comment section will be added with all selected params. Is it not cool :)

https://marketplace.visualstudio.com/items?itemName=stevencl.addDocComments

Ram Murat Sharma

Written by

Senior Experience Technologist @PublicisSapient | Speaker | Blogger

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade