eslint-plugin-html
eslint-plugin-html copied to clipboard
Published
20 hours ago •
BenoitZugmeyer
BenoitZugmeyer
eslint-plugin-html and prettier have autofix issues with indent changes
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
- ESLint version: 7.5.0
- eslint-plugin-html version: 6.0.0 (also tried 6.0.2)
- prettier: 1.19.1 and 2.0.5
- eslint-plugin-prettier: 3.1.2 and 3.1.4
- eslint-config-prettier: 6.11.0
- NodeJS version: 10.21.0
- Operating System name and version: MacOS 10.14.6
- ESLint configuration (.eslintrc):
modules.exports = {
extends: ["plugin:prettier/recommended"],
plugins: ["html"]
}
- Prettier configuration:
{
"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.
