Support for Flat Config

[JosefJezek]

Description

• https://eslint.org/docs/latest/use/configure/configuration-files-new
• https://eslint.org/docs/latest/use/configure/migration-guide#start-using-flat-config-files

[ota-meshi]

I welcome pull requests

[Sergih28]

I'd be happy to see this issue move forward 😃

I'm a react dev, so I guess I could help if given some guidance, as I don't know how this project works 😬

[darvid]

I managed to get it working, not sure if this is the best way to do it, though... here's the relevant portion of my .eslint.config.js:

// ... other eslint parsers/plugins ...
import ts from "@typescript-eslint/eslint-plugin";
import astroParser from "astro-eslint-parser";
import astro from "eslint-plugin-astro";

export default [
  // ...
  {
    files: ["**/*.astro"],
    plugins: {
      astro,
    },
    languageOptions: {
      globals: {
        // Enables global variables available in Astro components.
        node: true,
        "astro/astro": true,
        es2020: true,
      },
      parser: astroParser,
      parserOptions: {
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".astro"],
        // The script of Astro components uses ESM.
        sourceType: "module",
      },
    },
    rules: {
      ...astro.configs.all.rules,
    },
  },
  {
    // Define the configuration for `<script>` tag.
    // Script in `<script>` is assigned a virtual file name with the `.js` extension.
    files: ["**/*.astro/*.js", "*.astro/*.js"],
    languageOptions: {
      globals: {
        browser: true,
        es2020: true,
      },
    },
    parserOptions: {
      sourceType: "module",
    },
    rules: {
      // override/add rules settings here, such as:
      // "no-unused-vars": "error"

      // If you are using "prettier/prettier" rule,
      // you don't need to format inside <script> as it will be formatted as a `.astro` file.
      "prettier/prettier": "off",
    },
  },
  {
    // Define the configuration for `<script>` tag when using `client-side-ts` processor.
    // Script in `<script>` is assigned a virtual file name with the `.js` extension.
    files: ["**/*.astro/*.ts", "*.astro/*.ts"],
    languageOptions: {
      globals: {
        browser: true,
        es2020: true,
      },
    },
    parser: tsParser,
    parserOptions: {
      sourceType: "module",
      project: null,
    },
    rules: {
      // override/add rules settings here, such as:
      // "no-unused-vars": "error"

      // If you are using "prettier/prettier" rule,
      // you don't need to format inside <script> as it will be formatted as a `.astro` file.
      "prettier/prettier": "off",
    },
  },
];

ℹ️ the individual flat configuration are mostly copied wholesale from the user guide, with small tweaks to use the imported plugin and parser(s) - I'm sure the shareable configuration is possible, but I'm going with non-shareable.

[TheElegantCoding]

in order to work with stylistic eslint, for now you have to add this

      rules: {
        // this is necessary to force a correct indentation in astro
        'style/indent': ['error', 2],
        'style/jsx-indent': 'off',
        'style/jsx-one-expression-per-line': 'off',
      }

@darvid in my case still dont work, only files in root directory are linter, the astro files inside src arent linter

[darvid]

@TheElegantCoding hmm, even with files set to ["**/*.astro"]? I would perhaps run eslint --debug src/ and see if it matches files?

and yeah, I had to do something similar to use stylistic. 👍

[TheElegantCoding]

my mistake was that i dont put ["**/*.astro"] thanks

[raulfdm]

Although the workaround works in some versions, using the new package from typescript eslint doesn't seem to work properly: https://typescript-eslint.io/packages/typescript-eslint.

It seems there's a mismatch between the TS code being evaluated vs the old typescript of astro eslint plugin while lining.

---

My workaround for that was to have 2 eslint configs (some duplication indeed), one for my regular .ts/.tsx files running flat config and a legacy eslint config only for astro.

{
  "scripts": {
    "lint:eslint": "ESLINT_USE_FLAT_CONFIG=true eslint src",
    "lint:eslint:astro": "ESLINT_USE_FLAT_CONFIG=false eslint src --config .eslintrc.cjs"
  }
}

[TheElegantCoding]

Really thank you @ota-meshi, I will see the flat config support when I have time