25 VS Code extensions for (React ) frontend developers
In the recent years, Visual Studio Code has gained a lot of popularity, making it one of the top code editor choices for frontend (and not only) developers.
As a developer, I’ve always been intrigued by cutting edge tools & technologies and ways to increase my productivity. One of the amazing things about VS Code is that is was built with extensibility in mind — almost every part of it can be customized or enhanced by using an extension. With the IDE’s raising popularity, the extensions ecosystem became very large with thousands of them being available on the marketplace.
In this article you can find a list of extensions that I use to significantly increase my productivity when writing code.
Some of the extensions might have shared functionality or part of the functionality provided by the extension has become built in the standard VS Code. Be sure to check them out, see what they can do, and use them based on your specific needs.
Linting & Formatting
Integrates ESLint into VS Code to enforce rules and statically analyze your code to quickly find problems.
Integrates Stylelint into VS code to help you avoid errors and enforce conventions in your styles.
It enforces a consistent style by parsing your code and re-printing it with its own rules.
Supercharges the Git capabilities built into VS Code.
View a Git Graph of your repository, and easily perform Git actions from the graph.
Git History for VS Code.
HTML (JSX) & Styling
Automatically add the HTML/XML closing tag.
Automatically rename the paired HTML/XML tag.
Wraps your selection inside any HTML tag.
Intelligent Tailwind CSS tooling and autocompletion.
Advanced autocompletion and refactoring support for SCSS.
Syntax highlighting and autocompletion for styled-components
Code snippets for React, Redux and GraphQL with ES7 syntax.
Code snippets for React Hooks.
Allows matching brackets to be identified with colors.
This extension has become unmaintained, however it still works pretty well
Quickly change the case of the current selection or current word.
A basic spell checker that works well with camelCase code.
Display import/require package size in the editor.
Autocompletes file names in import statements.
Autocompletes npm modules in import statements.
Real-time collaborative development from the comfort of your favorite tools.
Brings icons to your VS Code
FIXME and other annotations within your code.
Synchronize VS Code settings and extensions across multiple devices
My favorite VS Code theme.
Hopefully, you will find some of these extensions useful.