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

Allow mustache and regular strings in singleline html elements

Open AlexGustafsson opened this issue 5 years ago • 0 comments

Please describe what the rule should do: Add support to allow mustache strings as an inline element for the rule vue/singleline-html-element-content-newline even though there are attributes.

I would like to add mustache strings (or just plain strings) to be allowed as in the example below - even though there are attributes added to the element.

What category should the rule belong to?

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

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

Using the following configuration:

"vue/singleline-html-element-content-newline": ["error", {
  "ignoreWhenNoAttributes": true,
  "ignoreWhenEmpty": true,
  "ignores": ["router-link", "pre", "textarea", "a", "abbr", ...]
}],
<!-- Bad -->
<li v-for="user in users" :key="user.id">{{user.name}}</li>

<!-- Good -->
<li v-for="user in users" :key="user.id">
  {{user.name}}
</li>

<!-- Good -->
<li>{{user.name}}</li>

I would like to whitelist the mustache string or just plain strings in order to allow the bad example:

<!-- Good -->
<li v-for="user in users" :key="user.id">{{user.name}}</li>

<!-- Bad -->
<li v-for="user in users" :key="user.id"><p>{{user.name}}</p></li>

<!-- Good -->
<li v-for="user in users" :key="user.id">
  <p>{{user.name}}</p>
</li>

AlexGustafsson avatar Feb 27 '20 10:02 AlexGustafsson