disable ESlint rules conflicting with Prettier

.eslintrc.js

@@ -89,13 +89,13 @@ module.exports = {
         'vue/attribute-hyphenation': 'error',
         'vue/component-definition-name-casing': 'error',
         'vue/first-attribute-linebreak': 'error',
-        'vue/html-closing-bracket-newline': 'error',
+        'vue/html-closing-bracket-newline': 'off', // Conflicts with Prettier
         'vue/html-closing-bracket-spacing': 'error',
         'vue/html-end-tags': 'error',
-        'vue/html-indent': 'error',
+        'vue/html-indent': 'off', // Conflicts with Prettier
         'vue/html-quotes': 'error',
-        'vue/html-self-closing': 'error',
-        'vue/max-attributes-per-line': ['error', { singleline: 3, multiline: 1 }],
+        'vue/html-self-closing': ['error', { html: { void: 'always', normal: 'always', component: 'always' } }],
+        'vue/max-attributes-per-line': 'off', // Conflicts with Prettier
         'vue/multiline-html-element-content-newline': 'error',
         'vue/mustache-interpolation-spacing': 'error',
         'vue/no-multi-spaces': 'error',

@xen-orchestra/lite/src/components/AccountButton.vue

@@ -1,12 +1,7 @@
 <template>
   <MenuList placement="bottom-end" shadow>
     <template #trigger="{ open, isOpen }">
-      <button
-        type="button"
-        :class="{ active: isOpen }"
-        class="account-button"
-        @click="open"
-      >
+      <button type="button" :class="{ active: isOpen }" class="account-button" @click="open">
         <UiIcon :icon="faCircleUser" class="user-icon" />
         <UiIcon :icon="faAngleDown" class="dropdown-icon" />
       </button>

@xen-orchestra/lite/src/components/AppHeader.vue

@@ -1,13 +1,8 @@
 <template>
   <header class="app-header">
-    <UiIcon
-      v-if="isMobile"
-      ref="navigationTrigger"
-      :icon="faBars"
-      class="toggle-navigation"
-    />
+    <UiIcon v-if="isMobile" ref="navigationTrigger" :icon="faBars" class="toggle-navigation" />
     <RouterLink :to="{ name: 'home' }">
-      <img v-if="isMobile" alt="XO Lite" src="../assets/logo.svg">
+      <img v-if="isMobile" alt="XO Lite" src="../assets/logo.svg" />
       <TextLogo v-else />
     </RouterLink>
     <slot />

@xen-orchestra/lite/src/components/AppLogin.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-login form-container">
     <form @submit.prevent="handleSubmit">
-      <img alt="XO Lite" src="../assets/logo-title.svg">
+      <img alt="XO Lite" src="../assets/logo-title.svg" />
       <PoolOverrideWarning />
       <p v-if="isHostIsSlaveErr(error)" class="error">
         <UiIcon :icon="faExclamationCircle" />
@@ -10,12 +10,7 @@
       </p>
       <template v-else>
         <FormInputWrapper>
-          <FormInput
-            v-model="login"
-            name="login"
-            readonly
-            type="text"
-          />
+          <FormInput v-model="login" name="login" readonly type="text" />
         </FormInputWrapper>
         <FormInput
           ref="passwordRef"

@xen-orchestra/lite/src/components/AppNavigation.vue

@@ -1,11 +1,6 @@
 <template>
   <Transition name="slide">
-    <nav
-      v-if="isDesktop || isOpen"
-      ref="navElement"
-      :class="{ collapsible: isMobile }"
-      class="app-navigation"
-    >
+    <nav v-if="isDesktop || isOpen" ref="navElement" :class="{ collapsible: isMobile }" class="app-navigation">
       <StoryMenu v-if="$route.meta.hasStoryNav" />
       <InfraPoolList v-else />
     </nav>

@xen-orchestra/lite/src/components/CollectionFilterRow.vue

@@ -2,7 +2,7 @@
   <div class="collection-filter-row">
     <span class="or">{{ $t('or') }}</span>
     <FormWidget v-if="newFilter.isAdvanced" class="form-widget-advanced">
-      <input v-model="newFilter.content">
+      <input v-model="newFilter.content" />
     </FormWidget>
     <template v-else>
       <FormWidget :before="currentFilterIcon">
@@ -29,7 +29,7 @@
         </select>
       </FormWidget>
       <FormWidget v-else-if="hasValueInput" :after="valueInputAfter" :before="valueInputBefore">
-        <input v-model="newFilter.builder.value">
+        <input v-model="newFilter.builder.value" />
       </FormWidget>
     </template>
     <UiActionButton v-if="!newFilter.isAdvanced" :icon="faPencil" @click="enableAdvancedMode" />

@xen-orchestra/lite/src/components/CollectionTable.vue

@@ -22,15 +22,15 @@
     <thead>
       <tr>
         <td v-if="isSelectable">
-          <input v-model="areAllSelected" type="checkbox">
+          <input v-model="areAllSelected" type="checkbox" />
         </td>
         <slot name="head-row" />
       </tr>
     </thead>
     <tbody>
       <tr v-for="item in filteredAndSortedCollection" :key="item.$ref">
         <td v-if="isSelectable">
-          <input v-model="selected" :value="item.$ref" type="checkbox">
+          <input v-model="selected" :value="item.$ref" type="checkbox" />
         </td>
         <slot :item name="body-row" />
       </tr>

@xen-orchestra/lite/src/components/NoDataError.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="no-data">
-    <img alt="No data" class="img" src="@/assets/undraw-bug-fixing.svg">
+    <img alt="No data" class="img" src="@/assets/undraw-bug-fixing.svg" />
     <p class="text-error typo h4-medium">{{ $t('error-no-data') }}</p>
   </div>
 </template>

@xen-orchestra/lite/src/components/NoResult.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="no-result">
-    <img alt="" class="img" src="@/assets/no-result.svg">
+    <img alt="" class="img" src="@/assets/no-result.svg" />
     <p class="text-info">{{ $t('no-result') }}</p>
   </div>
 </template>

@xen-orchestra/lite/src/components/PoolOverrideWarning.vue

@@ -19,7 +19,7 @@
         <I18nT keypath="you-are-currently-on">
           <strong>{{ masterSessionStorage }}</strong>
         </I18nT>
-        <br>
+        <br />
         {{ $t('click-to-return-default-pool') }}
       </p>
     </div>

@xen-orchestra/lite/src/components/ProgressCircle.vue

@@ -8,12 +8,7 @@
       class="progress-circle-fill"
       d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
     />
-    <text
-      class="progress-circle-text"
-      text-anchor="middle"
-      x="50%"
-      y="50%"
-    >{{ progress }}%</text>
+    <text class="progress-circle-text" text-anchor="middle" x="50%" y="50%">{{ progress }}%</text>
   </svg>
 </template>
 

@xen-orchestra/lite/src/components/XoaButton.vue

@@ -1,18 +1,8 @@
 <template>
-  <UiButton
-    v-if="xoaFound"
-    :left-icon="faArrowUpRightFromSquare"
-    class="xoa-button"
-    @click="openXoa()"
-  >
+  <UiButton v-if="xoaFound" :left-icon="faArrowUpRightFromSquare" class="xoa-button" @click="openXoa()">
     {{ $t('access-xoa') }}
   </UiButton>
-  <UiButton
-    v-else
-    :left-icon="faDownload"
-    class="xoa-button"
-    @click="openXoaDeploy()"
-  >
+  <UiButton v-else :left-icon="faDownload" class="xoa-button" @click="openXoaDeploy()">
     {{ $t('deploy-xoa') }}
   </UiButton>
 </template>

@xen-orchestra/lite/src/components/component-story/ComponentStory.vue

@@ -9,12 +9,7 @@
     <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
     <MenuList placement="bottom" shadow>
       <template #trigger="{ open, isOpen }">
-        <TabItem
-          :active="isOpen"
-          :disabled="presets === undefined"
-          class="preset-tab"
-          @click="open"
-        >
+        <TabItem :active="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
           <UiIcon :icon="faSliders" />
           Presets
         </TabItem>
@@ -44,12 +39,7 @@
           </template>
         </UiCardTitle>
         <div class="events-log">
-          <CodeHighlight
-            v-for="event in eventLogRows"
-            :key="event.id"
-            :code="event.args"
-            class="event-log"
-          />
+          <CodeHighlight v-for="event in eventLogRows" :key="event.id" :code="event.args" class="event-log" />
         </div>
       </UiCard>
     </div>

@xen-orchestra/lite/src/components/component-story/StoryExampleComponent.vue

@@ -18,9 +18,9 @@
     <div>Optional string prop: {{ imOptional }}</div>
     <div>Optional string prop with default: {{ imOptionalWithDefault }}</div>
     Input for default v-model:
-    <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement)?.value)">
+    <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement)?.value)" />
     Input for v-model:customModel:
