17
Top 10 VSCode Extensions for React
We will be covering 10 essential visual studio code extensions for React developers. These extensions will help you code faster, cleaner and easier.
- ES7 React/Redux/GraphQL/React-Native snippets
- Prettier – Code formatted
- Bracket Pair Colorizer
- Auto Rename Tag
- VSCode React Refactor
- ESLint
- npm Intellisense
- TabOut
- change-case
- EditorConfig for VS Code
JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code
![](https://res.cloudinary.com/practicaldev/image/fetch/s--Ens2WoU2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://glebbahmutov.com/blog/images/prettier/projectB.gif)
Prettier – Code formatted
This extension highlights matching opening and/or closing tags. Optionally it also shows the path to tag in the status bar. Even though VSCode has some basic tag matching, it's just that - basic. This extension will try to match tags anywhere: from tag attributes, inside of strings, any files, while also providing extensive styling options to customize how tags are highlighted.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--VsUN0Z0w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://images2.imgbox.com/71/2a/zIA1XCzK_o.gif)
Highlight Matching Tag
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--btV6ZCG6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://github.com/formulahendry/vscode-auto-rename-tag/raw/HEAD/images/usage.gif)
Auto Rename Tag
This simple extension provides JSX refactor code actions for React developers.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--l60WrGas--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://github.com/planbcoding/vscode-react-refactor/raw/master/assets/images/preview.gif)
VSCode React Refactor
ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
It autocompletes npm modules in import statements.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--VmZkUZ69--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://github.com/ChristianKohler/NpmIntellisense/raw/master/images/auto_complete.gif)
npm Intellisense
This extension allows you to tab out quotes, brackets, etc.
A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.
![](https://res.cloudinary.com/practicaldev/image/fetch/s--OOBn7s3U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cloud.githubusercontent.com/assets/2899448/10712456/3c5e29b6-7a9c-11e5-9ce4-7eb944889696.gif)
change-case
This plugin attempts to override user/workspace settings with settings found in .editorconfig
files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true
is not specified, EditorConfig will continue to look for an .editorconfig
file outside of the project.
So these are the top 10 vs code extensions for React developers. Hope this article helps you with finding some best extensions for your React application development. These extensions can increase your productivity. Let us know if there are other extensions that you use in your daily life for React development. We love to use them as well. Goodbye for now, see you soon 😊
To see more blogs, visit my blog site
17