chore: enforce import order

Author: simonwep

eslint.config.mjs

@@ -10,12 +10,12 @@ import tsParser from '@typescript-eslint/parser';
 export default [
   prettier,
   js.configs.recommended,
+  importX.flatConfigs.recommended,
+  importX.flatConfigs.typescript,
   ...ts.configs.recommended,
   ...vue.configs['flat/recommended'],
   ...vueI18n.configs['flat/recommended'],
   vuePrettier,
-  importX.flatConfigs.recommended,
-  importX.flatConfigs.typescript,
   {
     files: ['**/*.{vue,ts,js,mjs}'],
     languageOptions: {
@@ -35,7 +35,6 @@ export default [
       'vue/multi-word-component-names': 'off',
       'vue/require-default-prop': 'off',
       'vue/no-v-html': 'off',
-      'import-x/no-unresolved': 'off',
       'no-console': 'error',
       'prettier/prettier': [
         'error',
@@ -45,6 +44,16 @@ export default [
           singleQuote: true,
           trailingComma: 'none'
         }
+      ],
+      'import-x/no-unresolved': 'off',
+      'import-x/order': [
+        'error',
+        {
+          groups: ['index', 'sibling', 'parent', 'internal', 'external', 'builtin', 'object', 'type'],
+          alphabetize: {
+            order: 'asc'
+          }
+        }
       ]
     }
   }

src/app/components/base/context-menu/ContextMenu.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script lang="ts" setup>
+import ContextMenuButton from './ContextMenuButton.vue';
 import {
   ContextMenuOption,
   ContextMenuOptionId,
@@ -32,7 +33,6 @@ import { useOutOfElementClick } from '@composables';
 import { createPopper, Modifier, Instance, Placement } from '@popperjs/core';
 import { ClassNames } from '@utils';
 import { computed, provide, ref, useCssModule, watch } from 'vue';
-import ContextMenuButton from './ContextMenuButton.vue';
 
 const emit = defineEmits<{
   (e: 'select', option: ContextMenuOption): void;

src/app/components/base/draggable/Draggable.vue

@@ -26,11 +26,11 @@
 </template>
 
 <script lang="ts" setup>
+import { ReorderEvent } from './Draggable.types';
+import { DraggableStore, store } from './store';
 import Button from '@components/base/button/Button.vue';
 import { RiDraggable, RiSkipDownLine, RiSkipUpLine } from '@remixicon/vue';
 import { computed, ref } from 'vue';
-import { ReorderEvent } from './Draggable.types';
-import { DraggableStore, store } from './store';
 import type { Component } from 'vue';
 
 const emit = defineEmits<{

src/app/components/base/draggable/store.ts

@@ -1,5 +1,5 @@
-import { reactive } from 'vue';
 import { DropOrder } from './Draggable.types';
+import { reactive } from 'vue';
 
 export interface DraggableStore {
   group?: string;

src/app/components/base/steps/Step.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts" setup>
+import { ONBOARDING_STORE, OnboardingStore } from './Steps.types';
 import { useIntristicSize } from '@composables';
 import { ClassNames } from '@utils';
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
-import { ONBOARDING_STORE, OnboardingStore } from './Steps.types';
 
 const props = defineProps<{
   class?: ClassNames;

src/app/components/base/steps/Steps.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts" setup>
+import { ONBOARDING_STORE, OnboardingStore, StepsExposed } from './Steps.types';
 import { ClassNames, remove } from '@utils';
 import { computed, provide, reactive, Ref, ref } from 'vue';
-import { ONBOARDING_STORE, OnboardingStore, StepsExposed } from './Steps.types';
 
 const emit = defineEmits<{
   (e: 'finish'): void;

src/app/components/feature/BudgetGroups.vue

@@ -56,19 +56,19 @@
 </template>
 
 <script lang="ts" setup>
+import BudgetGroup from './BudgetGroup.vue';
 import Button from '@components/base/button/Button.vue';
 import Currency from '@components/base/currency/Currency.vue';
 import { ReorderEvent } from '@components/base/draggable/Draggable.types';
 import Draggable from '@components/base/draggable/Draggable.vue';
 import { DraggableStore } from '@components/base/draggable/store';
 import { useMonthNames } from '@composables';
 import { RiAddCircleLine, RiSkipDownLine } from '@remixicon/vue';
+import { useSettingsStore } from '@store/settings';
 import { useDataStore } from '@store/state';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import BudgetGroup from './BudgetGroup.vue';
 import type { Component } from 'vue';
-import { useSettingsStore } from '@store/settings';
 
 const props = defineProps<{
   type: 'expenses' | 'income';

src/app/components/feature/BudgetPane.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useDataStore } from '@store/state';
-import { totals } from '@store/state/utils/budgets';
-import { computed } from 'vue';
 import BudgetGroups from './BudgetGroups.vue';
 import Pane from './Pane.vue';
 import MiniChart from './mini-chart/MiniChart.vue';
+import { useDataStore } from '@store/state';
+import { totals } from '@store/state/utils/budgets';
+import { computed } from 'vue';
 
 const props = defineProps<{
   title?: string;

src/app/components/feature/mini-chart/MiniChart.vue

@@ -5,8 +5,8 @@
 <script lang="ts" setup>
 import EChart from '@components/charts/echart/EChart.vue';
 import { ClassNames } from '@utils';
-import { GridComponentOption, GridComponent } from 'echarts/components';
 import { LineChart, LineSeriesOption } from 'echarts/charts';
+import { GridComponentOption, GridComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { SVGRenderer } from 'echarts/renderers';
 import { computed } from 'vue';

src/app/pages/Frame.vue

@@ -42,20 +42,20 @@
 </template>
 
 <script lang="ts" setup>
+import AdminButton from './navigation/admin/AdminButton.vue';
+import CloudButton from './navigation/auth/CloudButton.vue';
+import InfoButton from './navigation/info/InfoButton.vue';
+import SettingsButton from './navigation/settings/SettingsButton.vue';
+import ThemeButton from './navigation/theme/ThemeButton.vue';
+import ToolsButton from './navigation/tools/ToolsButton.vue';
+import ChangeYearButton from './navigation/year/ChangeYearButton.vue';
 import Link from '@components/base/link/Link.vue';
 import ComponentTransition from '@components/misc/component-transition/ComponentTransition.vue';
 import { useMediaQuery } from '@composables';
 import { RiDonutChartLine, RiHandCoinLine, RiShoppingBagLine } from '@remixicon/vue';
 import { useStorage } from '@storage/index';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import AdminButton from './navigation/admin/AdminButton.vue';
-import CloudButton from './navigation/auth/CloudButton.vue';
-import InfoButton from './navigation/info/InfoButton.vue';
-import ThemeButton from './navigation/theme/ThemeButton.vue';
-import ToolsButton from './navigation/tools/ToolsButton.vue';
-import ChangeYearButton from './navigation/year/ChangeYearButton.vue';
-import SettingsButton from './navigation/settings/SettingsButton.vue';
 import type { Component } from 'vue';
 
 const menu = ref<HTMLDivElement>();