Atom is one of the most popular Editors out there for working in Web Development, thanks in part to the constant efforts of GitHub to support several features out of the box and thanks also to the open source community that create a vast selection of packages to work with among other things, JavaScript.

Note: If you're interested in learning JavaScript, I wrote a guide for starting in JavaScript: How to start in JavaScript in 2018 - From beginner to Full-Stack

Atom offers several great packages to complement your programming experience in JavaScript, let's begin our tour through my recommended selection!


Emmet as a project is a toolkit that works as a plug-in for several favorite text editors, like Sublime Text, Eclipse, Brackets and of course Atom.

It provides abbreviations for HTML auto-completion and intellisense inspired in CSS selectors, what it makes the coding of HTML code much faster and comfortable.



I'm starting with this package, because is 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.


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!.



As usual, when coding using React as our front-end framework, we're writing ES6 code, that is not strongly typed nor compiled ahead, so it's easy to introduce syntax errors that are not evident until execution time. So, 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 for require/import statements. It makes easier the process of adding new modules from the directory tree.



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.



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



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.



At last, but not least, we have git-plus, a package for making the git tasks, like add, commit, check-out, push, and others, as easy as using ctrl+shift+p and typing the corresponding git command.



If you use Linux as a regular development OS, you might want to use the command line inside Atom for convenience.


A "terminal" package for Atom on Linux.


Thank you for reading these recommendations and enjoy coding!. Take care and see you next time!.