Proper way of Installing ESlint with Prettier in a React Project

Question

I've recently started using eslint and prettier in my projects, but I'm always not sure if I'm installing them correctly. I've read several articles online and it seems each one does it differently. I'm trying to use the Airbnb configuration. I currently do not get any errors in a basic React app, but I just want to be sure it's the correct configuration. What would be the best way to run eslint with prettier?

Here are my files:

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    jest: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
  },
};

.prettierrc.js

module.exports = {
    trailingComma: "es5",
    tabWidth: 2,
    semi: true,
    singleQuote: true,
  };

in my package.json

"devDependencies": {
    "eslint": "^7.25.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.2.1"
  }

Answer 1

There are a number of ways to set up prettier to work with eslint and it can be confusing.

To run prettier as an eslint rule, you would want to add a rule that allows eslint to run prettier. You do that with the eslint-plugin-prettier plugin.

  "plugins": ["prettier"],          // Defines a rule that allows eslint to run prettier.
  "rules": {
    "prettier/prettier": "error"    // Turns on that rule.
  }

You would also want to turn off eslint rules that may conflct with prettier. You do this with the eslint-config-prettier extension. Note this should come after any other extensions in order to override the rules as appropriate.

"extends": [
    /*other extensions*/, 
    "prettier"                      // Turns off conflicting eslint rules.  
]             

As per their documentation, it sounds the recommended extension that comes with the prettier plugin actually takes care of everything for you, so you should be able to get away with just:

  extends: [
    // .. other extensions
    'plugin:prettier/recommended',
  ]

https://github.com/prettier/eslint-plugin-prettier

Also, in case third-party plugins come with their own rules that may conflict with prettier, you used to have to add "prettier/that-plugin" - "prettier/react" in your case for instance - to the list of plugins in order to tell eslint to defer to prettier for these non-standard rules as relevant as well. But this no longer seems required.

Answer 2

I used this guide for setting up eslint with airbnb's style guide on a Yarn monorepo/workspace.