How To Configure ESLint and Prettier

This is the second part of the article series where we will be setting up a production-grade React application from scratch.

In the last part, we did the setup for Webpack & babel. If you are someone who wants to understand how your React project work under the hood, check out this series where I have talked about setting up the React Ecosystem from scratch.

If at any point you feel like looking into the code, you can checkout the code from here.

Table of Content

  • Installing the dependencies
  • Configuring Eslint and Prettier
  • Optional — Installing Eslint and prettier Extensions for IDEs.
  • Running Eslint and Prettier.

Step 1 — Installing the dependencies

npm i --save-dev eslint prettier eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks
npx install-peerdeps --dev eslint-config-airbnb && npm i -D prettier
React Ecosystem: Eslint Prettier setup

Step 2 — Configuring Eslint and prettier

  • .eslintrc.js for Eslint configuration.
  • .prettierrc.js for Prettier configuration.

if you have been following the React Ecosystem article series, then your folder structure will look something like this after adding these two files.

module.exports = {
extends: [ // extenind pre-defined rules
'airbnb',
'airbnb/hooks',
'prettier',
'plugin:prettier/recommended',
],
plugins: ['prettier'],
rules: { // you can modify some rules manually
'react/jsx-filename-extension': [
1,
{
extensions: ['.js', '.jsx'],
},
],
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'react/jsx-props-no-spreading': [
0,
{
html: 'ignore',
custom: 'ignore',
explicitSpread: 'ignore',
},
],
'prettier/prettier': 'error',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
},
globals: {
window: true,
document: true,
localStorage: true,
FormData: true,
FileReader: true,
Blob: true,
navigator: true,
},
};
module.exports = {
"singleQuote": true,
"printWidth": 100,
"trailingComma": "es5",
"tabWidth": 2
}

Step 3 — Adding Eslint and prettier extensions

  • you can disable no-undefined eslint rule for this line.
  • you can disable no-undefined eslint rule for entire file.
  • Or you can see the documentation, it will take you to the official page, where you can read more about it.

Step 4- Running Eslint and Prettier

"lint": "eslint --fix ."
npm run lint
Photo by Vasily Koloda on Unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store