导入中的 linting 错误答案

【问题标题】：linting error in imports导入中的 linting 错误
【发布时间】：2017-10-20 06:36:44
【问题描述】：

我收到关于 linting 的各种错误。所有错误都显示在第一行代码中。导入方式不正确，但仍然出现 linting 错误。我应该如何修复以下错误？

1:1 错误定义规则'import/no-named-default' 未找到 import/no-named-default

1:1 错误规则“react/jsx-tag-spacing”的定义未找到 react/jsx-tag-spacing

1:1 错误定义规则“react/no-array-index-key”未找到 react/no-array-index-key

1:1 错误定义规则“react/require-default-props”未找到 react/require-default-props

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const enhancers = [applyMiddleware(thunk)];

// If Redux DevTools Extension is installed use it, otherwise use Redux compose
/* eslint-disable no-underscore-dangle */
const composeEnhancers = process.env.NODE_ENV === 'development' && typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  : compose;

export default(initialState) => createStore(rootReducer, initialState, composeEnhancers(...enhancers));

这里是 eslint 源码

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "es6": true
  },
  "plugins": [
    "react",
    "jsx-a11y"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "import/imports-first": 0,
    "import/newline-after-import": 0,
    "import/no-dynamic-require": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-named-as-default": 0,
    "import/no-unresolved": 2,
    "import/prefer-default-export": 0,
    "indent": [
      2,
      2,
      {
        "SwitchCase": 1
      }
    ],
    "jsx-a11y/aria-props": 2,
    "jsx-a11y/heading-has-content": 0,
    "jsx-a11y/href-no-hash": 2,
    "jsx-a11y/label-has-for": 2,
    "jsx-a11y/mouse-events-have-key-events": 2,
    "jsx-a11y/role-has-required-aria-props": 2,
    "jsx-a11y/role-supports-aria-props": 2,
    "max-len": 0,
    "newline-per-chained-call": 0,
    "no-confusing-arrow": 0,
    "no-console": 1,
    "no-use-before-define": 0,
    "prefer-template": 2,
    "class-methods-use-this": 0,
    "react/forbid-prop-types": 0,
    "react/jsx-first-prop-new-line": [
      2,
      "multiline"
    ],
    "react/jsx-filename-extension": 0,
    "react/jsx-no-target-blank": 0,
    "react/require-extension": 0,
    "react/self-closing-comp": 0,
    "require-yield": 0,
    "import/no-webpack-loader-syntax": 0
  },
  "settings": {}
}

【问题讨论】：

你跑npm install了吗？还有哪个操作系统？
我正在使用 ubuntu。我跑纱线。
您是否在代码中添加了.eslintrc？如果有，请显示内容

标签： javascript reactjs eslint create-react-app

【解决方案1】：

我认为您忘记将插件 eslint-plugin-react 和 eslint-plugin-import 添加到您的项目或 eslint 配置中。

编辑：

在您的.eslintrc 插件字段中应该是这样的：

"plugins": [
  "react",
  "jsx-a11y",
  "import"
],

【讨论】：

我已经安装了这些包 "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^4.0.0", "eslint-plugin-反应”：“^6.10.3”，“eslint”：“^3.19.0”，
它们在你的 eslin 配置中吗？它们应该像this 和this 一样被包含进来

【解决方案2】：

你的 .eslintrc 规则字段应该是这样的：

"rules":{
"react/no-array-index-key":"off",
}

这将修复 react/no-array-index 错误。确保你已经安装了 eslint-plugin-react。

【讨论】：

【解决方案3】：

使用import rootReducer from 'reducers'; 而不是import rootReducer from './reducers';

【讨论】：

这行不通，因为 reducer 可能不是已安装的包，而是相对路径。从 'reducers' 导入将查找该名称的包，而 './reducers' 将查找路径。