-
-
Notifications
You must be signed in to change notification settings - Fork 698
Description
I try to use SmartTabs approach, and faced an issue with eslint-plugin-vue which is successfully resolved in EsLint indent basics. The great thing there is that on any tab size (2, 4, etc.) alignment remains.
What category should the rule belong to?
[x] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
My .eslintrc.yml:
extends:
- eslint:recommended
- plugin:vue/vue3-recommended
- '@vue/eslint-config-typescript'
- '@vue/eslint-config-prettier/skip-formatting'
# ... ... ...
rules:
indent:
- error
- tab
- SwitchCase: 1
no-mixed-spaces-and-tabs:
- error
- smart-tabs
# ... ... ...
vue/html-indent:
- error # not working as expected when using SmartTabs approach
- tab
- alignAttributesVertically: true
vue/script-indent:
- error
- tab
- switchCase: 1
vue/first-attribute-linebreak: off<template>
<section>
<template v-if="model.merged_at">
<!-- GOOD: indent with tabs and alignment with spaces -->
<i class="bi bi-sign-merge-left"
title="Merged" />
<!-- ↑ 3 tabs and 3 spaces to align `title` attribute with `class`. -->
<!-- Attribute alignment remains with any tab size in editor. -->
</template>
</section>
</template><template>
<section>
<template v-if="model.merged_at">
<!-- BAD -->
<i class="bi bi-sign-merge-left"
title="Merged" />
<!-- ↑ 4 tabs, indent checks passed, but alignment broken -->
</template>
</section>
</template>Current rules want me to do that (but that is not what I need by my code style):

EsLint’s indent and no-mixed-spaces-and-tabs work just fine with HTMLs but they are not applied to Vue templates unfortunately.
EsLint no-mixed-spaces-and-tabs rule for reference:
https://eslint.org/docs/latest/rules/no-mixed-spaces-and-tabs
