jsx-eslint/eslint-plugin-react

jsx-wrap-multilines: option to exclude selfclosing components

Open

#1,279 opened on 2017年6月27日

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

説明

Hi! We have a lot of selfclosing components that can be assigned to variables and have line break between attributes, like

const comp = <Component prop1='prop1' prop2='prop2' prop3='prop3'/
                        prop4='prop4' prop5='prop5'/>;

I don't want to wrap such components in parens, but want to wrap multiline components that have children

const comp = (
  <Component prop1='prop1' prop2='prop2' prop3='prop3'/
             prop4='prop4' prop5='prop5'>
    <ChildrenComp/>
    <ChildrenComp/>
    <ChildrenComp/>
  </Component>
);

Today jsx-wrap-multilines just enforce parens on any multiline components, would be great to have option to ignore selfclosing ones. And maybe each current option (declaration, assignment, return, arrow) should have such option, because, for instance, I might want to wrap returned multiline component into parens anyway

return (
  <Component prop1='prop1' prop2='prop2' prop3='prop3'/
             prop4='prop4' prop5='prop5'/>
);

So maybe config could look like

'react/jsx-wrap-multilines': [2, {
    'declaration': {ignoreSelfClosing: true},
    'assignment': {ignoreSelfClosing: true},
    'return': true,
    'arrow': true,
}],

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

技術スタック
javascriptreact
領域
frontendtoolingdeveloper experience
Issue 種別
feature
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-2 days
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
mostly clear
前提条件
Understanding of ESLint rule structureFamiliarity with the plugin's codebaseKnowledge of JSX syntax
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
35
調査方針
The issue proposes adding a new option ignoreSelfClosing to each case (declaration, assignment, etc.) of the jsx wrap multilines rule. The current implementation can be found in the eslint plugin react repository under lib/rules/jsx wrap multilines.js. Comments on the issue may provide additional context or reasoning. The goal is to allow excluding self closing JSX elements from wrapping in parentheses when they span multiple lines. The solution should modify the rule to support an object configuration per case, where ignoreSelfClosing can be set to true.
jsx-wrap-multilines: option to exclude selfclosing components · jsx-eslint/eslint-plugin-react#1279 | Good First Issue