Eslint & Prettier configuration in React project

Tanvir Ahammad Chy — Tue, 02 Aug 2022 11:16:00 +0000

When building web applications, using linting tools help you a crucial role in web development process. I think every developer should know, how to install and configure the linting process in your application. So, today i'll discuss about linting configuration and efficiently making sure that the best code standards are applied to our project.

Step 01: Install eslint package in your project as dev dependency.

yarn add eslint --dev

Step 02: Eslint need to initialize, .eslintrc.json file will be created.

yarn run eslint --init

Step 03: Eslint rules updated from .eslintrc.json file.

"rules": {
  "react/react-in-jsx-scope": "off",
  "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
  "prettier/prettier": ["error", { "singleQuote": true }],
  "no-console": "warn"
}

Step 04: Required plugins are needed to be install,

yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev

Step 05: Update extends array on .eslintrc.json file,

"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"];

Step 06: Create new .prettierrc file, paste following codes,

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

Step 07: Update your package.json file with following codes,

"lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

Running the script yarn format will format the code style of all JavaScript files. Like ESLint, it has amazing Code Editors extensions that enable the Prettier to run on files when they are being saved, formating them on the fly without the need to run the script manually!

Note: For this process i've used yarn packages, if you're familiar with npm, then you can use npm packages.

Time is everything in a fast pace environment so it's important to have a good setup of tools allowing the developers to be more efficient and spend more time developing new features than looking for errors on the code.

Thank you !

DEV Community: Tanvir Ahammad Chy

Eslint & Prettier configuration in React project