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

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.

Comments

[Ibrahim Kamal]

Thank you so much, but How to use single quotes instead of double quotes?