Vyhledávání na webu

React TypeScript: ESLint max-length automatická oprava nefunguje

Snažím se nastavit ESLint pro React s TypeScriptem tak, aby maximální délka kódu byla 80 znaků; pokud kód přesáhne 80 znaků, automaticky se zalomí a půjde na další řádek. Ale zdá se, že automatická oprava max-lenght v ESLintu nefunguje. Jen se zobrazí varování a když kliknu na rychlou opravu, tak to prostě vypne celý komponent. Momentálně můj kód vypadá takto, musím rolovat úplně doprava, abych viděl celý kód. PS. Odinstaloval jsem rozšíření Prettier.

Toto je moje nastavení .eslintrc.js

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"
  }
};

** Toto je můj soubor .vscode/settings.json **

{
    "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": {}
}

Odpověď č. 1

Bylo otevřeno několik problémů týkajících se přidání automatické opravy pro pravidlo max-len, ale bohužel se tým eslint zdá, že to nechce realizovat (důvody jsou uvedeny ve vlákně).

Můžete zvážit vypnutí tohoto pravidla pro konkrétní řádek:

// eslint-disable-next-line max-len

Pokud hledáte řešení pro automatickou opravu, doporučil bych vám přeinstalovat Prettier.

Odpověď č. 2

POZNÁMKA: Níže uvedená odpověď přesně nezodpovídá otázku. Otázka se týká konkrétně ESLint, a toto řešení je pro Prettier, jinou knihovnu pro formátování, která může fungovat spolu s ESLint.

V mém případě jsem měl chybu v souboru eslintrc.json (na konci byla navíc čárka), a proto nebyla načtena žádná konfigurace lintu.

Oprava toho vyřešila můj problém.

Také se ujistěte, že používáte prettier jako závislost a NE jako rozšíření ve VScode.

prettier.config.json

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
  printWidth: 80,
  bracketSpacing: true,
  jsxBracketSameLine: true,
};

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      },
      {
        "usePrettierrc": true
      }
    ],
    "import/no-dynamic-require":"off",
    "global-require": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "no-use-before-define": "off",
    "react/react-in-jsx-scope": "off",
    "import/no-cycle": "off",
    "react/prop-types": "off",
    "react/jsx-filename-extension": "off",
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "react/jsx-props-no-spreading": "off",
    "no-param-reassign": "off",
    "radix": "off",
    "import/order": "off",
    "no-plusplus": "off",
    "no-underscore-dangle": "off",
    "no-unused-expressions": "off",
    "array-callback-return": "warn",
    "react/jsx-no-bind": "off",
    "class-methods-use-this": "off",
    "consistent-return": "off",
    "new-cap": "off",
    "react/destructuring-assignment": "off",
    "react/forbid-prop-types": "off",
    "import/prefer-default-export": "off",
    "react/no-unused-state": "warn",
    "no-unused-vars": "warn",
    "no-nested-ternary": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "react/sort-comp": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "no-return-assign": "warn",
    "react/no-array-index-key": "warn",
    "guard-for-in": "warn",
    "no-restricted-syntax": "warn",
    "max-classes-per-file": "off",
    "react/state-in-constructor": "off",
    "react/static-property-placement": "off",
    "react/prefer-stateless-function": "off",
    "react/no-did-update-set-state": "warn",
    "camelcase": "off",
    "prefer-destructuring": "warn",
    "no-await-in-loop": "warn",
    "no-restricted-globals": "off",
    "no-bitwise": "off",
    "eqeqeq": "warn",
    "no-shadow": "warn",
    "jsx-a11y/label-has-associated-control": "off",
    "react/button-has-type": "off"
  }
}

package.json

  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.22.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "node-sass": "^4.14.1",
    "prettier": "^2.2.1"
  }

Související články