fix(ts/comma-dangle): allow tailing comma in generic in TSX (#167)

antfu · web-flow · commit 6fb4a9ab4df5 · 2023-11-18T17:43:16.000+01:00
diff --git a/packages/eslint-plugin-ts/rules/comma-dangle/comma-dangle.test.ts b/packages/eslint-plugin-ts/rules/comma-dangle/comma-dangle.test.ts
@@ -95,6 +95,24 @@ type Qux = [string,
         },
       ],
     },
+
+    // https://github.com/eslint-stylistic/eslint-stylistic/issues/35
+    {
+      code: 'const id = <T,>(x: T) => x;',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    {
+      code: 'const id = <T,R>(x: T) => x;',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
   ],
   invalid: [
     // base rule
@@ -254,5 +272,18 @@ type Qux = [string,
       options: ['only-multiline'],
       errors: [{ messageId: 'unexpected' }],
     },
+
+    // https://github.com/eslint-stylistic/eslint-stylistic/issues/35
+    // When there is more than one generic, we don't need to workaround it
+    {
+      code: 'const id = <T,R,>(x: T) => x;',
+      output: 'const id = <T,R>(x: T) => x;',
+      errors: [{ messageId: 'unexpected' }],
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
   ],
 })
diff --git a/packages/eslint-plugin-ts/rules/comma-dangle/comma-dangle.ts b/packages/eslint-plugin-ts/rules/comma-dangle/comma-dangle.ts
@@ -93,14 +93,15 @@ export default createRule<RuleOptions, MessageIds>({
     const rules = baseRule.create(context)
     const sourceCode = context.sourceCode
     const normalizedOptions = normalizeOptions(options)
+    const isTSX = context.parserOptions?.ecmaFeatures?.jsx
+      && context.filename?.endsWith('.tsx')
 
     const predicate = {
       'always': forceComma,
       'always-multiline': forceCommaIfMultiline,
       'only-multiline': allowCommaIfMultiline,
       'never': forbidComma,
       // https://github.com/typescript-eslint/typescript-eslint/issues/7220
-
       'ignore': () => {},
     }
 
@@ -134,6 +135,19 @@ export default createRule<RuleOptions, MessageIds>({
     }
 
     function forbidComma(node: TSESTree.Node): void {
+      /**
+       * We allow tailing comma in TSTypeParameterDeclaration in TSX,
+       * because it's used to differentiate JSX tags from generics.
+       *
+       * https://github.com/microsoft/TypeScript/issues/15713#issuecomment-499474386
+       * https://github.com/eslint-stylistic/eslint-stylistic/issues/35
+       */
+      if (isTSX && node.type === AST_NODE_TYPES.TSTypeParameterDeclaration && node.params.length === 1)
+        return
+
+      /**
+       * Forbid tailing comma
+       */
       const last = getLastItem(node)
       const trailing = getTrailingToken(node)
       if (last && trailing && isCommaToken(trailing)) {
