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

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.



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

Image for postatom-beautify


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

Image for postprettier-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.

Image for postcopy-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

Image for posteditorconfig


File-specific icons in Atom for improved visual grepping.

Image for postfile-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.

Image for postgit-plus


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

Image for posthighlight-selected


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

Image for postlocal-history


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

Image for postproject-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’,]Image for postrelated


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

Image for postset-syntax


Sorts/removes duplicated lines.

Image for postsort-lines


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

Image for postsublime-style-column-selection


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

Image for posttab-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!) ?+?+?

Image for posttoggle-quotes


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

Image for postatom-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.

Image for postatom-ternjs


Wraps tag around selection ?+?+W

Image for postatom-wrap-in-tag


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


Autocomplete for require/import statements.

Image for postautocomplete-modules


Fancy Color PIcker! ?+?+D

Image for postcolor-picker


Write documentation faster and easier /** <tab>

Image for postdocblockr


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


Coolness of emmet, for css-modules. .foo will now expand to <div className={}></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.

Image for postes6-javascript

js-hyperclick & hyperclick

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

Image for postjs-hyperclick


A package to display colors in project and files.

Image for postpigments


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.

Image for posttree-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

UI Theme: one-dark-ui

Image for post

Syntax Theme: dracula-theme

Image for post


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:

  • 6 Productivity Tools I Can?t Live Without Part 3
  • 5 Productivity Tools I Can?t Live Without Part 2
  • 5 Productivity Tools I Can?t Live Without

No Responses

Write a response