Atom Packages for React

Install these Atom Packages for React

1. Start Atom, open the Settings view, and click Install.
2. Install prettier-atom, if you have not aleady done so. This package beautifies JSX code.
3. Install language-babel. This package handles auto-indent, etc., for JSX code.
   

   You can also install this package from the command line (Command Prompt or Terminal), using Atom’s package manager:

   apm install language-babel

Configure these Atom Packages for React

1. Start Atom, open the Settings view, and click Packages.
2. Choose atom-beautify, and deselect Beautify on Save for these three languages: HTML, JavaScript, and JSX.
3. Choose prettier-atom, and deselect  Format Files on Save.

How to Format React JSX Code

There are two ways two automatically format JSX code in Atom:

1. Use the Packages Menu:
   

   Select the JSX code in Atom, and then choose Packages > Prettier > Format.

2. Use a Keyboard Command:
   

   Windows: Select the JSX code, and then press cntrl + alt + f

   MacOS: Select the JSX code, and then press control + option + f