Atom editor with linter, prettier and all the stuff you need

#javascript #atom #linter #prettier

Finally, my working atom editor setup for javascript

Recently, I setup my atom editor because of a React javascript project. What I knew from work (my fellow teammembers use VSCode there) is there are some nice tools like linter and prettier to keep your code clean, error free and readable. Some of those things remind me of the typical IntelliJ IDEA tools (e.g. Firebug, Checkstyle and so on).
However I didn't find a good instruction or tutorial to make all the stuff work. So I tried a bit around and here is what I got for all those who have the same trouble I had:

Prerequisites

This tutorial is optimized for unix- based clients which have a bash or similar. However, you can use this setup on other machines as well but I did not test it for them.

Download atom from https://atom.io/

Required atom packages

Install required atom packages with

apm install linter \ 
linter-eslint \
linter-ui-default \
busy-signal \
intentions \
prettier-atom \

Atom settings

Open the editor and the settings by pressing CTRL + Comma
Go to packages and filter for prettier-atom and click settings
Enable the options ESlint integration and Format files on save

Test your setup

To test the setup, I created a new react-app by executing npx create-react-app test-app and imported it into atom editor.
When saving an edited file with obvious errors (unused import, newlines, single vs double quotes), I can see the editor shows me linter warnings and autoformats things on save:

The create-react-app setup inherits a default eslint config from the react packages. If you wish to override these with your own settings, you can create a .eslintrc file in your project root.