How to find lint rule that move '>' starting new lines to previous lines in html?

26 Views Asked by At

I am having trouble formulating a question for Google, but I can illustrate my issue with an example:

This is the code fragment from my Vue component

        <span v-if="item.editable">
          <v-icon color="primary" @click="openApplicantEditCreateDialog(item)"
            >mdi-pencil</v-icon
          >
          <v-icon color="primary" @click="openApplicantDeleteDialog(item)"
            >mdi-delete-forever</v-icon
          >
        </span>

And this is the code I need

        <span v-if="item.editable">
          <v-icon color="primary" @click="openApplicantEditCreateDialog(item)">
            mdi-pencil
          </v-icon>
          <v-icon color="primary" @click="openApplicantDeleteDialog(item)">
            mdi-delete-forever
          </v-icon>
        </span>

I dislike the convention of starting new lines in components with >. Instead I prefer to end lines with the > closing HTML tags.

1

There are 1 best solutions below

0
Daniel On

Proper plugin have name vue/html-closing-bracket-newline

https://eslint.vuejs.org/rules/html-closing-bracket-newline

Description:

Require or disallow a line break before tag's closing brackets

Example of usage

<template>
  <!-- ✓ GOOD -->
  <div id="foo" class="bar">
  <div
    id="foo"
    class="bar"
  >

  <!-- ✗ BAD -->
  <div id="foo" class="bar"
  >
  <div
    id="foo"
    class="bar">
</template>