Introduction

eslint-plugin-astro is [ESLint] plugin for [Astro components].
You can check on the Online DEMO.



This plugin is in the _experimental stages_ of development.

At least it works fine with a withastro/docs repository.

📛 What is this plugin?

[ESLint] plugin for [Astro components].

- Linting Astro components using ESLint.
- Find problems with Astro components.
- Apply a consistent code style to Astro components.
- Linting targets include [Frontmatter], [HTML Template], [JSX-like Expressions], [Client-Side Scripts], [Directives], and more.
- Check code in real time with the ESLint editor integrations.

[frontmatter]: https://docs.astro.build/en/core-concepts/astro-components/#the-component-script
[html template]: https://docs.astro.build/en/core-concepts/astro-components/#the-component-template
[JSX-like Expressions]: https://docs.astro.build/en/core-concepts/astro-syntax/#jsx-like-expressions
[client-side scripts]: https://docs.astro.build/en/guides/client-side-scripts/
[directives]: https://docs.astro.build/en/reference/directives-reference/

📖 Documentation

See documents.

💿 Installation

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

If you write TypeScript in Astro components, you also need to install the @typescript-eslint/parser:

`bash
npm install --save-dev @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.)

`bash
npm install --save-dev eslint-plugin-jsx-a11y
`

[eslint-plugin-jsx-a11y]: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y

> Requirements
>
> - ESLint v7.0.0 and above
> - Node.js v18.18, v20.9, v21.1 and above

📖 Usage

$3

#### 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:

`js
import eslintPluginAstro from 'eslint-plugin-astro';
export default [
// add more generic rule sets here, such as:
// js.configs.recommended,
...eslintPluginAstro.configs.recommended,
{
rules: {
// override/add rules settings here, such as:
// "astro/no-set-html-directive": "error"
}
}
];
`

Example eslint.config.cjs:

`js
const eslintPluginAstro = require('eslint-plugin-astro');
module.exports = [
// add more generic rule sets here, such as:
// js.configs.recommended,
...eslintPluginAstro.configs['flat/recommended'], // In CommonJS, the flat/ prefix is required.
{
rules: {
// override/add rules settings here, such as:
// "astro/no-set-html-directive": "error"
}
}
];
`

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:

`js
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"
},
},
// ...
],
}
`

If you do not use a shareable configuration, it is the same as the following configuration:

`js
module.exports = {
// ...
overrides: [
{
// Define the configuration for .astro file.
files: ["*.astro"],
// Enable this plugin
plugins: ["astro"],
env: {
// Enables global variables available in Astro components.
node: true,
"astro/astro": true,
es2020: true,
},
// 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"],
// The script of Astro components uses ESM.
sourceType: "module",
},
rules: {
// Enable recommended rules
"astro/no-conflict-set-directives": "error",
"astro/no-unused-define-vars-in-style": "error",

// override/add rules settings here, such as:
// "astro/no-set-html-directive": "error"
},
},
{
// Define the configuration for