Setup ESLint, Prettier & Airbnb Style Guide in under 2 Minutes

Quit fighting with ESlint & Prettier

We've all been there...we have just started a new project and we need ESLint and Prettier integrated, and before you know it you're one hour deep into Googling why ESlint and Prettier aren't playing nicely together.

But what about installing all the packages that I need? This will do it for you! You'll get the following out of the box:

eslint prettier, eslint-plugin-react-hooks, eslint-config-airbnb, eslint-plugin-jsx-a11y, eslint-plugin-import, eslint-plugin-react babel-eslint

Installation

1. Navigate to your app directory where you want to include this style configuration.

cd myapp

1. Run this command inside your app's root directory. Note: this command executes the eslint-prettier-config.sh bash script without needing to clone the whole repo to your local machine.

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/karlhadwen/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

(Optional) Zsh Alias

alias install-eslint="exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/karlhadwen/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)"

And we're done, it was that simple!

I recommend forking this (as I did from: https://github.com/paulolramos/eslint-prettier-airbnb-react (thanks for the awesome script, Paulo) and modifying eslint-prettier-config.sh - now each time you integrate ESLint & Prettier, you'll have an up to date configuration integration!

🎥 If you enjoyed this little tip, subscribe to my YouTube channel where I post React, JavaScript, GraphQL videos--and of course quick tips! I'm also on Twitter.

Comments

[Alex Edwards]

Quick Q about this, you say it's to setup Airbnb styling within 2 minutes, but it's akin to all these CLI's like CRA, Gatsby, Next etc. where they're installing tooling without explanation. For example, CRA is great as a starter for React, but many can find it bloated because it's installing a lot more than simply 'react' and 'react-dom'.

I don't believe anyone should be running .sh /shell scripts without looking into exactly what they're running, it just seems to be a CLI for a config file. However, instead of 'ta daaaa', could you run through the script just so people are aware?

[Karl Hadwen]

You can take a look at everything that's being installed here: raw.githubusercontent.com/karlhadw... - take a look under 'Perform Configuration' - there's not that much being installed, and it's dev-dependencies.

I think CRA is more than just a starter app, a lot of people are using it for big projects, it abstracts technologies like Webpack and if you really need that extra bit of configuration you can do so by using something like github.com/timarney/react-app-rewired

I agree people shouldn't be running shell scripts without knowing what they're doing, but the command to be run is intended to be forked, and then you have full control over your own script that is run, even down to choosing what packages you're installing.