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

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”?

[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.

[armano2]

This issue is also present in js/ts code

class Foo {
  prop = 2
  // foo
}

it wants to align it to 0 indent