Building huge websites and apps take much too time and effort. To increase our productivity while building with React you should use the best professional ide and its extensions. In this blog post, you will find the best and professional ide also its extensions.

Which IDE should I use ?

The only professional idea is Visual Studio Code. It is also known as VS Code. VS code is a very popular IDE. Millions of Developers love using this idea. VS Code is open-source software developed by Microsoft. Currently, it is maintained by Microsoft as well as some companies and individual developers. VS Code is available for Windows, Linux, and mac os.

VS Code supports nearby all the coding languages. It has lots of features, some of the important features are :

  • IntelliSense
  • Run And Debug
  • Built-in Git
  • Extensions
IntelliSense

IntelliSense Gives smart suggestions and code competition based on variable types, function definitions, and imported modules. It helps us by typing each tag, element, attribute, etc. You should use this feature of VS Code.

Run And Debug

Run and Debug feature gives the option to run code from direct editor. We Launch or attach to our running apps and debug with breakpoints, call stacks, and an interactive console.

Built-in Git

Using Built-in Git it’s now easier to work with Git and other SCM. via the help of Built-in Git you can review diffs. stage files, and make commits right from the editor. You can push and pull from any host SCM service.

Extensions

VS Code knows the default features are enough for a developer. So they added this cool extensions feature, via the help of these extensions we can add as many features as we want. Lots of extensions are developed by officially Microsoft and other millions by companies and individual developers.

By installing extensions we can add new coding languages, themes, debuggers, and connect to additional services. Extensions run in separate processes, ensuring they won’t slow down your editor. You can learn more about extensions here.

Extensions for VS Code

Extensions defiantly increase our productivity. So here are the top extensions that you should use for React VS Code combination.

1. ES7 React/Redux/GraphQL/React-Native snippets

This extension gives snippets for JavaScript and React / Redux in ES7+.

Ex. Using this extension you can simply create a new functional base Component in reactjs using snippet rfce. Like this, it provides lots of snippets and this makes developing easier. You can find more snippets here.

Click to Install

2. Prettier

Prettier is an opinionated code formatter. It supports many languages. Every Developer use this extension Prettier. It is used by millions of developers. Used By People You Rely On Facebook, react, jest. dropbox, yarn, etc.

Why you should use it?

The answer is :

  • if you press save and the code will be formatted.
  • You don’t need to discuss style in code review.
  • It saved your time and your energy too.

Click to Install

3. Bracket Pair Colorizer.

In Huge Website code easily we cannot find the correct pair of brackets. To solve this problem Bracket Pair Colorizer is very helpful. this extension automatically highlights all the bracket pairs with different colors for each. This is also a very useful extension for JavaScript / Typescript Languages.

  • In this extension by default (), [] and {} are matched. However, custom bracket characters can also be configured.
  • A list of colors can be configured, as well as a specific color of orphaned brackets.
Example

Click to Install

4. npm Intellisense.

This plugin automatically completes npm modules in import statements. This is also very helpful.

Example

Click to Install

Leave a Reply