ESLint: Using Recommended Default Rules with Angularjs Applications

Question

I recently added ESLinting to my angular application and soon realized that I needed the eslint-plugin-angular plugin to get my application to be drawn correctly.

Before that, I used the extends property in my .eslintrc file and in eslint:recommended setting to use the recommended eslint rule set.

 { "extends": "eslint:recommended" } 

I tested this by adding a trailing comma to the object definition in my code to make sure I see the error from eslint.

Now, following the instructions for eslint-plugin-angular, I also installed eslint-config-angular, and I see that the fastest way to get started is to use a shared configuration.

If I use the extends angular config parameter instead of my current one:

 { "extends": "angular" } 

I no longer get my error for an unexpected comma.

So, is there a way to use both angular and eslint:recommended in the extends extension option? For example:

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

(which, as I know, does not work)

If not, does this mean that I need to create a rule configuration object in my .eslintrc to mimic those recommended from eslint?

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

Answer 1

I can't talk about whether there was a code change between the way this SO article was introduced, but I use "extends": ["eslint:recommended", "angular"] in my .eslintrc file, and it works fine. I have it at the same level as the "env" property.

In my package.json file there are eslint and eslint-plugin-angular versions 2.3.0 and 0.5.0 respectively.

Answer 2

If you are using TypeScript (e.g. Angular2), you can use tslint . There are eslint rules for tslint and tslint-microsoft-contrib from Microsoft.

Finally, there is a rule set for Angular2: codelyzer