ESLint > Auto-beautify and space-indentation

Question

I just realized that there is something better than JSLint and I am having a bit of a hassle with it. I am referring to ESLint .

I am setting it up for VS Code , with the official Plugin by Dirk Baeumer .

So far, everything is running great, until I ran into the indent setting.

I am using a customized auto-beautify setting for my editor and it defaults to 4 spaces/tabs indentation on save.

I am getting 2 errors from ESLint due to integrated code convention types:

[ESLint] Expected indentaion of 2 spaces but found 4. (indent)

and also, for some other case scenarios, I get the following:

[ESLint] Expected indendation of 6 spaces but found 8. (indent)

and so on.. 10 but 12 , 12 but 14... you get the point.

How can I default ALL the indentations troughout my document to be 4 spaces?

My current .eslintrc settings:

{
"extends": [
    "eslint:recommended"
],
"root": true,
"rules": {
    // '===' instead of '==' rule
    "eqeqeq": [2, "allow-null"],
    // ^^^ '===' instead of '==' rule
    "indent": [2, 4],
    "quotes": [2, "single"],
    "semi": [2, "always"],
    "no-console": 0
},
"env": {
    "es6": false,
    "browser": true,
    "commonjs": true,
    "node": false,
    "jquery": true
}
}

My "indent": [2, 4], is not working the way I expect it to.

Sample code for reference:

window.setTimeout(function () {

'use strict';
$(document).ready(function () {
    var current_width = $(window).width();
    if (current_width <= 481) {
        $('.widget-form-list').addClass('supv');
        $('.widget-form-item').addClass('supv-form-item');
    }
})
// window resize
$(window).resize(function () {
    var current_width = $(window).width()
    if (current_width < 481) {
        $('.widget-form-list').addClass('supv')
        $('.widget-form-item').addClass('supv-form-item')
    }
})
}, 1000)

Answer 1

ESLint configurations are cascading. Meaning that you can have multiple .eslintrc files in different subdirectories and they will be merged at lint time. Your configuration for indent rule looks correct, but based on the error messages you are getting, chances are - it's being overridden by something that sets default number of indentation spaces to 2.

To figure out what is going on, you can use two different commands in ESLint. First, you can run (from command line) ESLint with print-config option. It requires a file to lint, and it will output computed configuration that ESLint will use for this file. Verify that indent is set to [2, 4] in that configuration. If it's not, you can run ESLint with debug flag, which should print out locations of all config files that are being used. That should show you which file overrides your default configuration.

Answer 2

Problem fixed.

The issue was that while configuring the .eslintrc file using the terminal it somehow created another .eslintrc file within my */js/ directory by itself, which contains some default settings which override my */root/ file.

If you are experiencing the same issue - search for a second .eslintrc file within your project folder.