title: React typescript: eslint max-length autofix does not work
body: <p>I am trying setup React typescript's eslint setup where code's max lenght is 80, if the code is more than 80 then it will break the line and codes will go to the next line automatically. But seems like my eslint max-lenght auto-fix does not work. I just go warn and when i click the quick its just disable the entire component. Currently, my code looks this, I have scroll all the way to the right to see all the codes. PS. I delete prettier extension.</p>
  
  <p><a href="https://i.stack.imgur.com/P0tVU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/P0tVU.png" alt=""></a></p>
  
  <p><strong>This is my .eslintrc.js setup</strong> </p>
  
  <pre><code>module.exports = {
    parser: "@typescript-eslint/parser",
    extends: [
      "eslint:recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended"
    ],
    parserOptions: {
      jsx: true,
      useJSXTextNode: true
    },
    plugins: [
      '@typescript-eslint',
      "react",
      "react-hooks"
    ],
    settings: {
      react: {
        version: "999.999.999" // no latest option, 999.999.999 as a hack
      }
    },
    rules: {
      semi: ["warn", "always"],
      indent: "off",
      "@typescript-eslint/indent": ["warn", 2],
      "@typescript-eslint/explicit-function-return-type": 0,
      "@typescript-eslint/no-explicit-any": 0,
      "@typescript-eslint/interface-name-prefix": 0,
      "@typescript-eslint/no-empty-interface": 0,
      "react/jsx-uses-vars": 1,
      "quotes": "off",
      "@typescript-eslint/quotes": ["warn", "backtick", { avoidEscape: true }],
      "max-len": ["warn", { code: 80, ignoreComments: true }],
      "arrow-parens": ["warn", "always"],
      "arrow-spacing": "warn",
      "no-var": "warn",
      "no-const-assign": "warn",
      "no-dupe-class-members": "warn",
      "no-duplicate-imports": ["warn", { includeExports: true }],
      "prefer-arrow-callback": ["warn", { "allowNamedFunctions": true }],
      "prefer-const": "warn",
      "react/display-name": ["warn", { "ignoreTranspilerName": true }],
      "padding-line-between-statements": [
        "warn",
        { blankLine: "always", prev: "function", next: "function" }
      ],
      "prefer-destructuring": [
        "warn",
        {
          array: false,
          object: true
        },
        {
          enforceForRenamedProperties: false
        }
      ],
      "template-curly-spacing": "warn",
      "no-dupe-args": "warn",
      "no-dupe-keys": "warn",
      "no-duplicate-case": "warn",
      "no-empty": "warn",
      "no-extra-semi": "warn",
      "no-extra-parens": ["warn", "all"],
      "no-extra-boolean-cast": "warn",
      "no-func-assign": "warn",
      "no-inner-declarations": "warn",
      "no-irregular-whitespace": "warn",
      "no-sparse-arrays": "warn",
      "no-unreachable": "warn",
      "accessor-pairs": "warn",
      "block-scoped-var": "warn",
      curly: "warn",
      "default-case": "warn",
      "dot-notation": "warn",
      eqeqeq: "warn",
      "guard-for-in": "warn",
      "no-empty-pattern": "warn",
      "no-multi-spaces": ["warn", { ignoreEOLComments: true }],
      "no-new": "warn",
      "no-new-func": "warn",
      "array-bracket-newline": ["warn", { multiline: true }],
      "array-bracket-spacing": ["warn", "never"],
      "block-spacing": "warn",
      "brace-style": ["warn", "1tbs", { allowSingleLine: true }],
      camelcase: "warn",
      "comma-dangle": [
        "warn",
        {
          arrays: "never",
          objects: "never",
          imports: "never",
          exports: "never",
          functions: "never"
        }
      ],
      "comma-spacing": ["warn", { before: false, after: true }],
      "comma-style": ["warn", "last"],
      "computed-property-spacing": ["warn", "never"],
      "eol-last": ["warn", "always"],
      "func-call-spacing": ["warn", "never"],
      "func-names": ["warn", "always", { "generators": "as-needed" }],
      "func-style": ["warn", "expression", { allowArrowFunctions: true }],
      "jsx-quotes": ["warn", "prefer-double"],
      "key-spacing": ["warn", { beforeColon: false }],
      "keyword-spacing": ["warn", { before: true }],
      "lines-around-comment": ["warn", { beforeBlockComment: false }],
      "no-array-constructor": "warn",
      "no-lonely-if": "warn",
      "no-multiple-empty-lines": ["warn", { max: 1, maxEOF: 1 }],
      "no-multi-assign": "warn",
      "no-trailing-spaces": "warn",
      "no-unneeded-ternary": "warn",
      "no-whitespace-before-property": "warn",
      "object-curly-spacing": ["warn", "always"],
      "object-property-newline": ["warn", { allowAllPropertiesOnSameLine: true }],
      "padded-blocks": ["warn", "never"],
      "quote-props": ["warn", "always"],
      "semi-spacing": ["warn", { before: false, after: true }],
      "semi-style": ["warn", "last"],
      "sort-vars": ["warn", { ignoreCase: true }],
      "space-before-blocks": ["warn", "always"],
      "space-before-function-paren": ["warn", {
        "anonymous": "never",
        "named": "never",
        "asyncArrow": "always"
      }],
      "space-in-parens": ["warn", "never"],
      "spaced-comment": ["warn", "always"],
      "switch-colon-spacing": "warn",
      "@typescript-eslint/explicit-member-accessibility": "warn",
      "no-empty-function": "off",
      "@typescript-eslint/no-empty-function": ["error", { "allow": ["arrowFunctions"] }],
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
  };
  </code></pre>
  
  <p>** This is my .vscode/settings.json ** </p>
  
  <pre><code>{
      "editor.cursorBlinking": "blink",
      "editor.cursorStyle": "line",
      "editor.detectIndentation": false,
      "editor.fontFamily": "'Operator Mono',  'SF Mono', Menlo, Operator Mono, Monaco, 'Courier New', monospace",
      "editor.fontLigatures": true,
      "editor.fontSize": 14,
      "editor.fontWeight": "500",
      "editor.insertSpaces": true,
      "editor.letterSpacing": 0,
      "editor.lineHeight": 28,
      "editor.lineNumbers": "on",
      "editor.minimap.enabled": true,
      "editor.quickSuggestions": {
          "comments": false,
          "other": true,
          "strings": false
      },
      "editor.quickSuggestionsDelay": 10,
      "editor.renderControlCharacters": true,
      "editor.renderIndentGuides": true,
      "editor.renderWhitespace": "all",
      "editor.rulers": [
          90,
          100
      ],
      "editor.snippetSuggestions": "top",
      "editor.tabCompletion": "on",
      "editor.tabSize": 2,
      "editor.trimAutoWhitespace": true,
      "files.autoGuessEncoding": true,
      "files.autoSave": "onFocusChange",
      "files.defaultLanguage": "html",
      "files.exclude": {
          "**/*.pyc": true,
          "**/package-lock.json": true,
          "**/styles/css/": true,
          "**/.DS_Store": true,
          "**/.git": true,
          "**/.hg": true,
          "**/.svn": true,
          "**/CVS": true,
          "**/distribution/": true,
          "**/dist/": true,
          "**/libraries/": true,
          "**/lib/": true,
          "**/node_modules/": true,
          "**/build/": true,
      },
      "files.insertFinalNewline": true,
      "files.trimTrailingWhitespace": true,
      "window.zoomLevel": 0,
      "workbench.iconTheme": "vs-seti",
      "workbench.sideBar.location": "left",
      "editor.dragAndDrop": false,
      "extensions.ignoreRecommendations": true,
      "files.associations": {
          "*.vue": "html",
          "Vagrantfile": "ruby",
          "*.js": "javascript"
      },
      "python.linting.pylintEnabled": false,
      "python.linting.lintOnSave": false,
      "python.linting.pycodestyleEnabled": false,
      "python.linting.flake8Enabled": true,
      "python.linting.flake8Args": [
          "--max-line-length=100",
      ],
      "python.linting.pycodestyleArgs": [
          "--ignore=E501"
      ],
      "[plaintext]": {},
      "[javascript]": {
          "editor.formatOnSave": true,
      },
      "[typescriptreact]": {
          "editor.formatOnSave": true,
      },
      "[typescript]": {
          "editor.formatOnSave": true
      },
      "javascript.updateImportsOnFileMove.enabled": "never",
      "breadcrumbs.enabled": true,
      "[python]": {
          "editor.tabSize": 4,
      },
      "typescript.validate.enable": false,
      "javascript.validate.enable": false,
      "docthis.includeDescriptionTag": true,
      "docthis.inferTypesFromNames": true,
      "merge-conflict.autoNavigateNextConflict.enabled": true,
      "typescript.updateImportsOnFileMove.enabled": "always",
      "explorer.confirmDelete": false,
      "typescript.surveys.enabled": false,
      "eslint.validate": [
  
        { "language": "javascript", "autoFix": true },
        { "language": "javascriptreact", "autoFix": true },
        { "language": "typescript", "autoFix": true },
        { "language": "typescriptreact", "autoFix": true }
      ],
      "eslint.alwaysShowStatus": true,
      "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
      },
      "workbench.colorTheme": "Night Owl",
      "workbench.statusBar.visible": true,
      "eslint.codeAction.disableRuleComment": {},
      "eslint.codeAction.showDocumentation": {}
  }
  </code></pre>