feat(lint): enforce putting '<script>' tag first instead of '<template>'

Thomasan1999 · Sep 14, 2024 · 516b77a · 516b77a
1 parent 5919d44
commit 516b77a
Show file tree

Hide file tree

Showing 29 changed files with 473 additions and 472 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,19 +48,20 @@ 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'] }]
+        }
     },
     {
         files: ['**/*.vue'],
         rules: {
             'vue/attribute-hyphenation': ['error', 'never'],
             '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/App.vue b/client/src/components/App.vue
@@ -1,11 +1,3 @@
-<template>
-    <RouterView
-        v-if="initialized"
-        :style="`--scrollbar-width: ${scrollbarWidth}px; --vh: ${windowHeight / 100}px`"
-    />
-    <ToastContainer />
-</template>
-
 <script lang="ts" setup>
     import useStore from '@/store';
     import { computed, ref } from 'vue';
@@ -24,6 +16,14 @@
     const windowHeight = computed(() => store.windowHeight);
 </script>
 
+<template>
+    <RouterView
+        v-if="initialized"
+        :style="`--scrollbar-width: ${scrollbarWidth}px; --vh: ${windowHeight / 100}px`"
+    />
+    <ToastContainer />
+</template>
+
 <style lang="scss">
     @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700|Montserrat&display=swap');
     @import 'reset';

diff --git a/client/src/components/ExternalLink.vue b/client/src/components/ExternalLink.vue
@@ -1,3 +1,5 @@
+<script lang="ts" setup></script>
+
 <template>
     <a
         class="external-link"
@@ -8,5 +10,3 @@
         <slot />
     </a>
 </template>
-
-<script lang="ts" setup></script>
diff --git a/client/src/components/main/CloseIcon.vue b/client/src/components/main/CloseIcon.vue
@@ -1,3 +1,5 @@
+<script lang="ts" setup></script>
+
 <template>
     <svg
         class="close-icon"
@@ -15,8 +17,6 @@
     </svg>
 </template>
 
-<script lang="ts" setup></script>
-
 <style lang="scss" scoped>
     .close-icon {
         fill: currentColor;

diff --git a/client/src/components/main/Main.vue b/client/src/components/main/Main.vue
@@ -1,29 +1,3 @@
-<template>
-    <div
-        class="main"
-        ref="root"
-        :style="`--navbar-height: ${navbarHeight}px`"
-    >
-        <Navbar
-            v-if="activeSection"
-            :activeSection="activeSection"
-            :sections="sections"
-            @linkClick="onLinkClick"
-        />
-        <div class="main-section-container">
-            <Component
-                v-for="[sectionName, sectionData] in sections"
-                :key="sectionName"
-                :is="components[sectionData.componentName]"
-                :name="sectionName"
-                :ref="(component) => (sectionElements[sectionName] = component.$el)"
-            />
-        </div>
-        <FooterComponent />
-        <div id="modal-container" />
-    </div>
-</template>
-
 <script lang="ts" setup>
     import Navbar from '@/components/main/navbar/Navbar.vue';
     import mainSections from '@/components/main/mainSections';
@@ -123,6 +97,32 @@
     });
 </script>
 
+<template>
+    <div
+        class="main"
+        ref="root"
+        :style="`--navbar-height: ${navbarHeight}px`"
+    >
+        <Navbar
+            v-if="activeSection"
+            :activeSection="activeSection"
+            :sections="sections"
+            @linkClick="onLinkClick"
+        />
+        <div class="main-section-container">
+            <Component
+                v-for="[sectionName, sectionData] in sections"
+                :key="sectionName"
+                :is="components[sectionData.componentName]"
+                :name="sectionName"
+                :ref="(component) => (sectionElements[sectionName] = component.$el)"
+            />
+        </div>
+        <FooterComponent />
+        <div id="modal-container" />
+    </div>
+</template>
+
 <style lang="scss" scoped>
     .main {
         --main-row-gap: 50px;

diff --git a/client/src/components/main/MainSection.vue b/client/src/components/main/MainSection.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+    import { computed, ref } from 'vue';
+    import mainSections from '@/components/main/mainSections';
+    import { MainSectionProps } from '@/components/main/types';
+
+    const props = withDefaults(defineProps<MainSectionProps>(), { heading: false });
+
+    const root = ref<HTMLDivElement | null>(null);
+
+    const activeSection = computed(() => mainSections[props.name]);
+
+    const id = computed(() => activeSection.value.id);
+
+    const title = computed(() => activeSection.value.title);
+</script>
+
 <template>
     <section
         class="main-section"
@@ -16,22 +32,6 @@
     </section>
 </template>
 
-<script lang="ts" setup>
-    import { computed, ref } from 'vue';
-    import mainSections from '@/components/main/mainSections';
-    import { MainSectionProps } from '@/components/main/types';
-
-    const props = withDefaults(defineProps<MainSectionProps>(), { heading: false });
-
-    const root = ref<HTMLDivElement | null>(null);
-
-    const activeSection = computed(() => mainSections[props.name]);
-
-    const id = computed(() => activeSection.value.id);
-
-    const title = computed(() => activeSection.value.title);
-</script>
-
 <style lang="scss" scoped>
     .main-section {
         align-items: center;

diff --git a/client/src/components/main/Toast.vue b/client/src/components/main/Toast.vue
@@ -1,30 +1,3 @@
-<template>
-    <Teleport to="#modal-container">
-        <Transition
-            name="fade"
-            @after-leave="$emit('close')"
-        >
-            <div
-                v-if="opened"
-                class="toast"
-                :class="[`type-${type}`]"
-                data-testid="toast"
-                :style="`--relative-margin-top: ${relativeMarginTop}`"
-            >
-                <div class="toast-message">{{ message }}</div>
-                <button
-                    class="toast-close-button"
-                    data-testid="close-button"
-                    :title="locales.closeButtonTitle"
-                    @click="opened = false"
-                >
-                    <CloseIcon class="toast-close-button-icon" />
-                </button>
-            </div>
-        </Transition>
-    </Teleport>
-</template>
-
 <script lang="ts" setup>
     import useStore from '@/store';
     import { computed, onMounted, ref } from 'vue';
@@ -68,6 +41,33 @@
     });
 </script>
 
+<template>
+    <Teleport to="#modal-container">
+        <Transition
+            name="fade"
+            @after-leave="$emit('close')"
+        >
+            <div
+                v-if="opened"
+                class="toast"
+                :class="[`type-${type}`]"
+                data-testid="toast"
+                :style="`--relative-margin-top: ${relativeMarginTop}`"
+            >
+                <div class="toast-message">{{ message }}</div>
+                <button
+                    class="toast-close-button"
+                    data-testid="close-button"
+                    :title="locales.closeButtonTitle"
+                    @click="opened = false"
+                >
+                    <CloseIcon class="toast-close-button-icon" />
+                </button>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
 <style lang="scss" scoped>
     .toast {
         --default-margin-top: calc(var(--content-padding-horizontal) + var(--navbar-height));

diff --git a/client/src/components/main/ToastContainer.vue b/client/src/components/main/ToastContainer.vue
@@ -1,14 +1,14 @@
+<script setup lang="ts">
+    import Toast from '@/components/main/Toast.vue';
+    import useStore from '@/store';
+
+    const store = useStore();
+</script>
+
 <template>
     <Toast
         v-for="(toast, toastIndex) in store.toasts"
         v-bind="toast"
         @close="store.removeToast(toastIndex)"
     />
 </template>
-
-<script setup lang="ts">
-    import Toast from '@/components/main/Toast.vue';
-    import useStore from '@/store';
-
-    const store = useStore();
-</script>
diff --git a/client/src/components/main/about-myself/AboutMyself.vue b/client/src/components/main/about-myself/AboutMyself.vue
@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+    import MainSection from '@/components/main/MainSection.vue';
+    import AboutMyselfColumn from '@/components/main/about-myself/AboutMyselfColumn.vue';
+    import { computed } from 'vue';
+    import useStore from '@/store';
+    import AboutMyselfPhotoContainer from '@/components/main/about-myself/AboutMyselfPhotoContainer.vue';
+
+    const store = useStore();
+
+    const locales = computed(() => store.locales.sections.aboutMyself);
+</script>
+
 <template>
     <MainSection
         class="about-myself"
@@ -20,18 +32,6 @@
     </MainSection>
 </template>
 
-<script lang="ts" setup>
-    import MainSection from '@/components/main/MainSection.vue';
-    import AboutMyselfColumn from '@/components/main/about-myself/AboutMyselfColumn.vue';
-    import { computed } from 'vue';
-    import useStore from '@/store';
-    import AboutMyselfPhotoContainer from '@/components/main/about-myself/AboutMyselfPhotoContainer.vue';
-
-    const store = useStore();
-
-    const locales = computed(() => store.locales.sections.aboutMyself);
-</script>
-
 <style lang="scss" scoped>
     .about-myself {
         padding-bottom: var(--main-row-gap);

diff --git a/client/src/components/main/about-myself/AboutMyselfColumn.vue b/client/src/components/main/about-myself/AboutMyselfColumn.vue
@@ -1,19 +1,3 @@
-<template>
-    <div class="about-myself-column">
-        <h3
-            class="about-myself-column-title"
-            data-testid="title"
-        >
-            {{ title }}
-        </h3>
-        <p
-            class="about-myself-column-text"
-            data-testid="text"
-            v-html="text"
-        />
-    </div>
-</template>
-
 <script lang="ts" setup>
     import { computed } from 'vue';
     import useStore from '@/store';
@@ -31,6 +15,22 @@
     );
 </script>
 
+<template>
+    <div class="about-myself-column">
+        <h3
+            class="about-myself-column-title"
+            data-testid="title"
+        >
+            {{ title }}
+        </h3>
+        <p
+            class="about-myself-column-text"
+            data-testid="text"
+            v-html="text"
+        />
+    </div>
+</template>
+
 <style lang="scss" scoped>
     .about-myself-column {
         box-sizing: border-box;

diff --git a/client/src/components/main/about-myself/AboutMyselfPhotoContainer.vue b/client/src/components/main/about-myself/AboutMyselfPhotoContainer.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+    import { AboutMyselfPhotoContainerProps } from '@/components/main/about-myself/types';
+
+    defineProps<AboutMyselfPhotoContainerProps>();
+</script>
+
 <template>
     <picture
         data-testid="about-myself-photo-container"
@@ -21,9 +27,3 @@
         />
     </picture>
 </template>
-
-<script setup lang="ts">
-    import { AboutMyselfPhotoContainerProps } from '@/components/main/about-myself/types';
-
-    defineProps<AboutMyselfPhotoContainerProps>();
-</script>