jsx-eslint/eslint-plugin-react

react/jsx-indent with ternary and react fragment DON'T play nice 😕

Open

#3,288 opened on 2022年5月11日

GitHub で見る
 (4 comments) (1 reaction) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
bughelp wanted

説明

Conflicting rules in jsx-intend -->

{buttons
  .map((b, i) => (i === 2)
    ? <>
        <ThemedView/>
        <ImageButton/>
      </>
    : <ImageButton/>
)}

Tells me Expected indentation of 12 space characters but found 14 (for line 4+5) AND Expected indentation of 10 space characters but found 12 (line 6)

But:

  1. 4+5 SHOULD be indented (and is normally just fine, even with fragment, when not in combination with ternary operator) --> I don't care about that, I can just bring them in line with opening fragment then it work, just wanted to mention
  2. if I bring the react-fragment closing tag (line 6) to 10 spaces, it says Expected closing tag to match indentation of opening which it's auto-fix is to bring it in line with opening fragment (10->12), which just loops the error! --> conflicting rule in this case

コントリビューターガイド

技術スタック
javascriptreact
領域
frontenddeveloper experience
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
fresh
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
mostly clear
前提条件
understanding of ESLint pluginsJSX indentation basics
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
20
調査方針
Review the 'jsx indent' rule implementation in eslint plugin react (likely in lib/rules/jsx indent.js). Reproduce the issue using the provided code snippet. Examine how the rule handles ternary expressions with fragments, particularly the indentation calculation for opening/closing tags. Investigate the auto fix loop described: closing tag indentation triggers a conflict. Check existing comments for any maintainer guidance or workarounds. Consider contributing a fix that aligns indentation expectations for nested fragments within ternary operators, potentially referencing ESLint's core indent rule logic.