Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ESLint - Override rules from eslint-plugin-prettier

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 work 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 doesnt state which rule exactly is causing this behavior and therefor I dont know which one to override.

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

like image 429
r0skar Avatar asked Apr 17 '19 14:04

r0skar


People also ask

Do I need ESLint plugin Prettier?

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.

How do I remove ESLint rules?

If you want to disable an ESLint rule in a file or on a specific line, you can add a comment. On a single line: const message = 'foo'; console. log(message); // eslint-disable-line no-console // eslint-disable-next-line no-console console.


2 Answers

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,
      },
    ],
  }
}
like image 82
Vladislav Zaynchkovsky Avatar answered Sep 19 '22 08:09

Vladislav Zaynchkovsky


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.

like image 33
eikooc Avatar answered Sep 20 '22 08:09

eikooc