title: TypeScript + EsLint Indent : Expected indentation of 4 spaces but found 6
body: <p>Hello I have the following error with indentation:</p>
  
  <blockquote>
    <p>Expected indentation of 4 spaces but found
    6.eslint(@typescript-eslint/indent)</p>
  </blockquote>
  
  <p>I've tried all the ways and I couldn't find any solution, eslint indicates to do the following:</p>
  
  <blockquote>
    <p>"indent": "off",</p>
    
    <p>"@typescript-eslint/indent": ["error"],</p>
  </blockquote>
  
  <p>but dont work</p>
  
  <p><strong>.eslintrc</strong> :</p>
  
  <pre><code>// .eslintrc
  {
    "plugins": ["prettier", "@typescript-eslint"],
    "extends": ["airbnb-typescript", "react-app", "prettier"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "project": "./tsconfig.json"
    },
    "settings": {
      "import/resolver": {
        "typescript": {
          "alwaysTryTypes": true
        }
      }
    },
    "rules": {
      "indent": "off",
      "@typescript-eslint/indent": ["error"],
      "quotes": [2, "single", { "avoidEscape": true }],
      "object-curly-spacing": ["warn", "always"],
      "no-unused-vars": [
        "warn",
        {
          "vars": "all",
          "args": "none"
        }
      ],
      "@typescript-eslint/no-unused-vars": [
        "warn",
        {
          "vars": "all",
          "args": "none"
        }
      ],
      "@typescript-eslint/no-explicit-any": [
        "error",
        {
          "ignoreRestArgs": true
        }
      ],
      "max-len": [
        "warn",
        {
          "code": 80,
          "ignoreStrings": true,
          "ignoreTemplateLiterals": true,
          "ignoreComments": true
        }
      ],
      "no-plusplus": [
        "error",
        {
          "allowForLoopAfterthoughts": true
        }
      ],
      "react/jsx-key": "error",
      "import/no-extraneous-dependencies": [
        "error",
        {
          "devDependencies": [
            "**/*.test.js",
            "**/*.test.jsx",
            "**/*.test.ts",
            "**/*.test.tsx",
            "src/tests/**/*"
          ]
        }
      ],
      "react/jsx-props-no-spreading": "off",
      "import/prefer-default-export": "off",
      "react/jsx-boolean-value": "off",
      "react/prop-types": "off",
      "react/no-unescaped-entities": "off",
      "react/jsx-one-expression-per-line": "off",
      "react/jsx-wrap-multilines": "off",
      "react/destructuring-assignment": "off"
    }
  }
  </code></pre>
  
  <p><strong>.prettierrc</strong>:</p>
  
  <pre><code>{
    "printWidth": 80,
    "singleQuote": true,
    "trailingComma": "es5",
    "tabWidth": 2,
    "bracketSpacing": true
  }
  </code></pre>
  
  <p><strong>tsconfig.json :</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "types": ["node", "@emotion/core"],
      "lib": ["dom", "dom.iterable", "esnext"],
      "baseUrl": "src",
      "noImplicitAny": false,
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react"
    },
    "include": ["src"]
  }
  </code></pre>
  
  <p><strong>settings.json</strong></p>
  
  <pre><code>{
      "workbench.colorTheme": "Dracula",
      "editor.formatOnSave": true,
      "explorer.confirmDragAndDrop": false,
      "editor.fontFamily": "Fira Code",
      "editor.fontLigatures": true,
      "editor.fontSize": 18,
      "editor.lineHeight": 24,
      "window.zoomLevel": 0,
      "explorer.confirmDelete": false,
      "editor.rulers": [
          80,
          120
      ],
      "editor.tabSize": 2,
      "editor.renderLineHighlight": "gutter",
      "terminal.integrated.fontSize": 14,
      "emmet.syntaxProfiles": {
          "javascript": "jsx"
      },
      "emmet.includeLanguages": {
          "javascript": "javascriptreact"
      },
      "javascript.updateImportsOnFileMove.enabled": "never",
      "breadcrumbs.enabled": true,
      "editor.codeActionsOnSave": {
          // For ESLint
          "source.fixAll.eslint": true,
      },
      "typescript.updateImportsOnFileMove.enabled": "always",
      "[typescriptreact]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
  }
  </code></pre>
  
  <p>code with error:</p>
  
  <pre><code>  &amp;:hover {
      border-left: ${(props: ListItem) =&gt; (props.open ? '' : '3px orange solid')};
      background: ${(props: ListItem) =&gt;
        props.open ? `${shade(0.4, '#3c8dbc')}` : `${shade(0.4, '#3c8dbc')}`};
      ${ListWrap} {
        :after {
          content: '';
          position: absolute;
          display: ${(props: IListItem) =&gt;
            props.isDropDown &amp;&amp; props.open === false ? 'block' : 'none'};
          right: 0px;
          width: 0;
          overflow: hidden;
          height: 0;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-right: 10px solid ${shade(0.2, '#3c8dbc')};
          clear: both;
          z-index: 11;
        }
      }
    }
  `;
  </code></pre>
  
  <p>error:</p>
  
  <p><a href="https://i.stack.imgur.com/Sle4k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sle4k.png" alt="enter image description here"></a></p>