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

Quit fighting with ESLint & Prettier

You can also watch me do this in under 2 minutes on YouTube!

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

2. 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!

I recommend forking this (as I did from: https://github.com/paulolramos/eslint-prettier-airbnb-react (thanks for the awesome script, Paulo) and changing 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](https://bit.ly/CognitiveSurge) where I post React, JavaScript, GraphQL videos — and of course quick tips! I’m also on [Twitter](https://twitter.com/karlhadwen).