Attribute "alignAttributesVertically" for rule "vue/html-indent" doesn't work when using tabs

[wsmcnaughton]

Tell us about your environment

• ESLint Version: 4.14.0
• eslint-plugin-vue Version: 4.0.0
• Node Version: 8.9.1

Please show your full configuration:

module.exports = {
	parserOptions: {
		parser: 'babel-eslint',
		ecmaVersion: 6,
		sourceType: 'module'
	},
	env: {
		browser: true
	},
	plugins: [
		'chai-friendly',
	],
	extends: [
		'airbnb-base',
		'plugin:vue/recommended'
	],
	// check if imports actually resolve
	'settings': {
		'import/resolver': {
			'webpack': {
				'config': 'build/webpack.base.conf.js'
			}
		}
	},
	// add your custom rules here
	'rules': {
		'no-tabs': 0,
		'indent': ['error', 'tab', {
			'SwitchCase': 1,
		}],
		'no-param-reassign': 0,
		'no-plusplus': 0,
		'max-len': ['error', 120, 2],
		'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
		'no-mixed-operators': ['error', {
			'allowSamePrecedence': true
		}],
		'no-trailing-spaces': ['error', {
			'skipBlankLines': true
		}],
		'prefer-promise-reject-errors': 0,
		'no-unused-expressions': 0,
		'chai-friendly/no-unused-expressions': 2,
		'no-restricted-syntax': 0,
		// don't require .vue extension when importing
		'import/extensions': ['error', 'always', {
			'js': 'never',
			'vue': 'never'
		}],
		// allow optionalDependencies
		'import/no-extraneous-dependencies': ['error', {
			'optionalDependencies': ['test/unit/index.js']
		}],
		// allow debugger during development
		'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
                // vue-specific settings
		'vue/html-indent': ['error', 'tab', {
			'alignAttributesVertically': true,
		}],
		'vue/max-attributes-per-line': ['error', {
			'multiline': {
				'allowFirstLine': true,
			}
		}]
	}
}

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

<template>
	<img v-if="user.avatar_image_url"
	     :src="user.avatar_image_url"
	     :alt="user.short_name"
	     :title="user.short_name"
	     width="100%"
	     height="100%">
	<img v-else
	     :src="`https://ui-avatars.com/api/?name=${user.short_name}&length=1&size=264&font-size=0.75`"
	     :alt="user.short_name"
	     :title="user.short_name"
	     width="100%">
</template>
<script>
export default {
	props: {
		user: {
			type: Object,
			required: true,
		},
	},
	computed: {
		initials() {
			return this.user.short_name.slice(0, 1).toUpperCase();
		},
	},
};
</script>

What did you expect to happen?
Should not raise html-indent error

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

/Users/NaughtyMC/Development/Repositories/Asiago/web-js/src/components/Avatar.vue
   2:1  error  Expected "\t" character, but found " " character  vue/html-indent
   3:4  error  Expected "\t" character, but found " " character  vue/html-indent
   4:4  error  Expected "\t" character, but found " " character  vue/html-indent
   5:4  error  Expected "\t" character, but found " " character  vue/html-indent
   6:4  error  Expected "\t" character, but found " " character  vue/html-indent
   7:4  error  Expected "\t" character, but found " " character  vue/html-indent
   9:4  error  Expected "\t" character, but found " " character  vue/html-indent
  10:4  error  Expected "\t" character, but found " " character  vue/html-indent
  11:4  error  Expected "\t" character, but found " " character  vue/html-indent
  12:4  error  Expected "\t" character, but found " " character  vue/html-indent

[michalsnik]

Hey @NAUGHTYMC Thanks for posting this issue. However it's an expected behaviour. We might mention it in documentation though. alignAttributesVertically is expected to work with spaces, but not with tabs. If you use tabs for indenting your code, you should avoid mixing tabs with spaces and stick to one convention instead. But it's impossible to properly align attributes vertically using tabs, so this rule expects regular tab indentation instead.

[maximal]

Maybe we can return to this issue? Especially that it is successfully resolved in EsLint’s basic indent and no-mixed-spaces-and-tabs rules with smart-tabs setting.

Opened #2288. @wsmcnaughton, @LukeShu, maybe you could upvote it.