React/React-Native configure eslint (Airbnb), prettier and precommit with husky in one go for code quality.

Eslint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Configuring ESLint and Prettier

Adding ESLint and Prettier on VSCode

Open Visual Studio Code Install eslint and Prettier packages from Visual Studio Packages from View- >extensions in menu bar or the extensions tab as shown in screenshot

Install ESLint and Prettier extensions in VSCode.

Open Terminal and run following commands

Step 1:

cd <project-path>

Step 2:

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
or
yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y

Step 3:
React provide eslint package by default, so you don’t have to install eslint globally.

./node_modules/.bin/eslint --init

If you get any error i.e eslint: command not found then run the following command and then try again.

npm install --save-dev eslint babel-eslint
or
yarn add -D eslint babel-eslint

Then

./node_modules/.bin/eslint --init

1. Select ‘Use a popular style guide’
2. Select Airbnb
3. Select your options, pick JSON type (.eslintrc is the old filename based on my research, but it’s the same thing)
4. Allow it to update newer versions and/or install packages if it asks

Step 4:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
or
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

Restart your visual studio code editor
You can now find .eslintrc.json in your project folder

Step 5:
Paste the following into your .eslintrc.json to replace existing code:

{
"extends": [
"airbnb",
"prettier",
"prettier/react",
"plugin:prettier/recommended",
"eslint-config-prettier"
],
"parser": "babel-eslint",
"rules": {
"import/no-unresolved": "off",
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
],
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100
}
]
},
"plugins": ["prettier"]
}

Step 6:
Configure your VSCode to format on save.

In VSCode preferences->settings->user settings Click on 3 dots in top right corner and select ‘open settings.json’ This will open the settings JSON, find the following values and modify the same. Modified values will appear in right hand side. Set the following values

{ 
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2 
}

prettier.eslintIntegration: Sets prettier priority over Eslint to handle conflicts
editor.formatOnSave: Run prettier fix on save
editor.tabSize: 2 Set Tab size to 2.

To Fix eslinting run following command in your terminal

./node_modules/.bin/eslint --fix

Pre-commit hook

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via “git add” before you commit. Prettier has the full list of options to achieve that; we are going with lint-staged and husky

npm install --save-dev lint-staged husky@0.14.3
or
yarn add -D lint-staged husky@0.14.3

Then add these scripts into package.json

"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
]
},

Note: Please make sure that you’re in a cloned repository or run ‘git init’ to create an empty Git repository and reinstall husky.