Full-Stack Engine

Recommended Atom extensions for JavaScript

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

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.

emmet

language-babel

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.

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, 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-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

git-plus

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.

git-plus--1-

Extra

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

terminal-fusion

A "terminal" package for Atom on Linux.

terminal

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

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