eslint-plugin-vue
eslint-plugin-vue copied to clipboard
Implement SmartTab behavior similar to EsLint’s `no-mixed-spaces-and-tabs` with `smart-tabs`
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>
Now I have:
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
Related to: #321, #426.