How to set up ESLint, Prettier, and Husky with React Native to improve code quality ✅ 😍 🐶
Elevate your coding game with our FREE JavaScript Reference Guide! Dive in and upgrade your skills today! Download Now 💪🚀
An easy way to keep your code clean and readable is to ensure as many of your project’s coding principles are followed. I do this with my projects, by setting up the Husky pre-commit hook with ESLint, Prettier, and lint-staged
What is Husky? 🐶
Husky lets us run commands or script before committing or pushing our code to git.
What is ESLint? ✅
ESLint is a tool that can analyze our code and find errors in that code using ESLint rules. It can also fix some errors on its own.
What is Prettier? 😍
Prettier is an opinionated code formatter that can format our code with the help of rules that you set or defaults are used.
What is lint-staged? 🍬
lint-staged can run multiple linters against staged git files which in our case are ESLint and Pretttier.
Getting started ⭐️
Once you’re ready to get started create your react native project (or open an existing one) and install the following dev dependencies
yarn add --dev husky lint-staged eslint eslint-config-airbnb prettier
Setting up ESLint
You can use your own rules for your eslintrc.js Here’s a look at the one I maintain for my projects, you might need to install a few dev dependencies, but it definitely keeps your react native code clean af.
Setting up prettier
Again, you can use your own rules for your .prettier.js . Here are the ones I use.
Setting up Husky 🐶
In the latest versions of Husky we need to enable Git Hooks and then create and add the pre-commit hook. Run the following commands in the terminal to set that up
npx husky install
npx husky add .husky/pre-commit "npx --no-install lint-staged"
Make sure to commit the auto-generated husky folder to your Git repo.
The above code will run lint-staged command against the staged files before committing.
So now let’s add the lint-staged in our package.json file. Open your package.json file and add the code that I have specified at the same level as dependencies.
If you want an easy way to copy and paste any of this code, or want a template that includes all of this already, check out my github react-native-template.
Closing thoughts
How do you write better code? Do you use linters or are you just coding bare bones, like a savage?
Thanks for reading! If you’re a freelancer looking to improve your proposal writing game and land more clients, give Bingo a try. Head to our website to learn more and start writing winning proposals today.