-    <input :value="customModel" @input="emit('update:customModel', ($event.target as HTMLInputElement)?.value)">
+    <input :value="customModel" @input="emit('update:customModel', ($event.target as HTMLInputElement)?.value)" />
     Event with no arguments:
     <button type="button" @click="emit('click')">Click me</button>
     Event with argument:

@xen-orchestra/lite/src/components/component-story/StoryPropParams.vue

@@ -18,12 +18,7 @@
       </tr>
     </tfoot>
     <tbody>
-      <tr
-        v-for="param in params"
-        :key="param.name"
-        :class="{ required: param.isRequired() }"
-        class="row"
-      >
+      <tr v-for="param in params" :key="param.name" :class="{ required: param.isRequired() }" class="row">
         <th class="name">
           {{ param.getFullName() }}
           <sup

@xen-orchestra/lite/src/components/component-story/StoryWidget.vue

@@ -19,12 +19,7 @@
   <div v-else-if="isBooleanWidget(widget)">
     <FormCheckbox v-model="model" />
   </div>
-  <FormInput
-    v-else-if="isNumberWidget(widget)"
-    v-model.number="model"
-    type="number"
-    class="typo p2-regular"
-  />
+  <FormInput v-else-if="isNumberWidget(widget)" v-model.number="model" type="number" class="typo p2-regular" />
   <FormInput v-else-if="isTextWidget(widget)" v-model="model" class="typo p2-regular" />
   <FormJson v-else-if="isObjectWidget(widget)" v-model="model" class="typo p2-regular" />
 </template>

