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

Rule Proposal: label-spacing

Open MunMunMiao opened this issue 6 years ago • 0 comments

Please describe what the rule should do: Increase readability by adding tag spacing

What category should the rule belong to?

  • [x] Enforces code style
  • [ ] Warns about a potential error
  • [ ] Suggests an alternate way of doing something
  • [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

  • close{before: false, after: false}
<!-- bad -->
<template>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</template>
  • open{before: true, after: true}
<!-- good -->
<template>
    <!-- spacing -->
    <div class="header"></div>
    <!-- spacing -->
    <div class="content"></div>
    <!-- spacing -->
    <div class="footer"></div>
    <!-- spacing -->
</template>
  • only before{before: true, after: false}
<template>
    <!-- spacing -->
    <div class="header"></div>
    <!-- spacing -->
    <div class="content"></div>
    <!-- spacing -->
    <div class="footer"></div>
</template>
  • only after{before: false, after: true}
<template>
    <div class="header"></div>
    <!-- spacing -->
    <div class="content"></div>
    <!-- spacing -->
    <div class="footer"></div>
    <!-- spacing -->
</template>
  • more examples
<template>
    <!-- spacing -->
    <div class="header">
        <!-- spacing -->
        <div class="logo"></div>
        <!-- spacing -->
    </div>
    <!-- spacing -->
    <div class="content">
        <!-- spacing -->
        <div class="left"></div>
        <!-- spacing -->
        <div class="right"></div>
        <!-- spacing -->
    </div>
    <!-- spacing -->
    <div class="footer">
        <!-- spacing -->
        <span>XXXXX(at)gmail.com</span>
        <!-- spacing -->
    </div>
    <!-- spacing -->
</template>

Additional context

MunMunMiao avatar May 24 '19 08:05 MunMunMiao