how to configure eslint in astro framework

Question

I'm trying to configure Eslint in astro but I can't, then I will tell you the steps I followed after starting the project:

npm create astro@latest

npm install --save-dev eslint eslint-plugin-astro

then I created the .eslintrc.js file with the following configuration:

module.exports = {
  // ...
  extends: [
    // ...
    "plugin:astro/recommended",
  ],
  // ...
  overrides: [
    {
      // Define the configuration for `.astro` file.
      files: ["*.astro"],
      // Allows Astro components to be parsed.
      parser: "astro-eslint-parser",
      // Parse the script in `.astro` as TypeScript by adding the following configuration.
      // It's the setting you need when using TypeScript.
      parserOptions: {
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".astro"],
      },
      rules: {
        // override/add rules settings here, such as:
        // "astro/no-set-html-directive": "error"
      },
    },
    // ...
  ],
}

after that I saved in vscode to see if it made the changes according to the rules but it didn't, can you help me please?

Answer 1

Having the following config seems to work on my end for the following versions:

astro >=3.0.0
eslint ^8.50.0
@typescript-eslint/eslint-plugin ^6.7.3
@typescript-eslint/parser ^6.7.3
eslint-plugin-astro ^0.29.0
eslint-plugin-jsx-a11y ^9.17.0

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:astro/recommended",
    "plugin:astro/jsx-a11y-recommended",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
    {
      files: ["*.astro"],
      parser: "astro-eslint-parser",
      parserOptions: {
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".astro"],
      },
      rules: {},
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  rules: {
  },
};