ESlint , Prettier and Husty : Setup for React Native App

When developing any app, a development team is involved which develop the apps and maintain it. For small project, 5 to 6 team member is involved so it wont be much difficult to manage and maintain. But for large project where more number of people are involved and are working on different app modules and features daily. In such scenario, to maintain the quality of code and managing it becomes quite a headache. If we are not maintaining the code then the code written by one team member cannot be understood by other working on same features, which will take more time to understand it and to work on it. This will affect the project delivery timeline.

If we are building app where other members are involved, maintaining the code quality, making it looks cleaner and standarized become our first priority. We need to make sure every team member follow one standard procedure while writing code. To maintain such standard we have different tools available. Today we will be discussing some of them and know how to setup them in our project. We will setup these tools in React Native project using VScode.

Prettier

Prettier is an code formatter which formats our codes automatically. Prettier covers the code format of Javascript, CSS, HTMl and GraphQL languages. It automatically formats the code on file save mode so it help us to write clean code faster.

Setup

To setup Prettier we can use npm or yarn.

// npm

npm i --save-dev prettier

// yarn

yarn install --dev prettier

Config

We can config it according to our needs by changing the .prettierrc.json file.

Eslint

Eslint is a tool that identifies adn reports the potter found in the JavaScript or ECMAScript code. It helps us to find bugs, errors while writing JavaScript and TypeScript code. It improves the code quality and find error, somtime it can auto fix the bugs also.

Setup

// npm

npm install eslint --save-dev

// yarn

yarn add eslint

Config

Like prettier we can also configure it. We are going to config it for TypeScript and use standard TypeScript styles. Whenever we write code in TypeScript the ESlint will verify the code according to the standard-with-typescript style.

A new file named eslintrc.json will be created in the project which contains the object of rules in JSON format. We can add own rule in this file but for now we will be using standard-with-typescript rules :

"extends": ["standard-with-typescript"],

We have installed ESlint tool as linter and Prettier for code formatting. The ESlint also includes some styling rules so it might arise conflict in styling the code. We need to config both using new dependency eslint-config-prettier

After install, config the eslint-config-prettier in eslintrc.json file as below:

Config the ESlint and prettier in package.json by adding followin code.

"scripts": {
"lint": "eslint . --fix --max-warnings=0"
"format": "prettier . --write"
},

Husky

Husky is a tool which helps us to work with GIt hooks. By using it we can setup script which will run at specific point of Git lifecycle. In our project, we will be using it to run ESlint and Prettier before committing to Git. In this case, every code style will be verified by Prettier before committing code to Git. If code does not follow the styling rules, it wont get committed to Git. It will return errors during code commit. For pre-commit and Husky configuration we will be using lint-staged tool.

Setup

npx mrm@2 lint-staged

After running the command, a folder name Husky will be created in project directory and inside it contain pre-commit file.

We can also fine the changes in package.json file where lint-staged entry is added.

After the install of all three tools ESlint, Prettier and Husky, on every commit we will be running lint script to check error and bugs and format script for styling our code format. In case issue is found the commit process will be stopped with warnings.