title: ESLint > Auto-beautify and space-indentation
body: <p>I just realized that there is something better than <strong><a href="http://www.jslint.com/" rel="nofollow noreferrer">JSLint</a></strong> and I am having a bit of a hassle with it. I am referring to <strong><a href="http://eslint.org/" rel="nofollow noreferrer">ESLint</a></strong>.</p>
  
  <p>I am setting it up for <strong><a href="https://code.visualstudio.com/" rel="nofollow noreferrer">VS Code</a></strong>, with the official <strong><a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" rel="nofollow noreferrer">Plugin by Dirk Baeumer</a></strong>.</p>
  
  <p>So far, everything is running great, until I ran into the <code>indent</code> setting.</p>
  
  <p>I am using a customized auto-beautify setting for my editor and it defaults to 4 spaces/tabs indentation on save.</p>
  
  <p>I am getting 2 errors from ESLint due to integrated code convention types:</p>
  
  <h2><code>[ESLint] Expected indentaion of 2 spaces but found 4. (indent)</code></h2>
  
  <p>and also, for some other case scenarios, I get the following:</p>
  
  <h2><code>[ESLint] Expected indendation of 6 spaces but found 8. (indent)</code></h2>
  
  <p>and so on.. 10 but 12 , 12 but 14... you get the point.</p>
  
  <blockquote>
    <p><strong><em>How can I default ALL the indentations troughout my document to be 4 spaces?</em></strong></p>
  </blockquote>
  
  <p>My current <code>.eslintrc</code> settings:</p>
  
  <pre><code>{
  "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
  }
  }
  </code></pre>
  
  <p>My <code>"indent": [2, 4],</code> is not working the way I expect it to.</p>
  
  <p>Sample code for reference:</p>
  
  <pre><code>window.setTimeout(function () {
  
  'use strict';
  $(document).ready(function () {
      var current_width = $(window).width();
      if (current_width &lt;= 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 &lt; 481) {
          $('.widget-form-list').addClass('supv')
          $('.widget-form-item').addClass('supv-form-item')
      }
  })
  }, 1000)
  </code></pre>