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.

3 thoughts on “Atom for React & JavaScript Developers – 2020

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: