eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

Implement SmartTab behavior similar to EsLint’s `no-mixed-spaces-and-tabs` with `smart-tabs`

Open maximal opened this issue 1 year ago • 0 comments

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: image

Current rules want me to do that (but that is not what I need by my code style): image

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.

maximal avatar Sep 15 '23 18:09 maximal