ESLint and Prettier indent clashing with multi-line class definition

Question

I've got a class definition that is too long for a single line. Prettier tries to wrap it but when it does it adds an indentation, which I think is correct. But ESLint doesn't like this so it throws an indent error.

There seems to be no config in ESLint to change this behaviour.

Prettier output:

// ESLint throws an error
export default class FormFieldTemplateCheckboxList
    implements ClassComponent<FormFieldTemplateCheckboxListProps> {}

ESLint output:

// Prettier formats to the above on save
export default class FormFieldTemplateCheckboxList
implements ClassComponent<FormFieldTemplateCheckboxListProps> {}

It's a loop of ESLint and Prettier clashing with what they think is correct.

Partial Fix

This fix requires the eslint-config-prettier plugin, and removing indent from the eslint rules.

My old .eslintrc.json included the following;

"rules": {
    "indent": ["error", "tab", { "SwitchCase": 1 }]
}

Now prettier controls the indentation. Now there is no error being thrown, which is what I want to occur.

Answer 1

I haven't found a solution that keeps the indent rules in eslint, but what I've found in my opinion is better.

Remove the indent rule from .eslintrc.json

"rules": {
    // "indent": ["error", "tab", { "SwitchCase": 1 }]
    // ...
}

This will now not show any errors with indents. To fix this I installed eslint-plugin-prettier .

Put prettier in the plugins list, and then add prettier/prettier in the rules and set it to either error or warn .

This will show an error or warning based on any prettier issues, including indent.

"plugins": [
    "prettier"
    // ...
],
"rules": {
    "prettier/prettier": "error",
    // ...
}

I'm not sure if there's a way to change the severity based on the prettier rule.