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/remended',
    'airbnb',
    'plugin:prettier/remended',
  ],
  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"
  }

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/remended',
    'airbnb',
    'plugin:prettier/remended',
  ],
  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"
  }

• javascript
• reactjs
• eslint
• prettier
• eslint-config-airbnb

Share Improve this question Follow asked May 8, 2021 at 6:29 alti21alti21 14711 gold badge33 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 e 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 remended extension that es 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/remended',
  ]

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

Also, in case third-party plugins e 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.

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