Eslint：“ jsx-a11y / label-has-for”无效

Question

在WebStorm中，我无法摆脱此错误：

Error: /Users/kamiranoff/dev/myApp/node_modules/eslint-config-rallycoding/rules/react-a11y.js:
    Configuration for rule "jsx-a11y/label-has-for" is invalid:
    Value ["label"] should be object.

Referenced from: /Users/kamiranoff/dev/myApp/node_modules/eslint-config-rallycoding/index.js
Referenced from: /Users/kamiranoff/dev/myApp/.eslintrc

Error: /Users/kamiranoff/dev/myApp/node_modules/eslint-config-rallycoding/rules/react-a11y.js:
    Configuration for rule "jsx-a11y/label-has-for" is invalid:
    Value ["label"] should be object.

Referenced from: /Users/kamiranoff/dev/myApp/node_modules/eslint-config-rallycoding/index.js
Referenced from: /Users/kamiranoff/dev/myApp/.eslintrc
    at validateRuleOptions (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-validator.js:115:15)
    at Object.keys.forEach.id (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-validator.js:155:9)
    at Array.forEach (<anonymous>)
    at validateRules (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-validator.js:154:30)
    at Object.validate (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-validator.js:232:5)
    at loadFromDisk (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-file.js:507:19)
    at load (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-file.js:550:20)
    at configExtends.reduceRight (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-file.js:421:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/Users/kamiranoff/dev/myApp/node_modules/eslint/lib/config/config-file.js:403:28)

我确实尝试使用以下方法覆盖本地.eslintrc：

{
  "extends": "rallycoding",
  "rules": {
    "arrow-body-style": 0,
    "quote-props": 0,
    "global-require": 0,
    "max-len": [
      "error",
      120
    ],
    "react/require-extension": "off",
    "jsx-a11y/label-has-for": 0
  },
  "globals": {
    "__DEV__": true,
    "fetch": true,
    "Headers": true,
    "Request": true
  }
}

并设置WebStorm配置（我只是出于保密目的更改了文件夹名称）：

在我的package.json上

"dependencies": {
    "as": "0.4.1",
    "axios": "0.16.2",
    "babel-plugin-transform-remove-console": "6.8.5",
    "contentful": "4.6.4",
    "eil-cid": "~1.0.0",
    "eslint-config-rallycoding": "3.2.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "^7.10.0",
    "listify": "1.0.0",
    "localytics-react-native": "2.1.1",
    "lodash": "4.17.5",
    "lottie-react-native": "2.2.7",
    "moment": "2.19.3",
    "moment-timezone": "0.5.14",
    "prop-types": "15.6.0",
    "react": "16.0.0",
    "react-dom": "16.2.0",
    "react-native": "0.51.0",
    "react-native-add-calendar-event": "0.3.0",
    "react-native-calendars": "1.9.3",
    "react-native-collapsible": "0.9.0",
    "react-native-config": "0.8.1",
    "react-native-dash": "^0.0.8",
    "react-native-fabric": "0.5.1",
    "react-native-firebase": "2.2.3",
    "react-native-i18n": "2.0.9",
    "react-native-iphone-x-helper": "1.0.1",
    "react-native-keyboard-aware-scroll-view": "0.5.0",
    "react-native-navigation": "1.1.462",
    "react-native-picker": "4.3.5",
    "react-native-showmedia": "file:packages/react-native-showmedia",
    "react-native-swiper": "1.5.13",
    "react-native-timeline-listview": "0.2.2",
    "react-native-triangle": "0.0.8",
    "react-native-webview-bridge": "github:EurostarDigital/react-native-webview-bridge",
    "react-native-wkwebview-reborn": "1.10.0",
    "react-redux": "5.0.6",
    "redux": "3.7.2",
    "redux-logger": "3.0.6",
    "redux-persist": "4.10.2",
    "redux-thunk": "2.2.0",
    "tai-password-strength": "1.1.1"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "1.9.2",
    "codecov": "3.0.0",
    "dotenv": "4.0.0",
    "eil-content": "~2.2.2",
    "enzyme": "3.3.0",
    "enzyme-adapter-react-16": "1.1.1",
    "eslint": "4.11.0",
    "google-spreadsheet": "2.0.4",
    "husky": "0.14.1",
    "jest": "20.0.4",
    "lint-staged": "4.0.0",
    "prettier": "~1.8.2",
    "react-native-mock": "0.3.1",
    "react-test-renderer": "16.0.0-alpha.12",
    "redux-logger": "3.0.6",
    "redux-mock-store": "^1.5.1"
  },
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-navigation)/"
    ],
    "setupFiles": [
      "./config/testEnvironment.js"
    ],
    "collectCoverageFrom": [
      "src/**/*.js"
    ]
  },
  "lint-staged": {
    "gitDir": "./",
    "*.js": [
      "prettier --single-quote --print-width 120 --tab-width 2 --write",
      "./node_modules/eslint-config-rallycoding/node_modules/eslint/bin/eslint.js",
      "git add"
    ]
  }

如何摆脱错误？

Answer 1

此问题并非特定于Webstorm，在终端中运行 EsLint 时，您会看到相同的错误。问题是"eslint-config-rallycoding"尚不支持"jsx-a11y/label-has-for"插件的v6.x。您可能应该就此向https://github.com/StephenGrider/ESLint-Rallycoding/issues提出问题。

摆脱该问题的唯一方法是同时降级"eslint-plugin-jsx-a11y"和"eslint"，例如：

"eslint-plugin-jsx-a11y": "^2.2.3",
...
"eslint": "^3.19.0",

请参阅https://github.com/sweth/react-native-udemy/commit/2dd74ca887e8b32b82ee1e37e5a290edaa657b82