How to Setup EsLint + Prettier for Your React Project in 2021?

In this article, we will look up how to perfectly setting up Eslint and Prettier for React Project.

This article is for any React projects, whether or not if you are using create-react-app.

To have a productive result with your react project, it is crucial to be not disturbed by other people's bad formatted code! That's why you should set up linters and it's may not be as hard as you thought!

Talking to Eslint enforces code quality (unused variables, unreachable code, etc). And Prettier makes you not worry about all the minor formatting details. For more information about Prettier, see here

Now let's dive into setup both tools for productive outputs

Install Dependencies

To install all the dependencies you need, run the following in the terminal while you’re at the root of your project:

npm i --save-dev eslint@6.8.0 prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

Note: The version for eslint is set to 6.8.0 so that it is compatible with create-react-app.

Modify package.json

Now, modify your package.json so that you can lint your code easily.

{
    "scripts": {
... add the following two line        "lint": "eslint --fix .",
        "lint-check": "eslint ."
    }
}

And make sure every line ends in a comma (except the last one).

Create eslintrc File

To configure the linter, create a file named .eslintrc.js at the root of the project. I have created a template for you to copy-paste.

module.exports = {
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:prettier/recommended',
  ],
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 8,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  ignorePatterns: ['/node_modules/**', '/build/**'],
  rules: {
    'no-unused-vars': ['warn', { args: 'none', argsIgnorePattern: 'req|res|next|val' }],
    'prettier/prettier': ['error'],
  },  settings: {
    react: {
      version: 'detect',
    },
  },
};

For more options and what they mean, you can view the ESLint official documentation.

This configuration will be read by ESLint, which in turn uses Prettier to format code. This way the two linters won’t have a fight on coding styles.

One Other Configuration File

Create a file named .prettierrc. This file provides additional configurations to Prettier. This the last step of the configuration.

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

You can view Prettier documentation for options.

Finally

Now you can run npm run lint to fix all the styling issues.

If you just want to see the styling issues without fixing them, run npm run lint-check.

Thanks for reading! If you encountered any problems, please leave a comment, I am happy to help!

Also read this article 10 Best Free Templates for React Js in 2020