User Guide
Installation
If you write TypeScript in Astro components, you also need to install the @typescript-eslint/parser
:
If you want to use the rules for checking accessibility (A11Y), you also need to install eslint-plugin-jsx-a11y additionally: (It is used internally in the rules for A11Y.)
π Usage
Configuration
New Config (eslint.config.js
)
Use eslint.config.js
file to configure rules. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.
Example eslint.config.js:
Example eslint.config.cjs:
This plugin provides configs:
*.configs['base']
β¦ Minimal configuration to enable correct Astro component linting.*.configs['recommended']
β¦ Above, plus rules to prevent errors or unintended behavior.*.configs['all']
β¦ Configuration enables all astro rules. Itβs meant for testing, not for production use because it changes with every minor and major version of the plugin. Use it at your own risk.- Extension of sharable configuration provided by eslint-plugin-jsx-a11y. You need to install eslint-plugin-jsx-a11y to use it.
*.configs['jsx-a11y-recommended']
β¦ Similar to the"plugin:jsx-a11y/recommended"
configuration, but with the rules extended for Astro components enabled.*.configs['jsx-a11y-strict']
β¦ Similar to the"plugin:jsx-a11y/strict"
configuration, but with the rules extended for Astro components enabled.
See the rule list to get the rules
that this plugin provides.
Legacy Config (.eslintrc
)
Use .eslintrc.*
file to configure rules. See also: https://eslint.org/docs/latest/use/configure.
Example .eslintrc.js. When using the shareable configuration provided by the plugin:
If you do not use a shareable configuration, it is the same as the following configuration:
If you are writing client-side scripts in TypeScript and want to use @typescript-eslint/parser
as the TypeScript parser, you will need to use client-side-ts
processor and configure it as follows.
The pull request diff here is an example of introducing eslint-plugin-astro
to the withastro/docs repository.
This plugin provides configs:
plugin:astro/base
β¦ Minimal configuration to enable correct Astro component linting.plugin:astro/recommended
β¦ Above, plus rules to prevent errors or unintended behavior.plugin:astro/all
β¦ Configuration enables all astro rules. Itβs meant for testing, not for production use because it changes with every minor and major version of the plugin. Use it at your own risk.- Extension of sharable configuration provided by eslint-plugin-jsx-a11y. You need to install eslint-plugin-jsx-a11y to use it.
plugin:astro/jsx-a11y-recommended
β¦ Similar to the"plugin:jsx-a11y/recommended"
configuration, but with the rules extended for Astro components enabled.plugin:astro/jsx-a11y-strict
β¦ Similar to the"plugin:jsx-a11y/strict"
configuration, but with the rules extended for Astro components enabled.
See the rule list to get the rules
that this plugin provides.
Parser Configuration
See https://github.com/ota-meshi/astro-eslint-parser#readme.
Resolving Error in JSX: Unsafe return of an any
typed value
Astro supports JSX from multiple frameworks such as React, Preact, and Solid.js by defining JSX Elements as HTMLElement | any;
. When a framework with a JSX type definition is not present in your project this any can cause the ESLint error @typescript-eslint/no-unsafe-return
.
This can be resolved by overriding the astroHTML.JSX.Element definition with a *.d.ts
file such as jsx.d.ts
in your project root directory:
Add this *.d.ts
to your tsconfig.eslint.json
:
Ensure that any necessary parserOptions in your .eslintrc.**
have a project key also pointing to this config:
Running ESLint from the command line
If you want to run eslint
from the command line, make sure you include the .astro
extension using the --ext
option or a glob pattern, because ESLint targets only .js
files by default.
Examples:
π» Editor Integrations
Visual Studio Code
Use the dbaeumer.vscode-eslint extension that Microsoft provides officially.
You have to configure the eslint.validate
option of the extension to check .astro
files, because the extension targets only *.js
or *.jsx
files by default.
Example .vscode/settings.json:
β FAQ
Parsing the .astro
file fails
You should check the parser configuration.