Package Exports

eslint-plugin-astro
eslint-plugin-astro/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-plugin-astro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

📛 What is this plugin?

ESLint plugin for Astro components.

📖 Documentation

See documents.

💿 Installation

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

Requirements

ESLint v7.0.0 and above

Node.js v14.17.x, v16.x and above

📖 Usage

Configuration

Use .eslintrc.* file to configure rules. See also: https://eslint.org/docs/user-guide/configuring.

Example .eslintrc.js:

module.exports = {
  // ...
  overrides: [
    {
      files: ["*.astro"],
      // Enable this plugin
      plugins: ["astro"],
      env: {
        // Enables global variables available in Astro components.
        node: true,
        "astro/astro": true,
      },
      parser: "astro-eslint-parser",
      // Parse the script in `.astro` as TypeScript by adding the following configuration.
      parserOptions: {
        parser: "@typescript-eslint/parser",
        extraFileExtensions: [".astro"],
        sourceType: "module",
      },
      rules: {
        // override/add rules settings here, such as:
        // "astro/no-set-html-directive": "error"
      },
    },
    {
      // Define the configuration for `<script>` tag.
      // Script in `<script>` is assigned a virtual file name with the `.js` extension.
      files: ["**/*.astro/*.js", "*.astro/*.js"],
      env: {
        browser: 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",
      },
    },
    // ...
  ],
}

Parser Configuration

See https://github.com/ota-meshi/astro-eslint-parser#readme.

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:

eslint --ext .js,.astro src
eslint "src/**/*.{js,astro}"

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

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "astro", // Enable .astro
    "typescript", // Enable .ts
    "typescriptreact" // Enable .tsx
  ]
}

✅ Rules

The --fix option on the command line automatically fixes problems reported by rules which have a wrench 🔧 below.

Security Vulnerability

These rules relate to security vulnerabilities in Astro component code:

Rule ID	Description
astro/no-set-html-directive	disallow use of `set:html` to prevent XSS attack

Best Practices

These rules relate to better ways of doing things to help you avoid problems:

Rule ID	Description
astro/no-set-text-directive	disallow use of `set:text`	🔧

Stylistic Issues

These rules relate to style guidelines, and are therefore quite subjective:

Rule ID	Description
astro/prefer-class-list-directive	require `class:list` directives instead of `class` with expressions	🔧
astro/prefer-object-class-list	require use object instead of ternary expression in `class:list`	🔧
astro/prefer-split-class-list	require use split array elements in `class:list`	🔧

🍻 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools

npm test runs tests and measures coverage.
npm run update runs in order to update readme and recommended configuration.

Working With Rules

This plugin uses astro-eslint-parser for the parser. Check here to find out about AST.

❤️ Supporting

If you are willing to see that this package continues to be maintained, please consider sponsoring me.

🔒 License

See the LICENSE file for license rights and limitations (MIT).