UPDATE 2023: ESLint is deprecating formatting rules and recommend you use a source code formatter instead.

tl;dr: Use eslint-config-prettier in eslint, and run prettier separately. You can ignore the rest.

From v8.53.0 onwards, you will see a deprecation warning if those formatting rules are enabled in your config. You should still use eslint-config-prettier to disable conflicting rules until the rules are removed in a new major release.

ESLint contains many rules and those that are formatting-related might conflict with Prettier, such as arrow-parens, space-before-function-paren, etc. Hence using them together will cause some issues. The following tools have been created to use ESLint and Prettier together.

For more information, refer to the official Prettier docs.

It's the recommended practice to let Prettier handle formatting and ESLint for non-formatting issues, prettier-eslint is not in the same direction as that practice, hence prettier-eslint is not recommended anymore. You can use eslint-plugin-prettier and eslint-config-prettier together.

This packages have different purposes:

• eslint-plugin-prettier - runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

• eslint-config-prettier - turns off all rules that are unnecessary or might conflict with Prettier. It's mean that if you use some eslint-config(your own or third party) and this config have conflicts with prettier rules - it should resolve this conflicts by turn off this rules.

I think you can just use plugin:prettier/recommended.

From recommended configuration, it mentioned that plugin:prettier/recommended expands to

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

We can see that the extends array contains prettier. I think you don't need to add it again.