Effortlessly Elevate Your React Code with ESLint and Prettier: A Step-by-Step Guide for 2023

There are a lot of older tutorials (Pre-Feb 2021) that have an outdated configuration file set up that no longer works.
Here is how to set up ESlint and Prettier like a boss in 2023

The breaking change is listed here: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

First off, if you don’t have a project, create one.

npx create-react-app stackfailsapp && cd stackfailsapp

To configure ESlint.

npm init @eslint/config

The command above will start an automated process to configure your project, I will walk you through this below.

Select: “To check syntax, find problems and enforce code style.”

Select: “JavaScript modules (import/export)”

Select: “React”

Select: If you are using TypeScript, you can select “yes” we will select “no” for the tutorial

Select: “Run code in browser.”

Select: “Use a popular style guide.” I prefer Airbnb

Select: My preference here is JSON.

Select: “yes” to install plugins. NPM is my preference here

Once the install completes, your project will have a .eslintrc.json file in your project. We will update this config to extend from prettier by adding the “prettier” string to the extends code block in your .eslintrc.json file .

Now to install and configure prettier to work with ESlint in 2023

npm install - save-dev eslint-config-prettier prettier

Once that install is finished, it is time to create the prettier config file

Now create a .pretterrc.json file in the root of your project

Specifically that file will be on the same level as the .eslintrc.json file created earlier and add this snippet to the .pretterrc.json file

{
 "semi": true,
 "tabWidth": 2,
 "printWidth": 100,
 "singleQuote": true,
 "trailingComma": "all",
 "jsxSingleQuote": true,
 "bracketSpacing": true
}

Now lets put this into action

In your package.json file, update your scripts to include this snippet.

"scripts" :{
  "lint": "eslint src/**/*.{js,jsx}",
  "lint:fix": "eslint - fix src/**/*.{js,jsx,}",
  "format": "prettier - write src/**/*.{js,jsx,} - config .prettierrc.json"
}

A note on the above snippet, you can add other file extensions to the config, such as .scss, .tsx etc, if your project is using them.

Now you can run these from your command line
npm run <command>

npm run lint:fix

Here is the final .eslintrc.json file.

{
  "env": {
    "browser": true,
    "es2021": true,
      "jest": true

  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "prettier"
  ],
  "overrides": [
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

I have included jest in the env key to the config for handling the default tests in a react app. Since React 17, you no longer need to import React in each .jsx file, so I have added the rule to disable that check.

Here is the final .prettierrc.json file

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

In summary, setting up ESLint and Prettier in your React project is a straightforward process that can significantly improve the quality of your code. Not only does it help catch potential errors and enforce coding standards, but it can also make collaboration with other developers more seamless. With the step-by-step guide and tips outlined in this article, you can easily integrate these tools into your React project and streamline your development workflow. So, if you found this article helpful, be sure to give it a round of applause, share it with your fellow developers, and follow for more useful content like this.

Handy Reference documentation

ESlint: https://eslint.org/docs/latest/rules/

Prettier: https://prettier.io/docs/en/index.html

Looking for a fun and informative source for all things programming and development? Look no further than www.stackfails.io!