How-To: Setup Atom with Nuclide, ESLint & Flow

In my current company we are developing React Native apps, and we just recently introduced static type checking for JavaScript with Flow. If you don’t know Flow, go check it out. It’s your saviour in the dark, when your code base grows in complexity.

Furthermore we use ESLint, the pluggable linter for JavaScripts, which is just awesome for streamlining your code. Especially valuable when you have a big team with different opinions on style, formatting etc. (not to mention “spaces vs tabs“!)

Those tools are really good in improving your developer experience, and will help you, your team and project going forward. So yes, I recommend you start using them.

Setting up your code editor (in this case Atom) with these awesome tools is straightforward – you just need to know how to. So here goes:

1) Install Atom

Hit the download button on the Atom website, or -if you’re on a Mac- use your terminal (requires Homebrew and Cask):

$ brew cask install atom

2) Install Nuclide for Atom

Nuclide is awesome if you work with React Native, Hack and Flow projects.
Install it from the command line:

$ apm install nuclide

3) Configure Nuclide settings

  • Open Atom
  • Open “Settings > Installed Packages” by hitting CMD + SHIFT + P and type “installed packages”:
  • Find “Nuclide” and click “Settings”:
  • In the first section “Settings” check the box “Install Recommended Packages on Startup”:
  • In the section “Nuclide-flow” check the box “Use the Flow binary included in each project’s flow-bin” (requires that you have Flow added to your project of course):
  • Settings done! Restart Atom.

4) Install Prettier for Atom

Prettier is your best friend for formatting your JavaScript. What’s even better is that it adheres to the rules you have specified in your ESLint config file, which makes you able to tweak it’s behaviour just as you want.
Install from command line:

$ apm install prettier-atom

5) Configure Prettier settings

  • Like for Nuclide settings in step 3, head to “Installed packages” and find “prettier-atom” and hit “Settings”:
  • In the section “Settings” make sure the checkbox “ESlint integration” is checked:
  • Settings done. Restart Atom.

6) Done!

Now your Atom is configured with Nuclide and Prettier for Atom, and you are good to go with Flow and prettier code. Go try it out!

Hint: Keyboard shortcut to format: CTRL+ALT+F

Flow type checking in action:

Prettier formatting in action:

4 Replies to “How-To: Setup Atom with Nuclide, ESLint & Flow”

  1. I just followed all these steps and after installing the `prettier-atom` both Flow and the Linter don’t show any errors anymore in the editor.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.