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
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-a11yoryarn 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-eslintoryarn 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-prettieroryarn 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.3oryarn 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.