ota-meshi/eslint-plugin-astro

Not detecting `prefer-class-list-directive` errors

Closed this issue · 1 comments

jhilker98 commented

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

8.45.0

What version of eslint-plugin-astro are you using?

0.27.2

What did you do?

Configuration 
{
  "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",
        "astro/prefer-class-list-directive": "error"
      }
    }
    // ...
  ]
}

Example Astro Code

---
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body class="min-h-screen bg-slate-100">
<!--    <div
      set:html="<h1 class='text-5xl font-bold mb-8'>This should error with the <span class='font-mono'>astro/no-set-html-directive</span> error."
    /> -->

    <div>
      <h3 class="text-3xl font-bold">
        This should error with the <span class="font-mono"
          >astro/prefer-class-list-directive</span
        > rule.
      </h3>
    </div>
  </body>
</html>

Astro Configuration

import { defineConfig } from 'astro/config';

import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind()]
});

What did you expect to happen?

I expected to get an error for the lines that didn't have a class:list for the element there.

What actually happened?

ESlint passed all the checks (except for the one I had commented out to intentionally see if it would fail, which it did).

Link to Minimal Reproducible Example

https://github.com/jhilker98/eslint-astro-class-bug

Additional comments

I am still quite new to ESLint, so if I've just configured something wrong please let me know.

ota-meshi commented

The prefer-class-list-directive rule does not check static class attributes. The rule warns to replace if it has an expression.
https://ota-meshi.github.io/eslint-plugin-astro/rules/prefer-class-list-directive/