Atom for React & JavaScript Developers – 2020

I recently started using Atom as my IDE for React & JavaScript development. (I am here to write my experience with Atom. I love using different editors as and when I feel like I need change.)

My experience with Atom is good. I love it’s base theme Atom Dark (UI Theme) and One Dark (Syntax Theme). It took time to figure out the packages I needed to have the best React/JavaScript development experience.

Installation is pretty easy, I am sure there are plenty of options like downloading the binary or install it using your favorite package manager. I installed on my Manjaro Linux using pacman package manager.

Packages Configured

I installed following packages to support React & JavaScript development. In case there were duplicate packages or unofficial packages, I went through the reviews on packages and installed them. I all the items in list have link to actual packages for the reference. I have just added short description stating the primary feature package is providing.

• atom-ide-ui (Supports language services, if you have installed linter package, it will tell you to disable it as this package takes care of it)
• atom-path-intellisense (Path intellisense, when you write your import statements to get items from installed node modules or import functions/components created by yourself)
• atom-ternjs (JavaScript code intelligence for Atom)
• autocomplete-html-entities (Autocomplete for HTML, more exhaustive compared to installed by default)
• docblockr (I love adding JsDoc comments to my code, this helps me to generated comments faster when I type /** and press enter. Supports multiple languages)
• file-icons (Icons theme for Atom)
• ide-json (Json support for IDE)
• ide-typescript (types & TypeScript support in Atom)
• import-cost-atom (when you import a plugin, how much size it contributes to your build. Helps to reduce build size.)
• minimap (In your editor, on the right side shows entire file as minimap. Helps to navigate faster to during search & replace or refactoring.)
• pigments (shows colors in css files when you type hex color code or RGB color code.)
• prettier-atom (I use prettier to format my code, this is the office plugin)
• react (Complete JSX & React support.)

Feel free to post comments if you want to suggest any better plug-ins or alternatives. I will keep adding or modifying packages and experience with Atom.