Full-Stack Engine

Recommended Atom packages for React JS

Recently I began sailing in the React JS waters using my favorite editor Atom and immediately started writing down my list of "must have" packages to work with React ecosystem, e.g., es6, HTML, jsx, babel, and others.
As a simple rule of thumb for choosing an Atom package from the many available in the community, you might look at the number of downloads; the popularity often means an excellent quality package.

For React, I recommend this course from Stephen Grider in Udemy to start with React JS and Redux: Modern React with Redux.

Let's begin with our package tour!.

language-babel

I'm starting with this package because it's a must-have in the React toolkit belt for Atom. It provides the grammar for all versions of JavaScript including ES2016 and ESNext, JSX syntax.

The package also provides

automatic indentation of JSX.

  • JSX tag closure and JSX HTML element completion suggestions.
  • Context-aware commenting out of JSX elements.
  • Additional newline insertion between JSX tag pairs.
  • Babel transpilation on file saves (optional).
  • Babel transpile of all files in a directory or directories.
  • Babel transpiled code preview.
  • Support for styled-components CSS inside tagged template strings including auto-completion.
  • Support for GraphQL code highlighting
  • Support for adding other language grammars to highlight code inside template literal strings.

atom-ternjs

Another un-missable package. This utility is not only useful for React, but for javascript in general, it supports ES5, ES6, typescript, even jQuery.
This package provides IntelliSense for Atom and Javascript making your life easier when typing hundreds and thousands of line of code. Enjoy!.

ternjs

linter-eslint

As usual, when coding using React as our front-end framework, we're writing ES6 code, which is not strongly typed nor compiled ahead, so it's easy to introduce syntax errors that are not evident until execution time, to solve these problems, eslint is a must have tool, checking the most common types of errors as you write.
This package is an extension of the popular Linter utility for Javascript.

autocomplete-modules

Autocomplete for require/import statements. It makes easier the process of adding new modules from the directory tree.

autocomplete1

atom-beautify

Very popular beautifier utility to ident and provide a superior format to the code in several different programming languages, like HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more!.
The only drawback is not being linter complaint.

beautify-1

prettier-atom

Similar to atom-beautify. It comes with nice optional ESLint integration.

prettier

autoclose-html

autoclose-html is a simple package that does a single task, closing tags in HTML markup. However, as simple as it sounds it's something missing in a plain Atom installation and makes your life easier when writing web content.

autoclose--1--1

Thank you for reading these recommendations and enjoy coding!. See you next time.

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.