@xen-orchestra/lite/src/components/form/FormCheckbox.vue

@@ -7,7 +7,7 @@
       :type="type === 'radio' ? 'radio' : 'checkbox'"
       class="input"
       v-bind="$attrs"
-    >
+    />
     <span class="fake-checkbox">
       <UiIcon :fixed-width="false" :icon class="icon" />
     </span>

@xen-orchestra/lite/src/components/form/FormInput.vue

@@ -38,7 +38,7 @@
       :required
       class="input"
       v-bind="$attrs"
-    >
+    />
     <span v-if="before !== undefined" class="before">
       <template v-if="typeof before === 'string'">{{ before }}</template>
       <UiIcon v-else :icon="before" class="before" />

@xen-orchestra/lite/src/components/form/FormJson.vue

@@ -1,10 +1,5 @@
 <template>
-  <FormInput
-    :before="faCode"
-    :model-value="jsonValue"
-    readonly
-    @click="openModal()"
-  />
+  <FormInput :before="faCode" :model-value="jsonValue" readonly @click="openModal()" />
 </template>
 
 <script lang="ts" setup>

@xen-orchestra/lite/src/components/infra/InfraHostItem.vue

@@ -3,18 +3,8 @@
     <TreeItemLabel :icon="faServer" :route="{ name: 'host.dashboard', params: { uuid: host.uuid } }">
       {{ host.name_label || '(Host)' }}
       <template #addons>
