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.
Even if I am mostly working with JavaScript and Typescript (React ecosystem) most of the extensions are not limited to these technologies and can be useful for a large variety of projects.
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
ESLint
Integrates ESLint into VS Code to enforce rules and statically analyze your code to quickly find problems.
Stylelint
Integrates Stylelint into VS code to help you avoid errors and enforce conventions in your styles.
Prettier
It enforces a consistent style by parsing your code and re-printing it with its own rules.
Beautify
Beautify JavaScript, JSON, CSS, SASS, and HTML in Visual Studio Code.
Git
GitLens
Supercharges the Git capabilities built into VS Code.
Git Graph
View a Git Graph of your repository, and easily perform Git actions from the graph.
Git History
Git History for VS Code.
HTML (JSX) & Styling
Auto Close Tag
Automatically add the HTML/XML closing tag.
Auto Rename Tag
Automatically rename the paired HTML/XML tag.
htmltagwrap
Wraps your selection inside any HTML tag.
Tailwind CSS IntelliSense
Intelligent Tailwind CSS tooling and autocompletion.
SCSS IntelliSense
Advanced autocompletion and refactoring support for SCSS.
vscode-styled-components
Syntax highlighting and autocompletion for styled-components
React
ES7 React/Redux/GraphQL/React-Native snippets
Code snippets for React, Redux and GraphQL with ES7 syntax.
React Hooks Snippets
Code snippets for React Hooks.
General purpose
Auto Barrel
Provides commands to create or update a TypeScript or JavaScript barrel file.
Bracket Pair Colorizer
Allows matching brackets to be identified with colors.
This extension has become unmaintained, however it still works pretty well
change-case
Quickly change the case of the current selection or current word.
Code Spell Checker
A basic spell checker that works well with camelCase code.
Import Cost
Display import/require package size in the editor.
Path Intellisense
Autocompletes file names in import statements.
npm Intellisense
Autocompletes npm modules in import statements.
Live Share
Real-time collaborative development from the comfort of your favorite tools.
vscode-icons
Brings icons to your VS Code
TODO Highlight
Highlight TODO, FIXME and other annotations within your code.
Bonus
Settings Sync
Synchronize VS Code settings and extensions across multiple devices
Dracula Official
My favorite VS Code theme.
Hopefully, you will find some of these extensions useful.
Happy coding!
