feat(lint): force Vue template attributes order

Thomasan1999 · Sep 14, 2024 · bcf29aa · bcf29aa
1 parent 45d8e4c
commit bcf29aa
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 23 deletions.
diff --git a/client/eslint.config.mjs b/client/eslint.config.mjs
@@ -9,9 +9,9 @@ export default tsEslint.config(
             parserOptions: {
                 parser: tsEslint.parser,
                 ecmaVersion: 2020,
-                sourceType: 'module'
-            }
-        }
+                sourceType: 'module',
+            },
+        },
     },
     {
         rules: {
@@ -48,21 +48,22 @@ export default tsEslint.config(
                 {
                     anonymous: 'always',
                     asyncArrow: 'always',
-                    named: 'never'
-                }
+                    named: 'never',
+                },
             ],
             '@typescript-eslint/no-unused-vars': ['error'],
-            'vue/block-order': ['error', { order: ['script', 'template', 'style'] }],
-            'vue/no-empty-component-block': 'error'
-        }
+        },
     },
     {
         files: ['**/*.vue'],
         rules: {
             'vue/attribute-hyphenation': ['error', 'never'],
+            'vue/attributes-order': 'error',
+            'vue/block-order': ['error', { order: ['script', 'template', 'style'] }],
+            'vue/no-empty-component-block': 'error',
             'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
             'vue/prefer-true-attribute-shorthand': ['error', 'always'],
-            'vue/experimental-script-setup-vars': 'off'
-        }
-    }
+            'vue/experimental-script-setup-vars': 'off',
+        },
+    },
 );
diff --git a/client/src/components/main/Main.vue b/client/src/components/main/Main.vue
@@ -99,8 +99,8 @@
 
 <template>
     <div
-        class="main"
         ref="root"
+        class="main"
         :style="`--navbar-height: ${navbarHeight}px`"
     >
         <Navbar
@@ -111,11 +111,11 @@
         />
         <div class="main-section-container">
             <Component
+                :is="components[sectionData.componentName]"
                 v-for="[sectionName, sectionData] in sections"
                 :key="sectionName"
-                :is="components[sectionData.componentName]"
-                :name="sectionName"
                 :ref="(component) => (sectionElements[sectionName] = component.$el)"
+                :name="sectionName"
             />
         </div>
         <FooterComponent />

diff --git a/client/src/components/main/MainSection.vue b/client/src/components/main/MainSection.vue
@@ -14,13 +14,13 @@
 
 <template>
     <section
-        class="main-section"
         :id="id"
+        class="main-section"
     >
         <div class="text-content">
             <h2
-                class="main-section-name"
                 v-if="heading"
+                class="main-section-name"
             >
                 {{ title }}
             </h2>

diff --git a/client/src/components/main/contact/form/ContactForm.vue b/client/src/components/main/contact/form/ContactForm.vue
@@ -68,17 +68,17 @@
 
 <template>
     <form
+        ref="root"
         class="contact-form -ml-label"
         action="/contact-form/send-mail"
         method="post"
-        ref="root"
         @submit.prevent="onSubmit"
     >
         <ContactFormField
             v-for="field in fields"
-            :label="locales[field.name]"
             v-bind="field"
             v-model="field.value"
+            :label="locales[field.name]"
             @blur="field.touched = true"
             @validSet="(newValue) => onValidSet(field, newValue)"
         />

diff --git a/client/src/components/main/contact/form/ContactFormFieldError.vue b/client/src/components/main/contact/form/ContactFormFieldError.vue
@@ -14,8 +14,8 @@
 
 <template>
     <div
-        class="contact-form-field-error"
         v-if="error"
+        class="contact-form-field-error"
     >
         <div class="contact-form-field-error-message">{{ message }}</div>
     </div>

diff --git a/client/src/components/main/footer/CookiesModal.vue b/client/src/components/main/footer/CookiesModal.vue
@@ -30,8 +30,8 @@
                 </button>
                 <div class="cookies-modal-paragraph-container">
                     <div
-                        class="cookies-modal-paragraph"
                         v-for="paragraph in locales.paragraphs"
+                        class="cookies-modal-paragraph"
                     >
                         <h3 class="cookies-modal-paragraph-heading">{{ paragraph.title }}</h3>
                         <p class="cookies-modal-paragraph-text">{{ paragraph.text }}</p>

diff --git a/client/src/components/main/navbar/Navbar.vue b/client/src/components/main/navbar/Navbar.vue
@@ -72,9 +72,9 @@
 
 <template>
     <nav
+        ref="root"
         class="navbar"
         :class="{ opened }"
-        ref="root"
         :style="`--navbar-max-height: ${maxHeight}`"
     >
         <div class="navbar-part navbar-left-part navbar-outer-part">
@@ -90,9 +90,9 @@
         </div>
         <div class="navbar-part navbar-middle-part">
             <NavbarLink
-                class="navbar-middle-link"
                 v-for="[name, section] in sections"
                 :key="name"
+                class="navbar-middle-link"
                 :active="name === activeSection"
                 data-testid="section-link"
                 routerLink

diff --git a/client/src/components/main/projects/Project.vue b/client/src/components/main/projects/Project.vue
@@ -63,9 +63,9 @@
                     :style="`--hover-height: ${textHoverHeight}px`"
                 >
                     <div
+                        ref="textContent"
                         class="project-text-content"
                         data-testid="text-content"
-                        ref="textContent"
                     >
                         <h4 class="project-what-ive-done">{{ generalLocales.whatIveDone }}:</h4>
                         <p class="project-text-design">