html-indent: Wants to indent comments too deep after multiline tags

[LukeShu]

Tell us about your environment

• ESLint Version: 4.19.1
• eslint-plugin-vue Version: 4.5.0
• Node Version: 10.3.0

Please show your full configuration:

module.exports = {
    root: true,
    plugins: ["vue"],
    extends: [
	"eslint:recommended",
	"plugin:vue/recommended",
    ],
    rules: {
	"vue/max-attributes-per-line": ["warn", {
	    "multiline": {"allowFirstLine": true}
	}],
    }
}

What did you do? Please include the actual source code causing the issue.

<template>
  <div>
    <input type="text"
           value="foo">
    <!-- comment -->
  </div>
</template>

What did you expect to happen?

There to be no problem with the file; no warnings/or errors.

What actually happened? Please include the actual, raw output from ESLint.

$ ./node_modules/.bin/eslint test.vue                                                                                    

/home/lukeshu/testcase/test.vue
  5:1  error  Expected indentation of 11 spaces but found 4 spaces  vue/html-indent

✖ 1 problem (1 error, 0 warnings)
  1 error, 0 warnings potentially fixable with the `--fix` option.

$ ./node_modules/.bin/eslint --fix test.vue                                                                                                    
$ cat test.vue                                                                                                                                 
<template>
  <div>
    <input type="text"
           value="foo">
           <!-- comment -->
  </div>
</template>

It wants to indent the comment too deep--as if it were inside of the <input> tag. This is because it is aligning to the previous line, not the previous... I'm not sure what word to use... "statement"?

[armano2]

I did small testing for this one, and looks like its only affecting comments

[LukeShu]

Yes, it only affects comments. The code handles comments specially (rather than as regular nodes) for a couple of reasons, but one of them is that it wants to allow a comment to be aligned as either a regular node, or aligned with the closing tag.

That is, if the code were bug-free, it would consider both of these to be correct:

<template>
  <div>
    <input type="text"
           value="foo">
    <!-- comment -->
  </div>
</template>

and

<template>
  <div>
    <input type="text"
           value="foo">
  <!-- comment -->
  </div>
</template>

[mysticatea]

I'm sorry for my delay.

Looks like a bug.

On ESLint, comments are separated from AST (because comments don't change semantics). Therefore, we have to handle comments by the special way. Currently, our indentation rules adjust comments to the previous token or the next token. In this case, the previous token is HTMLTagClose (>) and the next token is HTMLEndTagOpen (</div). As a result, it has the current behavior.

We have to change the current strategy to fix this issue.

[armano2]

This issue is also present in js/ts code

class Foo {
  prop = 2
  // foo
}

it wants to align it to 0 indent

[mysticatea]

In that TypeScript case, the previous token is an unknown token (TypeScript's original AST), so it's ignored. As a result, the comment is adjusted to only the next token }.

I think we can add TypeScript support to our indent rules.