ota-meshi/astro-eslint-parser

support for react/jsx-indent

tinchoz49 opened this issue · 2 comments

Description

Hi @ota-meshi thank your for your work on this parser, it works great!

I was trying to use with eslint-plugin-react. It seems almost everything works but for some reason the indentation rule thinks that the astro html needs to start with a initial indentation.

image

By adding the initial indentation the error goes away:

image

I know I can disable the rule, that's what i'm doing but could it be possible somehow to produce an AST that react cannot complain about that initial indentation?

Eslint: 8.48.0
@typescript-eslint/parser: 6.6.0
astro-eslint-parser: 0.15.0
standard: 17.1.0

I'm using standard-jsx where internally use eslint-plugin-react

/** @type {import("eslint").Linter.Config} */
module.exports = {
  extends: [
    'standard'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    sourceType: 'module',
    ecmaVersion: 'latest'
  },
  overrides: [
    {
      files: ['*.jsx', '*.tsx'],
      extends: [
        'standard-jsx'
      ]
    },
    {
      files: ['*.astro'],
      extends: [
        'plugin:astro/recommended',
        'plugin:astro/jsx-a11y-recommended',
        'standard-jsx'
      ],
      globals: {
        astroHTML: true
      },
      env: {
        // Enables global variables available in Astro components.
        node: true,
        'astro/astro': true,
        es2020: true
      },
      parser: 'astro-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.astro'],
        ecmaFeatures: {
          jsx: true
        }
      },
      rules: {
        // override/add rules settings here, such as:
        // "astro/no-set-html-directive": "error"
        // 'react/jsx-indent': 'off'
      }
    }
  ]
}

Thank you for posting this issue.

Does the indent rule provided by ESLint core also report a different indentation than you expected?

If both the react/jsx-indent rule and the indent rule provided by ESLint core report a different indentation than you expected, we may need to create our own astro/indent rule.

Hey @ota-meshi ! I tried the indent rule and it's working fine with the jsx inside astro :)

So I think I can just disable react/jsx-indent and use indent.

Thank you!