将ESLint与Airbnb样式和标签一起使用（React.js） [英] Use ESLint with Airbnb style and tab (React.js)

问题描述

我正在使用React.js应用程序，并且正在尝试整理代码。我在Airbnb样式中使用了ESLint，但存在以下错误：

I'm working on a React.js application and I'm trying to lint my code. I use ESLint with the Airbnb style, but I have these errors:

../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"],
  }
}

可以在上方看到，我想缩进制表符。

As you can see above, I would like to indent with tab.

webpack.config.js：

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

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

I also tried to indent why 2 spaces, without success. I really don't understand why I have theses errors. Do you have an idea?

谢谢！

推荐答案

如@ mark-willian告诉我，我在 .eslintrc 中添加了几行，它可以正常工作：

As @mark-willian told me, I added some lines in my .eslintrc and it works:

{
    "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"],
    }
}

感谢您的所有回答。

这篇关于将ESLint与Airbnb样式和标签一起使用（React.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！