Extending multiple recommended configurations in ESLint

Question

The Story:

Currently, we are extending the recommended ESLint configuration:

{
  "extends": "eslint:recommended",
  ...
  "plugins": [
    "angular",
    "jasmine",
    "protractor"
  ],
  "rules": {
    "no-multiple-empty-lines": 2,
    "no-trailing-spaces": 2,
    "jasmine/valid-expect": 2
  }
}

And also using angular, jasmine and protractor ESLint plugins which also ship with their own recommended configurations (default rule strictness levels and default rule parameters).

The Question:

How can we use all the recommended configurations at the same time - the one that ESLint and all the used plugins ship with?

---

Tried the following:

{
  "extends": [
    "eslint:recommended",
    "plugin:protractor/recommended",
    "plugin:jasmine/recommended",
    "plugin:angular/recommended"
  ],
  ...
}

but got the following error:

Cannot read property 'recommended' of undefined

Pasteboard

Answer 1

How can we use all the recommended configurations at the same time - the one that ESLint and all the used plugins ship with?

Your syntax is correct, and multiple extensions are loaded like this:

{
  "extends": [
    "eslint:recommended",
    "plugin:protractor/recommended",
    "plugin:jasmine/recommended",
    "plugin:angular/recommended"
  ]
}

However, this requires that the plugins in question actually come bundled with recommended settings. eslint-plugin-angular does not, and you have to install it yourself:

npm install --save-dev eslint-config-angular

Change your eslint settings to

{
  "extends": [
    "eslint:recommended",
    "plugin:protractor/recommended",
    "plugin:jasmine/recommended",
    "angular"
  ]
}

and it should work.

Litigious

Shouldn't that be rather a comment than an answer? – Genesisgenet

@Daenu Yeah, probably. Updated my answer to better highlight the correct solution. – Litigious

can we add airbnb as well to the extends? – Officiary