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

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

atom-beautify

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

prettier-atom

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

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

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

Copy a file path flexibly.

copy-path

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

Helps developers maintain consistent coding styles between different editors

editorconfig

File-specific icons in Atom for improved visual grepping.

file-icons

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

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

highlight-selected

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

local-history

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

project-manager

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

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

set-syntax

Sorts/removes duplicated lines.

sort-lines

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

sublime-style-column-selection

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

tab-foldername-index

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 a single-quoted string to a double-quoted string (and ticks ` in JS!) ⌘+⇧+’

toggle-quotes

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

atom-spotify2

HTML/CSS/JS/React Specific Packages

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

Wraps tag around selection ⌥+⇧+W

atom-wrap-in-tag

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

Autocomplete for require/import statements.

autocomplete-modules

Fancy Color PIcker! ⌘+⇧+D

color-picker

Write documentation faster and easier /** <tab>

docblockr

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

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

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

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

js-hyperclick

A package to display colors in project and files.

pigments

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

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

tree-view-copy-relative-path

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

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

React ES7 snippets for atom

Snippets for Jest testing framework

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

Like this?

Hit the clap button 👏👏🏻👏🏼👏🏽👏🏾👏🏿, and check out my other productivity tools posts: