将 ESLint 与 Airbnb 样式和选项卡一起使用 (React.js)

Question

我正在开发一个 React.js 应用程序，我正在尝试检查我的代码。我将 ESLint 与 Airbnb 风格结合使用，但出现以下错误：

../src/Test.jsx
  4:2   error  Unexpected tab character                                no-tabs
  5:2   error  Unexpected tab character                                no-tabs
  5:3   error  Expected indentation of 2 space characters but found 0  react/jsx-indent
  6:2   error  Unexpected tab character                                no-tabs

这是我的代码：

Test.jsx:

import React from 'react';

function Test() {
    return (
        <h1>Test</h1>
    );
}

export default Test;

.eslintrc:

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
    "react/prop-types": 0,
    "react/jsx-indent-props": [2, "tab"],
  }
}

如上所示，我想用制表符缩进。

webpack.config.js:

loaders: [{
  test: /\.jsx$|\.js$/,
  loaders: ["babel-loader", "eslint-loader"],
  exclude: /node_modules/
},
...
]

我也试过缩进why 2个空格，没成功。我真的不明白为什么我有这些错误。你有什么想法吗？

谢谢！

Answer 1

尝试替换 every tab to spaces.

在您的 webpack 配置中启用 ESLint autofix feature with this eslint-loader option 也是一个好主意。

Answer 2

airbnb 规则要求您使用空格而不是制表符来格式化您的代码。好的编辑器（sublime 就是其中之一！）会让您使用制表符，但在保存代码时将它们转换为空格。

您需要更改您的sublime的配置；转到 首选项-设置并自定义以下设置：

"tab_size": 2,
"translate_tabs_to_spaces": true

Sublime 将转换您现有的代码 - 单击右下角状态栏中显示制表符或空格的文本。

如果（例如）airbnb 的规则之一与您的编码风格指南不匹配，您可以有选择地关闭 eslint 规则。

Answer 3

正如@mark-willian 告诉我的那样，我在我的 .eslintrc 中添加了一些行，它起作用了：

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "airbnb",
    "parser": "babel-eslint",
    "rules": {
        "indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
        "no-tabs": 0,
        "react/prop-types": 0,
        "react/jsx-indent": [2, "tab"],
        "react/jsx-indent-props": [2, "tab"],
    }
}

感谢您的所有回答。

Answer 4

您可以在出现 no-tabs 错误的页面上添加此评论。

/* eslint-disable */

将 ESLint 与 Airbnb 样式和选项卡一起使用 (React.js)

Use ESLint with Airbnb style and tab (React.js)

javascript

reactjs

eslint

webpack