How to use with Astro Components?

[soerenmartius]

Hi There,

First of all, thanks a lot for providing this set of rules; it's been really helpful to me in the past when working wie Vue3. I just started playing around with https://astro.build/ and would like to use the @antfu/eslint-config-ts rules in *.astro components. Could you provide me with some advice on how to add the filetype?

This is my current config:

eslintrc

{
  "extends": [
    "@antfu/eslint-config-ts",
    "plugin:tailwindcss/recommended",
    "plugin:astro/recommended",
    "plugin:astro/jsx-a11y-strict",
  ],
  "plugins": [
    "tailwindcss",
    "jsx-a11y",
  ],
  "rules": {
    "no-console": "warn",
    "tailwindcss/no-custom-classname": "warn",
    "antfu/if-newline": "error",
  },
  "overrides": [
    {
      "files": ["*.astro"],
      "parser": "astro-eslint-parser",
      "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "extraFileExtensions": [".astro"],
      },
      "rules": {
      },
    },
  ],
}

Many thanks!

[SeryiBaran]

Any news?..

[antfu]

Sorry there is no plan to support astro built-in. Feel free to fork.

[tinchoz49]

Workaround that I'm using:

package.json:

{
   ...
  "scripts": {
    "lint": "eslint ."
  },
  "devDependencies": {
    "@antfu/eslint-config": "^2.1.2",
    "@eslint/eslintrc": "^2.1.3",
    "@types/eslint": "^8.44.8",
    "astro-eslint-parser": "^0.16.0",
    "eslint": "^8.54.0",
    "eslint-plugin-astro": "^0.30.0",
    "eslint-plugin-jsx-a11y": "^6.8.0"
  }
}

eslint.config.js:

import path from 'node:path'
import { fileURLToPath } from 'node:url'
import antfu from '@antfu/eslint-config'
import { FlatCompat } from '@eslint/eslintrc'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname,
  resolvePluginsRelativeTo: __dirname
})

/** @type {import('eslint').Linter.FlatConfig[]} */
export default antfu(
  {},
  ...compat.config({
    overrides: [{
      files: ['*.astro'],
      extends: [
        'plugin:astro/recommended',
        'plugin:astro/jsx-a11y-recommended'
      ],
      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']
      },
      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',
      }
    }]
  })
)

For vscode:

• Add 'astro' to your settings.json eslint.validate.
• Change formatter for astro to eslint:

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "astro"
  ],
 "[astro]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },

[soerenmartius]

import antfu from '@antfu/eslint-config'

import astroParser from 'astro-eslint-parser'
import globals from 'globals'
import tsParser from '@typescript-eslint/parser'

import astro from 'eslint-plugin-astro'

// import jsx from '@stylistic/eslint-plugin-jsx'
import jsxa11y from 'eslint-plugin-jsx-a11y'
import unocss from '@unocss/eslint-config/flat'

export default antfu(
  {
    jsx: true,
    ...unocss,
    ignores: ['dist/*'],
    // typescript: {
    //   tsconfigpath: 'tsconfig.json',
    // },
  },
  {
    files: ['**/*.astro'],
    plugins: {
      astro,
      'jsx-a11y': jsxa11y,
    },
    rules: {
      ...astro.configs.recommended.rules,
      // TODO add when https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/pull/891 is merged
      // ...jsxa11y.configs.recommended.rules,
      'style/jsx-tag-spacing': [
        'error',
        {
          closingSlash: 'never',
          beforeSelfClosing: 'never',
          afterOpening: 'never',
          beforeClosing: 'never',
        },
      ],
      'style/jsx-one-expression-per-line': 'off',
      'import/default': 'off',
      'import/order': [
        'error',
        {
          warnOnUnassignedImports: true,
          alphabetize:
          {
            order: 'asc',
            caseInsensitive: true,
          },
        },
      ],
    },
    languageOptions: {
      parser: astroParser,
      globals: globals.node,
      parserOptions: {
        parser: tsParser,
        extraFileExtensions: ['.astro'],
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
  },
)