ESLint: Using recommended default rules with angularjs applications

Question

I have recently added ESLint-ing into my angular application and soon realised I needed the eslint-plugin-angular plugin in order to get my application to be linted correctly.

Prior to this, I was using the extends property in my .eslintrc file and setting to eslint:recommended to make use of the eslint recommended rule set.

{
  "extends": "eslint:recommended"
}

I tested this worked by adding a trailing comma to an object definition in my code to make sure I saw an error appear from eslint.

Now, following the guides for the eslint-plugin-angular, I have also installed eslint-config-angular and I see that the quickest way to get started is using the shareable config.

If I use the extends angular config option in place of my current:

{
  "extends": "angular"
}

I no longer get my error thrown for an unexpected trailing comma.

So, is there a way I can use both angular and eslint:recommended in the extends config option? E.g:

{
  "extends": ["angular", "eslint:recommended"]
}

(which I know does not work)

If not, does this mean I have to create a rules config object in my .eslintrc to mimic the recommended ones from eslint?

{
  "extends": "angular",
  "rules" : {
    ...
  }
}

Answer 1

I can't speak to whether or not there was a code change between the time this SO article was entered but I am using "extends": ["eslint:recommended", "angular"] in my .eslintrc file and it is working fine. I have it at the same level as the "env" property.

My package.json file has eslint and eslint-plugin-angular versions 2.3.0 and 0.5.0, respectively.