feat(multiline-ternary): add ignoreJSX option (#280)

Co-authored-by: haejiii <>
eslint-stylistic · Mar 14, 2024 · c6b14ea · c6b14ea
1 parent f0cde51
commit c6b14ea
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
diff --git a/packages/eslint-plugin-js/rules/multiline-ternary/README.md b/packages/eslint-plugin-js/rules/multiline-ternary/README.md
@@ -38,6 +38,7 @@ This rule has a string option:
 - `"always"` (default) enforces newlines between the operands of a ternary expression.
 - `"always-multiline"` enforces newlines between the operands of a ternary expression if the expression spans multiple lines.
 - `"never"` disallows newlines between the operands of a ternary expression.
+- `"ignoreJSX": true` Ignore the ternary operator in JSX. Defaults to `false`.
 
 ### always
 

diff --git a/packages/eslint-plugin-js/rules/multiline-ternary/multiline-ternary.test.ts b/packages/eslint-plugin-js/rules/multiline-ternary/multiline-ternary.test.ts
@@ -38,6 +38,15 @@ ruleTester.run('multiline-ternary', rule, {
     { code: '(a) \n? (b)\n: (c)', options: ['always'] },
     { code: '((a)) \n? ((b))\n: ((c))', options: ['always'] },
     { code: '((a)) ?\n ((b)):\n ((c))', options: ['always'] },
+    {
+      code: `
+        <>
+          {a ? <div /> : <div />}
+        </>
+      `,
+      options: ['always', { ignoreJSX: true }],
+      parserOptions: { ecmaVersion: 6, ecmaFeatures: { jsx: true } },
+    },
 
     // "always-multiline"
     { code: 'a\n? b\n: c', options: ['always-multiline'] },
@@ -74,6 +83,16 @@ ruleTester.run('multiline-ternary', rule, {
     { code: 'a ? b : ((c))', options: ['always-multiline'] },
     { code: '(a) ? (b) : (c)', options: ['always-multiline'] },
     { code: '((a)) ? ((b)) : ((c))', options: ['always-multiline'] },
+    {
+      code: `
+        <>
+          {a ? 
+            <div /> : <div />}
+        </>
+      `,
+      options: ['always-multiline', { ignoreJSX: true }],
+      parserOptions: { ecmaVersion: 6, ecmaFeatures: { jsx: true } },
+    },
 
     // "never"
     { code: 'a ? b : c', options: ['never'] },
@@ -99,6 +118,17 @@ ruleTester.run('multiline-ternary', rule, {
     { code: 'a ? b : (\n(c))', options: ['never'] },
     { code: '(a\n) ? (\nb\n) : (\nc)', options: ['never'] },
     { code: '((a)\n) ? (\n(b)\n) : (\n(c))', options: ['never'] },
+    {
+      code: `
+        <>
+          {a 
+            ? <div /> 
+            : <div />}
+        </>
+      `,
+      options: ['never', { ignoreJSX: true }],
+      parserOptions: { ecmaVersion: 6, ecmaFeatures: { jsx: true } },
+    },
   ],
 
   invalid: [

diff --git a/packages/eslint-plugin-js/rules/multiline-ternary/multiline-ternary.ts b/packages/eslint-plugin-js/rules/multiline-ternary/multiline-ternary.ts
@@ -21,6 +21,15 @@ export default createRule<MessageIds, RuleOptions>({
         type: 'string',
         enum: ['always', 'always-multiline', 'never'],
       },
+      {
+        type: 'object',
+        properties: {
+          ignoreJSX: {
+            type: 'boolean',
+            default: false,
+          },
+        },
+      },
     ],
 
     messages: {
@@ -35,9 +44,9 @@ export default createRule<MessageIds, RuleOptions>({
 
   create(context) {
     const sourceCode = context.sourceCode
-    const option = context.options[0]
-    const multiline = option !== 'never'
-    const allowSingleLine = option === 'always-multiline'
+    const multiline = context.options[0] !== 'never'
+    const allowSingleLine = context.options[0] === 'always-multiline'
+    const IGNORE_JSX = context.options[1] && context.options[1].ignoreJSX
 
     return {
       ConditionalExpression(node) {
@@ -55,6 +64,13 @@ export default createRule<MessageIds, RuleOptions>({
 
         const hasComments = !!sourceCode.getCommentsInside(node).length
 
+        if (IGNORE_JSX) {
+          if (node.parent.type === 'JSXElement'
+            || node.parent.type === 'JSXFragment'
+            || node.parent.type === 'JSXExpressionContainer')
+            return null
+        }
+
         if (!multiline) {
           if (!areTestAndConsequentOnSameLine) {
             context.report({

diff --git a/packages/eslint-plugin-js/rules/multiline-ternary/types.d.ts b/packages/eslint-plugin-js/rules/multiline-ternary/types.d.ts
@@ -2,5 +2,9 @@
 
 export type Schema0 = 'always' | 'always-multiline' | 'never'
 
-export type RuleOptions = [Schema0?]
+export interface Schema1 {
+  ignoreJSX: boolean
+}
+
+export type RuleOptions = [Schema0?, Schema1?]
 export type MessageIds = 'expectedTestCons' | 'expectedConsAlt' | 'unexpectedTestCons' | 'unexpectedConsAlt'