I don't understand why we have plugins and extends. What is the difference between them and do I need one or the other?
Basically, it is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. It analyzes your code quickly, finds any problems in your code, and even fixes them automatically. In this article, we are going to explore four essential ESLint plugins you will need in your React setup.
Runs Prettier as an ESLint rule and reports differences as individual ESLint issues. If your desired formatting does not match Prettier's output, you should use a different tool such as prettier-eslint instead. Please read Integrating with linters before installing.
Keep in mind that we have over 200 rules, and that is daunting both for end users and the ESLint team (who has to maintain them).
There are two primary ways to configure ESLint: Configuration Comments - use JavaScript comments to embed configuration information directly into a file. Configuration Files - use a JavaScript, JSON, or YAML file to specify configuration information for an entire directory and all of its subdirectories.
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.
"plugins": [ "react" ], "extends": [ "eslint:recommended", "plugin:react/recommended" ]
"extends": [ "google" ]
Good Luck...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With