How do I setup a folder with a different rule and another folder with a different rule

Question

My folder structure is as follows:

-client // Contains the front end and AngularJS code  
-server // Contains backend code  
-models // Contains backend code  

Now, I wish to use eslint angular only for the client folder whereas I wish to use airbnb base for the other folders that are not inside the client folder.

I have two .eslintrc.json files - one in the client folder and one in the ROOT folder.

Client folder configuration looks like:

{
    "extends": "angular"
}

whereas the one in the root folder looks like:

{
    "extends": "airbnb-base",
    "root": true
}

Now, in the root folder, when I run eslint ., while the backend folders are being linted correctly, the front end doesn't seem to be using the angularjs eslint at all - I am getting errors about ES6 which I am not using the client folder. I don't also get errors about not following John Papa's style guide in the client folder (which the angular plugin should).

However, if I go inside the client folder and run the esling command inside it, it seems to use the correct configuration.

How do I configure it so that only client folder uses the angular eslint whereas the other folders use the airbnb one?

Answer 1

Configuration for client and server code

If you wonder how to lint different part of code, this is a suggestion.

- myproject
--- .eslintrc
--- src
------ client
--------- .eslintrc 
------ server
--------- .eslintrc

myproject/.eslintrc contains the common rules. For instance,

rules:
    brace-style: [2, "1tbs"]
    comma-style: [2, "last"]
    default-case: 2
    func-style: [2, "declaration"] ...

src/client/.eslintrc contains client side rules. For instance,

env:
    browser: true

globals:
    angular: false

plugins:
  - angular

src/server/.eslintrc contains server side rules. For instance

env:
    node: true

Usually I lint a javascript file when I save it.

ESLint is installed also globally. As stated in config help page of ESLint, a globally-installed instance of ESLint can only use globally-installed ESLint plugins. A locally-installed ESLint can make sure of both locally- and globally- installed ESLint plugins. That's I need to install also globally the plugin.