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

因爲你可以s以上ee，我想用tab縮進。

webpack.config.js：

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

我也試圖縮進爲什麼2個空格，沒有成功。我真的不明白爲什麼我有這些錯誤。你有好主意嗎？

謝謝！

Answer 1

作爲@標記威廉告訴我，我加了一些線在我.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

嘗試替換every tab to spaces。

在webpack配置中啓用ESLint autofix功能與this eslint-loader option也是一個好主意。

Answer 3

airbnb規則希望您使用空格而不是製表符來格式化您的代碼。好的編輯器（崇高是一個！）可以讓你使用標籤，但在保存你的代碼時將它們翻譯爲空格。

你需要改變你崇高的配置;去首 - 設置和自定義以下設置：

"tab_size": 2, 
"translate_tabs_to_spaces": true 

卓異將轉換現有的代碼 - 點擊在那說，製表符或空格右下角狀態欄中的文本。

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