-        <UiIcon
-          v-if="isPoolMaster"
-          v-tooltip="$t('core.master')"
-          :icon="faStar"
-          color="warning"
-        />
-        <UiCounter
-          v-if="isReady"
-          v-tooltip="$t('vm-running', { count: vmCount })"
-          :value="vmCount"
-          color="info"
-        />
+        <UiIcon v-if="isPoolMaster" v-tooltip="$t('core.master')" :icon="faStar" color="warning" />
+        <UiCounter v-if="isReady" v-tooltip="$t('vm-running', { count: vmCount })" :value="vmCount" color="info" />
       </template>
     </TreeItemLabel>
     <template #sublist>

@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue

@@ -5,12 +5,7 @@
       class="infra-item-label"
       v-bind="$attrs"
     >
-      <a
-        v-tooltip="{ selector: '.text' }"
-        :href
-        class="link"
-        @click="navigate"
-      >
+      <a v-tooltip="{ selector: '.text' }" :href class="link" @click="navigate">
         <UiIcon :icon class="icon" />
         <div class="text typo h6-medium">
           <slot />

@xen-orchestra/lite/src/components/modals/UnreachableHostsModal.vue

@@ -9,12 +9,7 @@
           <p>{{ $t('allow-self-signed-ssl') }}</p>
           <ul>
             <li v-for="url in urls" :key="url">
-              <a
-                :href="url"
-                class="link"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
+              <a :href="url" class="link" rel="noopener noreferrer" target="_blank">
                 {{ url }}
               </a>
             </li>

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardAlarms.vue

@@ -14,7 +14,7 @@
         <UiButton @click="start">{{ $t('load-now') }}</UiButton>
       </div>
       <div>
-        <img alt="" src="@/assets/server-status.svg">
+        <img alt="" src="@/assets/server-status.svg" />
       </div>
     </div>
     <NoDataError v-else-if="hasError" />
@@ -23,9 +23,9 @@
     </div>
     <div v-else-if="alarms.length === 0" class="no-alarm">
       <div>
-        <img alt="" src="@/assets/server-status.svg">
+        <img alt="" src="@/assets/server-status.svg" />
       </div>
-      <p class="text typo h4-medium">{{ $t('all-good') }}<br>{{ $t('no-alarm-triggered') }}</p>
+      <p class="text typo h4-medium">{{ $t('all-good') }}<br />{{ $t('no-alarm-triggered') }}</p>
     </div>
     <div v-else class="table-container">
       <UiTable>

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardNetworkChart.vue

@@ -6,12 +6,7 @@
     </UiCardTitle>
     <NoDataError v-if="hasError" />
     <UiCardSpinner v-else-if="isLoading" />
-    <LinearChart
-      v-else
-      :data
-      :max-value="customMaxValue"
-      :value-formatter="customValueFormatter"
-    />
+    <LinearChart v-else :data :max-value="customMaxValue" :value-formatter="customValueFormatter" />
   </UiCard>
 </template>
 

@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/PoolCpuUsageChart.vue

@@ -6,12 +6,7 @@
     </UiCardTitle>
     <NoDataError v-if="hasError" />
     <UiCardSpinner v-else-if="isLoading" />
-    <LinearChart
-      v-else
-      :data
-      :max-value="customMaxValue"
-      :value-formatter="customValueFormatter"
-    />
+    <LinearChart v-else :data :max-value="customMaxValue" :value-formatter="customValueFormatter" />
   </UiCard>
 </template>
 

@xen-orchestra/lite/src/components/pool/dashboard/ramUsage/PoolRamUsage.vue

@@ -6,12 +6,7 @@
     </UiCardTitle>
     <NoDataError v-if="hasError" />
     <UiCardSpinner v-else-if="isLoading" />
-    <LinearChart
-      v-else
-      :data
-      :max-value="customMaxValue"
-      :value-formatter="customValueFormatter"
-    />
+    <LinearChart v-else :data :max-value="customMaxValue" :value-formatter="customValueFormatter" />
     <SizeStatsSummary :size="currentData.size" :usage="currentData.usage" />
   </UiCard>
 </template>