search

BenoitZugmeyer / eslint-plugin-html

An ESLint plugin to extract and lint scripts from HTML files.
ISC License
436 stars 51 forks source link

eslint-plugin-html and prettier have autofix issues with indent changes #131

Open Standard8 opened 4 years ago

Standard8 commented 4 years ago

Description

We are trying to use prettier as part of ESLint, alongside eslint-plugin-html. This seems to generally work, however, it is getting confused with indentation fixes.

Setup configuration

modules.exports = {
  extends: ["plugin:prettier/recommended"],
  plugins: ["html"]
}
{
  "endOfLine": "lf",
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Aditional context

Input test.html file:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
<script>
  function test() {
    ok(
      true,
  'Some very very very very very very very very very very very very long line'
  );
  }
</script>
</body>
</html>

Run eslint --fix --ext .html test.html

Result (no changes, just errors raised):

/Users/mark/dev/gecko/test.html
  11:3  error  Insert `····`         prettier/prettier (eslint)
  12:3  error  Insert `··`           prettier/prettier (eslint)

I've seen various combinations of this, using this as the test function:

<script>
  function test() {
    ok(true, "Some very very very very very very very very very very very very long line");
  }
</script>

Results in it split across lines, but the last line indented incorrectly:

<script>
  function test() {
    ok(
      true,
      "Some very very very very very very very very very very very very long line"
  );
  }
</script>

I guess that the prettier is somehow defeating eslint-plugin-html's whitespace handling.