How to use this configuration to format JSX.Element

[croatialu]

eslint-config/packages/eslint-config-basic/standard.js

Line 76 in 656f91a

ignoredNodes: ['TemplateLiteral *', 'JSXElement', 'JSXElement > *', 'JSXAttribute', 'JSXIdentifier', 'JSXNamespacedName', 'JSXMemberExpression', 'JSXSpreadAttribute', 'JSXExpressionContainer', 'JSXOpeningElement', 'JSXClosingElement', 'JSXFragment', 'JSXOpeningFragment', 'JSXClosingFragment', 'JSXText', 'JSXEmptyExpression', 'JSXSpreadChild'],

I want to autofix indent in the JSX Element of the tsx file, but it doesn't work. and then i saw that the configuration ignored the indent rules related to JSX Element

I would like to ask why this configuration is necessary

When I configure it this way, my jsx element indent will work normally

{
  "extends": [
    "@antfu",
    "@unocss"
  ],
  "rules": {
    "indent": [
      "error",
      2,
      {
        "SwitchCase": 1,
        "VariableDeclarator": 1,
        "outerIIFEBody": 1,
        "MemberExpression": 1,
        "FunctionDeclaration": { "parameters": 1, "body": 1 },
        "FunctionExpression": { "parameters": 1, "body": 1 },
        "CallExpression": { "arguments": 1 },
        "ArrayExpression": 1,
        "ObjectExpression": 1,
        "ImportDeclaration": 1,
        "flatTernaryExpressions": false,
        "ignoreComments": false,
        "ignoredNodes": [
          // "TemplateLiteral *",
          // "JSXElement",
          // "JSXElement > *",
          // "JSXAttribute",
          // "JSXIdentifier",
          // "JSXNamespacedName",
          // "JSXMemberExpression",
          // "JSXSpreadAttribute",
          // "JSXExpressionContainer",
          // "JSXOpeningElement",
          // "JSXClosingElement",
          // "JSXFragment",
          // "JSXOpeningFragment",
          // "JSXClosingFragment",
          // "JSXText",
          // "JSXEmptyExpression",
          // "JSXSpreadChild",
          "TSTypeParameterInstantiation",
          "FunctionExpression > .params[decorators.length > 0]",
          "FunctionExpression > .params > :matches(Decorator, :not(:first-child))",
          "ClassBody.body > PropertyDefinition[decorators.length > 0] > .key"
        ],
        "offsetTernaryExpressions": true
      }
    ]
  }
}

[kkfive]

I want to use it too

[ZaneL1u]

+1

[LiZhequ]

for react, you can use eslint-config-standard-jsx

{
  "extends": ["standard-jsx", "@antfu/eslint-config-react"]
}

[chizukicn]

My solution is to turn off the indent rule in typescript and use the @typescript-eslint/indent rule

{
    "indent": "off",
    "@typescript-eslint/indent": ["error", 2, {
      SwitchCase: 1,
      VariableDeclarator: 1,
      outerIIFEBody: 1,
      MemberExpression: 1,
      FunctionDeclaration: { parameters: 1, body: 1 },
      FunctionExpression: { parameters: 1, body: 1 },
      CallExpression: { arguments: 1 },
      ArrayExpression: 1,
      ObjectExpression: 1,
      ImportDeclaration: 1,
      flatTernaryExpressions: false,
      ignoreComments: false,
      offsetTernaryExpressions: true
    }],
}

[antfu]

Since we have migrated to that flat config, it would be much easier to compose JSX support. If anyone has made a robust JSX/TSX config that could work generally for React/Solid/Vue JSX, then I'd be happy to have it built in.

[antfu]

Related: eslint-stylistic/eslint-stylistic#12

[antfu]

Supported in @antfu/eslint-config@1.0.0-beta.24. As I don't use JSX a lot myself, the rules might not cover all cases well, PR welcome if you spot any improvements. Thanks.