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.

To solve conflict

install eslint configuration for prettier

npm install eslint-config-prettier

And include it in the extends option in the file .eslintrc.js

extends: [
  ...,
  "prettier",
],

For some rules you mentioned, namely indent or new lines, it doesn't matter, both ESlint and prettier lead to the same result. However max-len and printWidth work significantly different. max-len will just count the number of characters and throws an error if it's exceeded, but the error needs to be manually fixed.

According to the prettier docs, here is how the printWidth option works in contrast:

Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.

Additionally, prettier automatically fixes the line length of your lines. For example, see the following code:

function myVeryCoolFunctionWithLongName(myFirstFunctionArgument, mySecondFunctionArgument, myThirdFunctionArgument) {
}

With default prettier settings, it will be changed to:

function myVeryCoolFunctionWithLongName(
  myFirstFunctionArgument,
  mySecondFunctionArgument,
  myThirdFunctionArgument,
) {}

Whereas ESLint would just throw an error.

To summarize, while ESLint does a decent job in detecting formatting issues, prettier is much smarter in fixing your code to meet a consistent format. Read very closely again the sentence you cited:

ESLint isn't intended to perform code style fixes automatically

Further reference:

• ESLint froze stylistic rules as of May 2020
• TypeScript ESLint encourages using prettier for formatting

Instead of disabling linting for the file, you can instead disable prettier within the eslintrc.js config file:

module.exports = {
  root: true,
  extends: '@react-native-community',
  rules: {
    'prettier/prettier': 0,
  },
};