yeonjuan / html-eslint

ESLint plugin for linting HTML
https://html-eslint.org
MIT License
155 stars 28 forks source link

Does not appear to lint #179

Closed bgp1 closed 7 months ago

bgp1 commented 7 months ago

Hello,

I have followed the examples and this does not appear to work. Below are my files which should be finding issues in asdf.html (which has a location in the root with the config files as well as one folder level down) yet neither are reported.

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint --config .eslintrc.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@html-eslint/eslint-plugin": "0.23.1",
    "@html-eslint/parser": "0.23.0",
    "eslint": "8.56.0"
  }
}

eslint.config.js

const html = require("@html-eslint/eslint-plugin");
const parser = require("@html-eslint/parser");

module.exports = [
  // recommended configuration included in the plugin
  html.configs["flat/recommended"],
  {
    files: ["**/*.html", "**/*.hbs"],
    plugins: {
      "@html-eslint": html,
    },
    languageOptions: {
      parser,
    },
    rules: {
    "@html-eslint/indent": "error",
        "@html-eslint/no-duplicate-id": "error"
    },
  },
];

.eslintrc.js

module.exports = {
    "root": true,
    "extends": "eslint:recommended",
    "plugins": ["@html-eslint"],
    "overrides": [
        {
            "files": ["*.html", "*.hbs"],
            "parser": "@html-eslint/parser",
            "extends": ["plugin:@html-eslint/recommended"]
        }
    ]
};

asdf.html (same in both locations)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
          <div>
        <li> foo </li>
        </div>
        <div id="foo"></div>
<div id="foo"></div>
    </body>
</html>

Folder structure:

/folder
      asdf.html
.eslintrc.js
asdf.html
eslint.config.js
package.json

When I run npm run lint as seen in the package.json this is all that is output:

C:\test>npm run lint

> test@1.0.0 lint
> eslint --config .eslintrc.js

C:\test>

I would expect both asdf.html files to be reported actually for both intent as well as duplicate id. Neither are listed. I've also explicitly tried passing --format stylish in the CLI and still do not receive any errors about these issues in these test files.

yeonjuan commented 7 months ago

Hi @bgp1 Thanks for the report. Could you try using "files": ["**/*.html", "**/*.hbs"], on your .eslintrc.js ? (not *.html, *.hbs)

bgp1 commented 7 months ago

Absolutely. I just made that change and it did not appear to have any affect. Got the same result of no issues found.

yeonjuan commented 7 months ago

@bgp1 Got it! You missed an argument to the command for the input file.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "lint": "eslint --config .eslintrc.js .", // <--- add '.' or whatever you want
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@html-eslint/eslint-plugin": "0.23.1",
    "@html-eslint/parser": "0.23.0",
    "eslint": "8.56.0"
  }
}
bgp1 commented 7 months ago

Yeah that fixed it along with not having both an eslintrc.js and an eslint.config.js files. Thanks so much!