The Ultimate Atom Editor Setup (+for JS/React)

After years of perfecting my Sublime Text setup, I’ve decided to give Atom a chance. It took a couple of months, and I’m very proud of the setup I got. I feel super productive.

I divided this list into Utilities and JS/React specific packages. Default keybindings are also mentioned.

TL;DR — A script to install all packages is at the bottom of this article.

Utilities

atom-beautify

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom. ⌃+⌥+B

atom-beautify

prettier-atom

Format your JavaScript using Prettier. Comes with powerful optional ESlint integration. (Recommended by Dan Abramov — Thanks!). ⌃+⌥+F

prettier-atom

atom-transpose

Atom’s alt+t (transpose) is more like a string flip. Sublime’s would switch two selected strings one with another, which is a much more useful behavior. ⌥+T

case-keep-replace

With this package you can replace given string with another, but preserve its original case. ⌘+⌃+R

change-case

A quick way to change the case of the current selection. From camelCase to snake_case etc. ⌘+K ⌘+C/S

copy-path

Copy a file path flexibly.

copy-path

duplicate-line-or-selection

Duplicates the selection if there is one, otherwise, duplicates the line. Same behavior of Sublime Text. Atom duplicates whole line. ⌘+⇧+D

editorconfig

Helps developers maintain consistent coding styles between different editors

editorconfig

file-icons

File-specific icons in Atom for improved visual grepping.

file-icons

git-plus

vim-fugitive like package for atom. make commits and other git things without the terminal

update: Atom 1.18.0 added git integration which is pretty nice. so I don’t use this one anymore.

git-plus

highlight-selected

Double click on a word to highlight it throughout the open file.

highlight-selected

local-history

Package for maintaining local history of files (history of your changes to the code files).

local-history

project-manager

Get easy access to all your projects and manage them with project specific settings and options. ⌘+⌃+P

project-manager

related

Related provides a quick way to access files that are “related” to the file currently opened. For example, switching between .js and .spec.js files. ⌘+⇧+R

My JS Related config (Menu > Packages > Related > Edit related patterns):

'([^\\/]+)(?!\\.spec).js(x?)$': [
'tests/$1.spec.js$2#create',
]
'tests/(.+).spec.js(x?)$': [
'$1.js$2',
]
related

set-syntax

Creates easy Command Palette entries for setting the syntax of the current file. Similar to Sublime’s. ⌘+⇧+P

set-syntax

sort-lines

Sorts/removes duplicated lines.

sort-lines

sublime-style-column-selection

alt+click across lines to select a block of text with carets on each line. ⌥+Drag

sublime-style-column-selection

tab-foldername-index

Plugin replaces tab’s title if opened index.* file for more readability.

tab-foldername-index

sync-settings

Synchronize settings, keymaps, user styles, init script, snippets and installed packages across Atom instances. I back up all my settings to Gist and sync between work/personal computers.

toggle-quotes

Toggle a single-quoted string to a double-quoted string (and ticks ` in JS!) ⌘+⇧+’

toggle-quotes

atom-spotify2

Displays the currently playing song in Spotify in Atom’s status bar. Not essential, but fun.

atom-spotify2

HTML/CSS/JS/React Specific Packages

atom-ternjs

JavaScript code intelligence for atom with Tern. Adds support for ES5, ES6, ES7, Node.js, jQuery, Angular and more. Extendable via plugins. Uses suggestion provider by autocomplete-plus.

atom-ternjs

atom-wrap-in-tag

Wraps tag around selection ⌥+⇧+W

atom-wrap-in-tag

autoclose-html

Will automatically add closing tags when you complete the opening tag.

autocomplete-modules

Autocomplete for require/import statements.

autocomplete-modules

color-picker

Fancy Color PIcker! ⌘+⇧+D

color-picker

docblockr

Write documentation faster and easier /** <tab>

docblockr

emmet

A plugin which greatly improves HTML & CSS workflow. Learn more

emmet-jsx-css-modules

Coolness of emmet, for css-modules. .foo will now expand to <div className={style.foo}></div> instead of <div className="foo"></div>.

es6-javascript

A collection of commands and ES6 focused snippets for optimizing modern Javascript development productivity. It aims to be compliant with AirBnB’s mostly reasonable approach to Javascript.

es6-javascript

js-hyperclick & hyperclick

Go to definition of JS variables/imports. js-hyperclick requires hyperclick.

js-hyperclick

pigments

A package to display colors in project and files.

pigments

linter-eslint

This linter plugin for Linter provides an interface to eslint. It will be used with files that have the “JavaScript” syntax.

tree-view-copy-relative-path

Allows you to copy relative path to file from tree view.

tree-view-copy-relative-path

lodash-snippets

Some snippets to quickly use Lo-Dash Library in Atom.

language-babel

JavaScript ES201x, React JSX, Flow and GraphQL Grammar. Babel Transpiler

react-es7-snippets

React ES7 snippets for atom

atom-jest-snippets

Snippets for Jest testing framework

My Theme

UI Theme: one-dark-ui

Syntax Theme: dracula-theme

Install EVERYTHING!

apm install atom-beautify prettier-atom atom-spotify2 atom-transpose case-keep-replace change-case copy-path duplicate-line-or-selection editorconfig file-icons git-plus highlight-selected local-history project-manager related set-syntax sort-lines sublime-style-column-selection tab-foldername-index sync-settings toggle-quotes atom-wrap-in-tag atom-ternjs autoclose-html autocomplete-modules color-picker docblockr emmet emmet-jsx-css-modules es6-javascript js-hyperclick hyperclick pigments linter-eslint tree-view-copy-relative-path lodash-snippets language-babel react-es7-snippets atom-jest-snippets one-dark-ui dracula-theme

Got more? Let me know in the comments!