eslint issue in .astro file for import and other JSX

[xkeshav]

Describe the bug

I have tried the same .eslintrc file but with some changes on the repo but when I run npm run lint it gives few error which I list it down with reason

.eslintrc

{
  // Configuration for JavaScript files
  "extends": ["plugin:prettier/recommended", "plugin:astro/recommended", "plugin:import/recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "extraFileExtensions": [".astro"],
    "ecmaVersion": "latest"
  },

  "overrides": [
    // Configuration for TypeScript files
    {
      "parser": "@typescript-eslint/parser",
      "files": ["*.ts", "*.tsx"],
      "plugins": [
        "@typescript-eslint",
        "react"
      ],
      "extends": [
        "airbnb-typescript",
        "plugin:prettier/recommended"
      ],
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "rules": {
        "import/extensions": [
          "error",
          "ignorePackages",
          {
            "js": "never",
            "jsx": "never",
            "ts": "never",
            "tsx": "never",
            "": "never"
          }
        ],
        "prettier/prettier": "off",
        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
        "react/require-default-props": "off", // Allow non-defined react props as undefined
        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
        "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
        "@typescript-eslint/no-unused-vars": "off",
        "quotes": ["error", "double", { "avoidEscape": true }]
      }
    },
    // Configuration for Astro
    {
      "files": ["*.astro"],
      "extends": [
        "airbnb-typescript",
        "plugin:prettier/recommended"
      ],
      "plugins": ["astro"],
      "parser": "astro-eslint-parser",
      "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "extraFileExtensions": [".astro"],
        "sourceType": "module"
      },
      "env": {
        // Enables global variables available in Astro components.
        "node": true,
        "astro/astro": true,
        "es2020": true
      },
      "rules": {
        "prettier/prettier": "error",
        "import/extensions": [
          "error",
          "ignorePackages",
          {
            "js": "never",
            "jsx": "never",
            "ts": "never",
            "tsx": "never",
            "scss": "never",
            "": "never"
          }
        ], // Avoid missing file extension errors in .astro files
        "import/no-unresolved": [
          "error",
          {
            "ignore": ["@/*"]
          }
        ],
        "react/jsx-filename-extension": [1, { "extensions": [".astro"] }], // Accept jsx in astro files
        "react/destructuring-assignment": "off", // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
        "react/require-default-props": "off", // Allow non-defined react props as undefined
        "react/jsx-props-no-spreading": "off", // _app.tsx uses spread operator and also, react-hook-form
        "@typescript-eslint/comma-dangle": "off", // Avoid conflict rule between Eslint and Prettier
        "@typescript-eslint/consistent-type-imports": "error", // Ensure `import type` is used when it's necessary
        "@typescript-eslint/no-unused-vars": "error"
      },
      "globals": {
        "Astro": "readonly"
      }
    }
  ]
}

1. error Parsing error: import can only be used in import() or import.meta prettier/prettier

this is happens on .astro pages where we have import .scss file ;

so dow to remove this issue?

2. Parsing error: Unexpected token, expected "}" prettier/prettier which is using

const { title } = Astro.props;

3. Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? prettier/prettier

4. which is due to below content in .astro page

<Layout> ....</Layout>

Expected behavior

How to avoid import meta and adjacent JSX issue

Screenshots

Desktop (please complete the following information):

• OS: windows 11
• Browser chrome
• Version 183

Additional context Add any other context about the problem here.

[xkeshav]

overall every import statement gives error in .astro file