2

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.

Class definition on multiple lines

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.

Dolan
  • 313
  • 1
  • 4
  • 14
  • 1
    Most devs use prettier for formatting and eslint for linting and use this module to achieve it. https://github.com/prettier/eslint-config-prettier - might help. – Bergur Jan 19 '23 at 23:21
  • Yeah that helps, also removing the indent rule from eslint will stop the error. I used the `eslint-plugin-prettier` for eslint and added a rule `"prettier/prettier": "error"` to throw the indent errors again. – Dolan Jan 19 '23 at 23:34

1 Answers1

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.

Dolan
  • 313
  • 1
  • 4
  • 14