What's the difference between plugins and extends in eslint?

Question

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

Answer 1

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:/, 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.