html-indent weird behavior with spaces and attributes

[maxorlovsky]

Tell us about your environment

• ESLint Version: 5.6.0
• eslint-plugin-vue Version: 4.7.1
• Node Version: v10.10.0

Please show your full configuration:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "jest": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:vue/base"
    ],
    "plugins": [
        "vue"
    ],
    "globals": {},
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 8
    },
    "rules": {
        "vue/html-indent": ["error", 4, {
            "attribute": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }],
        "vue/max-attributes-per-line": [2, {
            "singleline": 1,
            "multiline": {
                "max": 1,
                "allowFirstLine": true
            }
        }]
    }
}

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

<template>
    <span class="btn">
        <svg :height="height + width"
            :width="width"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path :d="path"
                :fill="fill"
                :stroke="color"
                :stroke-width="thickness + 0.9"
            />
        </svg>
  </span>
</template>

<script>
export default {
    name: 'btn',
    data() {
        return {
            thickness: 1,
            height: 23,
            width: 10,
            fill: 'none',
            color: '#fff',
            path: ''
        };
    }
};
</script>

What did you expect to happen?
Working ESLint with proper identation

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

   4:1  error  Expected indentation of 13 spaces but found 12 spaces  vue/html-indent
   5:1  error  Expected indentation of 13 spaces but found 12 spaces  vue/html-indent
   6:1  error  Expected indentation of 13 spaces but found 12 spaces  vue/html-indent
   9:1  error  Expected indentation of 18 spaces but found 16 spaces  vue/html-indent
  10:1  error  Expected indentation of 18 spaces but found 16 spaces  vue/html-indent
  11:1  error  Expected indentation of 18 spaces but found 16 spaces  vue/html-indent
  18:1  error  Expected indentation of 13 spaces but found 12 spaces  vue/html-indent
  19:1  error  Expected indentation of 13 spaces but found 12 spaces  vue/html-indent
  20:1  error  Expected indentation of 13 spaces but found 12 spaces  vue/html-indent
  23:1  error  Expected indentation of 18 spaces but found 16 spaces  vue/html-indent
  24:1  error  Expected indentation of 18 spaces but found 16 spaces  vue/html-indent
  25:1  error  Expected indentation of 18 spaces but found 16 spaces  vue/html-indent

I use VSCode with configuration of Spaces: 4.

So I don't understand why ESLint expect one more or two more spaces in the identation.

[michalsnik]

Hey! I think it's because of the "alignAttributesVertically": true, setting. It expects your attributes to be vertically aligned. If you set it to false you should be ok.

[maxorlovsky]

But what if I want them to be vertically aligned as well?

[mysticatea]

Hi.
alignAttributesVertically:true option makes that ESLint reports attributes if the attributes are on a different column to the first attribute.

I'm not sure if VSCode has a similar option or not. ESLint doesn't check VSCode's configuration.

Thank you.