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/remended",
  ],
  // ...
  overrides: [
    {
      // Define the configuration for `.astro` file.
      files: ["*.astro"],
      // Allows Astro ponents 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?

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/remended",
  ],
  // ...
  overrides: [
    {
      // Define the configuration for `.astro` file.
      files: ["*.astro"],
      // Allows Astro ponents 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?

• javascript
• eslint
• astrojs

• English only, please. – yyyy Commented Jul 14, 2023 at 11:12
• I'm sorry, I didn't realize it, now it's ok, do you have any idea of ​​the solution? – Jerónimo Orozco Commented Jul 14, 2023 at 16:17
• Sorry, I was just browsing random questions. I don't know much about astro or eslint. – yyyy Commented Jul 15, 2023 at 3:34
• Have you tried vs code the official eslint plugin? – skdishansachin Commented Jul 15, 2023 at 15:52
• I have it, for the moment using the standard linter in react projects it works fine for me, but in the case of astro I can't find a way, I look in the configuration but I don't know why it doesn't work for me – Jerónimo Orozco Commented Jul 15, 2023 at 16:34

2 Answers 2

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:remended",
    "plugin:@typescript-eslint/remended",
    "plugin:astro/remended",
    "plugin:astro/jsx-a11y-remended",
  ],
  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: {
  },
};

For anyone seeking a solution in 2024 to use Es-lint with Astro

Note: if you are using any other package manager rather than npm just replace npm word with the keyword for your package manager like (pnpm - yarn) in every step

1- first, you need to install the Astro plugin: https://ota-meshi.github.io/eslint-plugin-astro/user-guide/

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

2- [Optional] For typescript, you need to add:

npm install --save-dev @typescript-eslint/parser

3- After that create a .eslintrc.cjs file in the root directory

4- Add this configuration to the .eslint.cjs file

/** @type {import("eslint").Linter.Config} */
module.exports = {
  extends: ['plugin:astro/remended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    sourceType: 'module',
    ecmaVersion: 'latest'
  },
  overrides: [
    {
      files: ['*.astro'],
      parser: 'astro-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
        extraFileExtensions: ['.astro']
      },
      rules: {
        // override/add rules settings here, such as:
        // "astro/no-set-html-directive": "error"
      }
    }
  ]
}

5- Add this to Vs-cose settings.json

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro",
    "typescript",
    "typescriptreact"
  ],

6- Install the official eslint extension from Microsoft if you don't already https://marketplace.visualstudio./items?itemName=dbaeumer.vscode-eslint

7- Add this to the script object in your package.json file

  {
      "script": {
        "lint": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\""
      }
    }

8- If you want the output to be in a table view you will need to install the eslint-formatter-table package as it's now not part of the eslint core

npm install --save-dev eslint-formatter-table

Update your lint script to use the table format

"lint": " eslint --format 'table' "src/**/*.{js,ts,jsx,tsx,astro}"",

9- Finally, check from the terminal with the mand

npm lint