Eslint (Airbnb) React 代码 (JSX) 的缩进问题

Question

我正在与我的 eslint 的一个小问题作斗争，它似乎大部分时间都工作正常，但在某些情况下它无法正常工作反应代码。

让我们以这段代码为例：

const cellPLay = (name, src) => (
  <Table.Cell>
    <Modal trigger={<Button icon><Icon name="video play" size="large" /></Button>}>
      <Modal.Header>
        {name}
      </Modal.Header>
      <Modal.Content image>
        <Modal.Description>
          <video src={src} controls style={{ width: 910 }} />
        </Modal.Description>
      </Modal.Content>
    </Modal>
  </Table.Cell>
);

给出这样的错误：

/my-path/MyFile.js:18:7: Expected indentation of 8 space characters but found 6. [Error/react/jsx-indent]

出于某种原因，eslint 认为 Modal.Content 应该在 [=61= 之后缩进]，但即使我修复了所有缩进，它也会询问它说某些结束标记的缩进是错误的：

Expected closing tag to match indentation of opening

我的 eslint 配置文件：

{
  "extends": "./my-eslint/index.js"
}

实际的eslint代码：

module.exports = {
  extends: require.resolve('eslint-config-airbnb'),
  env: {
    browser: true,
    jest: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 8,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    strict: 'error',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    'no-plusplus': 'off',
    'jsx-a11y/media-has-caption': 'off',
    'jsx-a11y/anchor-is-valid': [
      'error',
      {
        components: ['Link'],
        specialLink: ['to'],
      },
    ],
  },
};

我尝试手动添加 jsx 缩进规则

'react/jsx-indent': [2, 2],

没解决

还有其他想法吗？

附带说明一下，VSCode 在缩进方面做得正确，但是当我运行 eslint 手动失败时，我需要修复它，因为有代码样式自动化运行ning。我遵循了一些答案并在 VSCode 上安装了 prettier，现在他们似乎到达了同一页面，但我需要修复缩进问题。

更新 1 正如@a-jar-of-clay 所建议的，我尝试升级我的包，eslint 到 5.4.0，airbnb 到 17.1.0 和 airbnb-base 到 13.1.0

现在我收到了新的错误消息，可能是由于某些不兼容造成的：

Error: config-airbnb/rules/react.js: Configuration for rule "react/jsx-no-bind" is invalid: Value {"ignoreRefs":true,"allowArrowFunctions":true,"allowFunctions":false,"allowBind":false,"ignoreDOMComponents":true} should NOT have additional properties.

更新 2 正如@matt-dell 所问，我手动使用运行的命令是：

./node_modules/.bin/eslint --fix --format unix  --config my-eslint/index.js

它肯定会获取我的配置，因为它会在我更改某些规则时做出反应。

Answer 1

我遇到了同样的问题，我用一些软件包修复了它：通过使用 eslint 插件和扩展 react-app eslint，它被修复了。

package.json

    "babel-eslint": "^7.2.3",

    "eslint": "^4.19.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.50.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.11.1",

.eslintrc.js

 "env": {
    "browser": true,
    "es6": true
},
"extends": ["react-app", "eslint:recommended"],
"parserOptions": {
    "ecmaFeatures": {
        "experimentalObjectRestSpread": true,
        "jsx": true
    },
    "sourceType": "module"
},
"globals": {
    "React": true
},
"plugins": [
    "react"
],
"rules": {/* define your rules here...*/}

祝你好运！

Eslint (Airbnb) React 代码 (JSX) 的缩进问题

Eslint (Airbnb) indentation issues with React code(JSX)

reactjs

visual-studio-code

eslint

eslint-config-airbnb