ESLint - Override rules from eslint-plugin-prettier

Question

I am using ESLint with the prettier plugin and configuration:

// eslintrc.js
extends: [
  `eslint:recommended`,
  `plugin:react/recommended`,
  `plugin:@typescript-eslint/recommended`,
  `plugin:prettier/recommended`,
  `prettier/react`,
  `prettier/@typescript-eslint`
]

This works great, but I would like to disable a certain prettier rule, which is removing "unneeded" parentheses (removing them actually breaks my code):

// Replace `(state.counter)` with `state.counter` eslint(prettier/prettier)
return <div>{(state.counter)}</div>

As you can see from the message above, it doesn't state which rule exactly is causing this behavior and therefore I don't know which one to override.

I have tried to override all rules found in eslint-prettier-config, but nothing worked and I don't want to keep using // eslint-disable-next-line prettier/prettier.

score 20 · Answer 1 · answered May 20 '20 at 20:58

Prettier is not so configurable. You can try configuration they have: https://prettier.io/docs/en/configuration.html

Put .prettierrc file, or eslint config like this:

{
  rules: {
   'prettier/prettier': [
      'error',
      {
        trailingComma: 'all',
        tabWidth: 2,
        semi: false,
        singleQuote: true,
        bracketSpacing: true,
        eslintIntegration: true,
        printWidth: 120,
      },
    ],
  }
}

thanks, saved me a lot of time <3 – Yegor Dec 31 '21 at 19:53 — Yegor, Dec 31 '21 at 19:53

score 14 · Accepted Answer · answered Feb 17 '20 at 21:30

It is not currently possible to disable that specific rule from prettier through configuration, but to override rules in eslint that come from the extends block, you can either write in the rule like this:

"rules": {
  "prettier/prettier": "off"
  "@typescript-eslint/no-use-before-define": [
    "error",
    { "functions": false, "variables": true, "classes": true },
  ],
}

Or to only override it for a specific file pattern you can override it in the overrides block.

"overrides": [
  {
    "files": ["*.html"],
    "rules": {
      "prettier/prettier": "off",
      "@typescript-eslint/unbound-method": "off"
    }
  }
]

Here I am showing both the config you were looking for, and an inherited rule from a nested package to show future visitors how to do it.

In the `overrides` section, how did you know you should put `"prettier/prettier"`? Why not just `prettier`, is this documented anywhere? I'm trying to do the same for the cypress plugin and don't know what exactly to put — Tobias Feil, Jul 17 '20 at 08:49
@TobiasFeil If you are using VSCode, the source of lint errors are usually shown in the problem output, it says `prettier/prettier` instead of `prettier`, that's probably where they got it. — buriedalive, Dec 20 '22 at 08:53

ESLint - Override rules from eslint-plugin-prettier

2 Answers2