jsx-eslint/eslint-plugin-react

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

Open

#3,288 建立於 2022年5月11日

在 GitHub 查看
 (4 留言) (1 反應) (0 負責人)JavaScript (8,630 star) (2,797 fork)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
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-3 hours
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
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.