Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
LukeShu opened this issue Jul 8, 2018 · 5 comments Β· Fixed by #676
Closed

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

LukeShu opened this issue Jul 8, 2018 · 5 comments Β· Fixed by #676
Assignees

Comments

@LukeShu
Copy link
Contributor

LukeShu commented Jul 8, 2018

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
Copy link
Contributor

armano2 commented Nov 19, 2018

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

@LukeShu
Copy link
Contributor Author

LukeShu commented Nov 19, 2018

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
Copy link
Member

mysticatea commented Nov 23, 2018

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
Copy link
Contributor

armano2 commented Nov 23, 2018

This issue is also present in js/ts code

class Foo {
  prop = 2
  // foo
}

it wants to align it to 0 indent

@mysticatea
Copy link
Member

mysticatea commented Nov 23, 2018

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.

michalsnik pushed a commit that referenced this issue Nov 25, 2018
* Fix: improve comment indentation (fixes #514)

* πŸ“ fix JSDoc comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants