feat: update jsx default config (#281)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
antfu · Oct 10, 2023 · 987b9d8 · 987b9d8
1 parent 4314f91
commit 987b9d8
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 35 deletions.
diff --git a/fixtures/input/tsx.tsx b/fixtures/input/tsx.tsx
@@ -12,5 +12,10 @@ export function jsx2() {
     <Component1>
       Block Text
       </Component1>
+      <div>
+        Mixed
+            <div>Foo</div>
+          Text<b > Bar</b>
+        </div>
       </ a >
 }
diff --git a/fixtures/output/all/tsx.tsx b/fixtures/output/all/tsx.tsx
@@ -4,14 +4,24 @@ export function Component1() {
 
 export function jsx2() {
   const props = { a: 1, b: 2 }
-  return (<a foo="bar" bar={`foo`} >
-    <div
-      {...props}
-      a={1}
-      b="2"
-    >Inline Text</div>
-    <Component1>
-      Block Text
-    </Component1>
-  </a >)
+  return (
+    <a foo="bar" bar="foo">
+      <div
+        {...props}
+        a={1}
+        b="2"
+      >
+        Inline Text
+      </div>
+      <Component1>
+        Block Text
+      </Component1>
+      <div>
+        Mixed
+        <div>Foo</div>
+        Text
+        <b> Bar</b>
+      </div>
+    </a>
+  )
 }
diff --git a/fixtures/output/tab-double-quotes/tsx.tsx b/fixtures/output/tab-double-quotes/tsx.tsx
@@ -4,14 +4,24 @@ export function Component1() {
 
 export function jsx2() {
 	const props = { a: 1, b: 2 }
-	return (<a foo="bar" bar={`foo`} >
-		<div
-			{...props}
-			a={1}
-			b="2"
-		>Inline Text</div>
-		<Component1>
-			Block Text
-		</Component1>
-	</a >)
+	return (
+		<a foo="bar" bar="foo">
+			<div
+				{...props}
+				a={1}
+				b="2"
+			>
+				Inline Text
+			</div>
+			<Component1>
+				Block Text
+			</Component1>
+			<div>
+				Mixed
+				<div>Foo</div>
+				Text
+				<b> Bar</b>
+			</div>
+		</a>
+	)
 }
diff --git a/fixtures/output/ts-override/tsx.tsx b/fixtures/output/ts-override/tsx.tsx
@@ -4,14 +4,24 @@ export function Component1() {
 
 export function jsx2() {
   const props = { a: 1, b: 2 }
-  return (<a foo="bar" bar={`foo`} >
-    <div
-      {...props}
-      a={1}
-      b="2"
-    >Inline Text</div>
-    <Component1>
-      Block Text
-    </Component1>
-  </a >)
+  return (
+    <a foo="bar" bar="foo">
+      <div
+        {...props}
+        a={1}
+        b="2"
+      >
+        Inline Text
+      </div>
+      <Component1>
+        Block Text
+      </Component1>
+      <div>
+        Mixed
+        <div>Foo</div>
+        Text
+        <b> Bar</b>
+      </div>
+    </a>
+  )
 }
diff --git a/src/configs/stylistic.ts b/src/configs/stylistic.ts
@@ -128,16 +128,39 @@ export function stylistic(options: StylisticConfig = {}): ConfigItem[] {
         ...jsx
           ? {
               'style/jsx-child-element-spacing': 'error',
-              'style/jsx-closing-bracket-location': ['error', 'line-aligned'],
+              'style/jsx-closing-bracket-location': 'error',
+              'style/jsx-closing-tag-location': 'error',
+              'style/jsx-curly-brace-presence': ['error', { propElementValues: 'always' }],
               'style/jsx-curly-newline': 'error',
-              'style/jsx-curly-spacing': ['error', 'never', { allowMultiline: true }],
+              'style/jsx-curly-spacing': ['error', 'never'],
               'style/jsx-equals-spacing': 'error',
               'style/jsx-first-prop-new-line': 'error',
-              'style/jsx-indent': ['error', indent],
+              'style/jsx-indent': ['error', indent, { checkAttributes: true, indentLogicalExpressions: true }],
               'style/jsx-indent-props': ['error', indent],
+              'style/jsx-max-props-per-line': ['error', { maximum: 1, when: 'multiline' }],
+              'style/jsx-one-expression-per-line': ['error', { allow: 'single-child' }],
               'style/jsx-quotes': 'error',
-              'style/jsx-tag-spacing': 'error',
-              'style/jsx-wrap-multilines': 'error',
+              'style/jsx-tag-spacing': [
+                'error',
+                {
+                  afterOpening: 'never',
+                  beforeClosing: 'never',
+                  beforeSelfClosing: 'always',
+                  closingSlash: 'never',
+                },
+              ],
+              'style/jsx-wrap-multilines': [
+                'error',
+                {
+                  arrow: 'parens-new-line',
+                  assignment: 'parens-new-line',
+                  condition: 'parens-new-line',
+                  declaration: 'parens-new-line',
+                  logical: 'parens-new-line',
+                  prop: 'parens-new-line',
+                  return: 'parens-new-line',
+                },
+              ],
             }
           : {},
       },