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
- Navigate to your app directory where you want to include this style configuration.
cd myapp
- Run this command inside your app's root directory. Note: this command executes the
eslint-prettier-config.shbash 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.
Top comments (2)
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?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.