React-Native/React - VsCode Extensions for effective development

When it comes to react-native development, VsCode is my go-to IDE. I'd want to share my VsCode experience over the last year. So, let's have a look at some of these React/React-Native extensions that will help you out.

React-Native-Tools Install
Using this extension, you can debug your code and quickly run react-native commands from the command palette.

Eslint Install
Linting allows you to check your code for potential errors. This process helps you improve the quality of your code, and helps enforce coding standards especially when you’re working in a team.

Prettier - Code formatter Install
Prettier is a JavaScript code formatting tool. It is particularly useful to ensure that all developers working on a project are formatting code the same way.

Code Spell Checker Install
This isn't anything special; it's simply a spell checker for your code. You'll wish you had this after spending 30 minutes debugging only to discover you misspelt a word. Code Spell Checker highlights misspelt terms, saving you time and trouble in the long run.

"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"prettier.tabWidth": 2,
"editor.formatOnSave": true,

GitLens Install
GitLens is a popular extension that enhances VS Code's built-in Git capabilities. It allows you to see who, why, and when a line or code block was changed, as well as hop back in time to learn more about the code's progress.

Color Highlight Install
Whenever I have a hex colour in my files, the colour will be set as background of the string.

Highlight Matching Tag Install
This extension highlights the matching tag when your cursor is placed on one.
Auto rename tag Install
If you rename one HTML/XML tag, the corresponding HTML/XML tag is also renamed.

Todo Tree Install
This plugin scans your workspace for TODO and FIXME comment tags and presents them in a tree view in the explorer window. When you click a TODO in the tree, the file will open and the cursor will be placed on the line containing the TODO.

ES7 REACT/REDUX/GRAPHQL/REACT-NATIVE SNIPPETS Install
For your VS Code, this extension provides JavaScript and React/Redux related snippets in ES7 with Babel plugin options.

Image preview Install
The Image Preview extension provides inline previews for images included HTML file types. The extension shows a pop-up window in the editor surface, and an optional image preview in the gutter, which can be toggled on or off in User Settings.

Thanks for reading
Hope this article helps you in some form or the other. Feel free to add your favourite VsCode Extension.

Follow me on Twitter

Happy Coding !!!