vuejs / eslint-plugin-vue

Official ESLint plugin for Vue.js
https://eslint.vuejs.org/
MIT License
4.47k stars 667 forks source link

Wanted: extend `@stylistic/curly-newline` for code in templates #2614

Open justingrant opened 4 days ago

justingrant commented 4 days ago

Please describe what the rule should do:

Require (or disallow) line breaks after and before curly brackets used in attribute values and inside {{ }} expressions. (Although not for the handlebars themselves!)

There is already a similar rule for square brackets for arrays: vue/array-bracket-newline. But the corresponding rule for curly brackets is missing.

The @stylistic/curly-newline rule already exists for this purpose, and it's is helpful for standardizing how multi-line blocks are broken across lines. In Vue templates, this is most commonly needed in style objects or property-bag parameters to functions.

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:

 <div
    v-if="$vuetify.breakpoint.smAndDown"
    :class="{ active: isActive,
              inactive: !isActive }"
    :style="bgStyle"
  >
 <img
    v-if="item.thumbnails"
    :style="{ 'max-width': `${thumbnailSize}px`,
              'max-height': `${thumbnailSize}px` }"
    :src="foo.png"
  >
          {{
            someFunc({ opt1: 'true',
                       opt2: 'allow' })
          }}

Additional context