I try various config .eslintrc.js files in the project and here is the question I had.

In the extends section, how does the connection order work and what will happen to the rules that conflict with each other? Suppose I have not some standard set of rules like

extends: ['plugin:vue/essential', 'airbnb-base'],

and a hodgepodge of a large number of rule packages taken from some article ( here, for example, a large bundle).

It is unlikely that the authors checked their rules for compatibility with each other, it is possible that there will be some conflicting rules in different packages. Will the first rule apply? Last thing? Both will be applied and two opposite messages like "there should be single quotes" / "there should be double quotes" at once will be visible?

    1 answer 1

    tl; dr: the last rule applies.

    According to the documentation

    A config file can extend basic configurations using the extends property, which can be:

    • line (name of base configuration)
    • array of strings: each following configuration is inherited from the previous one

    The rules property allows you to change or extend the basic configuration in the following ways:

    • Add additional rules (not present in the base configuration)
    • Change severity of the rule inherited from the base configuration (without changing the parameters of the rule). For example:
      • Basic configuration: "eqeqeq": ["error", "allow-null"]
      • Configuration, extending the base: "eqeqeq": "warn"
      • Result: "eqeqeq": ["warn", "allow-null"]
    • Override the rule from the base configuration. For example:
      • Basic configuration: "quotes": ["error", "single", "avoid-escape"]
      • Configuration extending the base: "quotes": ["error", "single"]
      • Result: "quotes": ["error", "single"]