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 won’t 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.
To setup Prettier we can use npm or yarn.
npm i --save-dev prettier
yarn install --dev prettier
We can config it according to our needs by changing the .prettierrc.json file.
npm install eslint --save-dev
yarn add eslint
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 :
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.
"lint": "eslint . --fix --max-warnings=0"
"format": "prettier . --write"
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 won’t get committed to Git. It will return errors during code commit. For pre-commit and Husky configuration we will be using lint-staged tool.
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.