125

I don't understand why we have plugins and extends. What is the difference between them and do I need one or the other?

jingteng
  • 2,331
  • 4
  • 13
  • 16

3 Answers3

129

extends uses a config file which applies set of rules when you add that to the extends options. A plugin on the other hand provides you with a set of rules that you can individually apply depending on your need. Just having a plugin does not enforce any rule. You have to choose which rules you need. A plugin may provide you with zero, one, or more configuration files. If the plugin provides configuration file, then you can load that in your extends section after adding the plugin in the plugins section.

So essentially, plugins given you some rules that have been coded and you can choose which ones are relevant. It may also provide config files to apply rules that the authors think are logically grouped/relevant but providing a config file is not mandatory for a plugin. extends, on the other hand, provides you the ability to apply rules in bulk based on config file specifications.

Example Plugin - eslint-plugin-react

{
  "plugins": [
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]
}

Example Config - eslint-config-google

{
  "extends": [
    "google"
  ]
}
Nickofthyme
  • 3,032
  • 23
  • 40
shmit
  • 2,306
  • 2
  • 16
  • 20
  • 2
    if i extend a config and it has rule-a, it would automatically be enabled in my config. if i use a plugin, i would have to explicitly enable a rule-b from within that plugin in my rules section. – gaurav5430 Feb 26 '19 at 17:39
  • 1
    Worth noting that if you use a plugin that also provides a configuration, you must `extends` it explicitly if you want to use it as well. – Qwerty Feb 28 '20 at 15:22
  • 23
    "after adding the plugin in the plugins section." - Are you sure? I just used `extends: ['plugin:react/recommended']` without adding it to `plugins: []` section. – Alexander Kim Apr 30 '20 at 16:18
  • 3
    In my opinon this does not fully answer the question which is why there is a follow up question on this topic: https://stackoverflow.com/questions/61528185/eslint-extends-vs-plugins-v2020 – wedi Dec 08 '20 at 10:30
  • its not needed to add to `plugins` before using in `extends`, i can use `extends: ['plugin:prettier/recommended']` without add prettier to `plugins` – Bagaskara Jan 11 '23 at 10:28
46

In addition to shmit's good answer:

extends

is about extending configurations in general, not only plugins. Potential values are:

  • "eslint:recommended"
  • "eslint:all"
  • Shareable configuration from npm package (eslint-config-xxx or scoped name)
  • Plugin configuration from npm package (eslint-plugin-xxx or scoped name)
  • Another configuration file, like "./my/path/.eslintrc.js"

Plugin notation: plugin:<package name>/<configuration name>, e.g. for eslint-plugin-react:

 "extends": ["plugin:react/recommended"]

By extending from a plugin config, we can get recommended rules without adding them manually.

plugins

A plugin is a special eslint npm package, that provides additional rule definitions (rules), environments, processors and configs for different configurations of recommended / default rule values.

The plugins property in .eslintrc.js is merely a flag to enable a given plugin after installation with npm i. We now can refer to the plugin's rules, but have to set all rules values manually.

Think of plugins as a way to activate a plugin - to use its rules, you need to add the plugin once in the chain in every case.

plugins is not needed in your own config, if it is already defined in a configuration, that you extend from by extends.

Example:

eslint-plugin-react already contains plugins: [ 'react' ], hence this entry is not needed anymore in own config and plugin rules can be used directly.

ford04
  • 66,267
  • 20
  • 199
  • 171
  • 2
    To be clear, if you use `extends` property you don't have to use `plugins` property. But if you want to set custom rules then you should use `plugins` property. Is it right? – Rami Chasygov Aug 04 '20 at 10:51
  • 1
    To use rules from a certain plugin, you need to mention this plugin under `plugins` in every case (think of `plugins` as a way to *activate* a plugin). Though you don't need `plugins` in your own config, if it is already defined in a configuration, that you extend from by `extends`. See the `eslint-plugin-react` plugin example above that already contains `plugins: [ 'react' ],`. – ford04 Aug 04 '20 at 11:06
  • If I `npm install eslint-plugin-react` and wish to use its configuration in my own `eslintrc.js`, I must first define `plugins: [ 'react' ]` in order to then `extends: [ 'plugin:react/recommended' ]` - so I DO need the plugin stated in my own config. Have you been describing a more specific case: if I extend a different plugin that itself uses `eslint-plugin-react` - i.e.: `eslint-plugin-using-react`, I wouldn't also need to activate the react plugin in my own config, because I've already got `plugins: [ plugin-using-react]` and `extends: [plugin:using-react/recommended]` in my config? – tonywoode Jun 11 '21 at 16:13
  • `eslint-plugin-react` works fine for me without having to include it in `plugins`. I just add `extends: [ 'plugin:react/recommended' ]`, that's it. If I want to override a rule I then use `rules: { 'react/react-in-jsx-scope': 'off' }` so I really don't understand why `plugins` is even needed. – Cathal Mac Donnacha May 16 '22 at 12:09
9

So found out that plugins add extra capabilities and extends gives you a baseline on which to add your own custom rules. Thanks to my friend Oliver for helping me answer this question!

jingteng
  • 2,331
  • 4
  • 13
  • 16