18

There's answered question which in my opinion doesn't actually answers the question, on the difference between extends: [] vs plugins: [] in ESLint.

In my case, i just used extends section:

extends: [
  'plugin:@typescript-eslint/recommended',
],
plugins: [],
rules: {
  '@typescript-eslint/explicit-function-return-type': [
    'error',
    {
      allowExpressions: true,
    },
  ],
}

As you can see, i just used predefined config from plugin:@typescript-eslint/recommended and also overwritten @typescript-eslint/explicit-function-return-type rule in rules: {} section. But why do we need this PLUGINS section then? If everything works without it? What do i miss?

Alexander Kim
  • 17,304
  • 23
  • 100
  • 157

1 Answers1

16

You have done it correctly.

For your example, there are 2 ways to do add typescript-eslint...

  • 1st way:
{
  parser: "@typescript-eslint/parser",
  parserOptions: { sourceType: "module" },
  plugins: ["@typescript-eslint"],
  extends: [],
  rules: {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        allowExpressions: true
      }
    ]
  }
}
  • 2nd way:
{
  plugins: [],
  extends: ["plugin:@typescript-eslint/recommended"],
  rules: {
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        allowExpressions: true
      }
    ]
  }
}

The difference is...

  • 1st way:
    • parser, parserOptions and plugins are manually added,
    • Only @typescript-eslint/explicit-function-return-type is enforced.
  • 2nd way:
    • plugin:@typescript-eslint/recommended has automatically added parser, parserOptions and plugins.
    • Recommended typescript rules are added and enforced.
    • @typescript-eslint/explicit-function-return-type is augmented and enforced.

This is why when you use plugin:@typescript-eslint/recommended, things work normally even if plugins is empty. A well-written plugins/configs allows that to happen.

Emerzonik
  • 525
  • 5
  • 9
  • This answer seems to imply that if I add something under `extend:`, adding it under `plugins:` as well is unnecessary. I think that's not right. In a project I'm working on, I've just removed a plugin from `plugins` (and left it as it was in `extends:`). Now I get `eslint` errors saying `Definition for rule 'xxxxx' was not found.` – LGenzelis Sep 09 '21 at 11:58
  • 2
    @LGenzelis I think it depends on the plugin and how the plugin author implemented it, which is a bit annoying as it means you can never be sure if a plugin will work without adding it to `plugins` or not. – Cathal Mac Donnacha May 16 '22 at 12:16