規則“react/jsx-indent”的配置無效：值“4，[object Object]”不應超過 1 個項目

Question

我今天上班時遇到了來自我的 linter package 的異常錯誤。 我查看了 package 的文檔，但我的 eslintrc 文件看不到任何問題。

這是我正在使用的副本

{
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
    "import/no-extraneous-dependencies": "off",
    "import/extensions": "off",
    "import/no-unresolved": "off",
    "eol-last": "off",
    "no-unused-expressions": ["error",{
        "allowTernary": true,
        "allowShortCircuit": true
        }],
    "react/jsx-indent-props": "off",
    "react/jsx-indent" : ["error", 4, { "props": 4 }],
    "indent": [ "error", 4],
    "react/jsx-filename-extension": "off",
    "jsx-a11y/anchor-is-valid": [
        "error",
        {
            "components": [],
            "specialLink": [
                "hrefLeft",
                "hrefRight"
            ],
            "aspects": [
                "noHref",
                "invalidHref",
                "preferButton"
            ]
        }
    ],
    "no-bitwise": "off"
},
"env": {
    "browser": true,
    "jest": true
}

}

當我從命令行運行 eslint 時，我沒有任何問題，這使得這更加令人困惑！

任何幫助將不勝感激：）

Answer 1

萬一將來有人遇到這個問題，我發現了這個問題。

"react/jsx-indent" : ["error", 4, { "props": 4 }],

應該

"react/jsx-indent" : ["error", 4],

我認為有人想通過銷毀：P

Answer 2

正如 Fabio 已經發現的那樣，道具添加不正確。 對於任何想要添加道具的人，您可以在"react/jsx-indent"上方的行中看到此禁用。

所以你可以改變這一行"react/jsx-indent-props"並清理以下行：

"react/jsx-indent" : ["error", 4]
"react/jsx-indent-props": ["error", 4]

進一步說明：如果您在三元項目上遇到道具縮進錯誤，那么您可以使用"first"來與標簽第一個道具對齊，而不是設置數字。

"react/jsx-indent-props": ["error", "first"]

當您的 JSX 看起來像這樣時，這應該可以避免錯誤：

return (
    {showComponent
        ? <MyComponent
            option="1"
            onClick={myCompHandler}/>
        : <p>Something Else</p>
    }
)

更多信息： https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md