將 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

這是我的代碼：

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

我還嘗試縮進為什么 2 個空格，但沒有成功。 我真的不明白為什么我有這些錯誤。 你有好主意嗎？

謝謝！

Answer 1

正如@ 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 2

airbnb規則要求您使用空格而不是制表符來格式化代碼。 優秀的編輯器（sublime是一個！）將允許您使用選項卡，但在保存代碼時將它們轉換為空格。

你需要改變sublime的配置; 轉到首選項 - 設置並自定義以下設置：

"tab_size": 2,
"translate_tabs_to_spaces": true

Sublime將轉換您現有的代碼 - 單擊右下方狀態欄中顯示標簽或空格的文本。

如果（例如）某個airbnb規則與您的編碼風格指南不匹配，您可以有選擇地關閉eslint規則。

Answer 3

嘗試將每個標簽替換為空格 。

在webpack配置中使用此eslint-loader選項啟用ESLint自動修復功能也是一個好主意。

Answer 4

您可以在出現無制表符錯誤的頁面上添加此評論。

 /* eslint-disable */