style: sort imports (BewlyBewly#746)

eslint.config.mjs

@@ -1,28 +1,42 @@
 import antfu from '@antfu/eslint-config'
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
 
-export default antfu({
-  rules: {
-    'vue/max-attributes-per-line': [
-      'error',
-      {
-        singleline: {
-          max: 5,
+export default antfu(
+  {
+    rules: {
+      'vue/max-attributes-per-line': [
+        'error',
+        {
+          singleline: {
+            max: 5,
+          },
+          multiline: {
+            max: 5,
+          },
         },
-        multiline: {
-          max: 5,
-        },
-      },
-    ],
-    'no-alert': 'off',
-    'style/quote-props': 'off',
+      ],
+      'no-alert': 'off',
+      'style/quote-props': 'off',
+    },
+    eslint: {
+      ignorePatterns: [
+        'dist',
+        'node_modules',
+        'public',
+        'extension',
+        'extension-firefox',
+      ],
+    },
   },
-  eslint: {
-    ignorePatterns: [
-      'dist',
-      'node_modules',
-      'public',
-      'extension',
-      'extension-firefox',
-    ],
+  {
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'import/order': 'off',
+      'sort-imports': 'off',
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+    },
   },
-})
+)

package.json

@@ -63,6 +63,7 @@
     "cross-env": "^7.0.3",
     "crx": "^5.0.1",
     "eslint": "^9.2.0",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
     "esno": "^4.7.0",
     "fs-extra": "^11.2.0",
     "jsdom": "^24.0.0",

scripts/client.ts

@@ -1,6 +1,6 @@
 import type { ErrorPayload, HMRPayload, Update } from 'vite'
-import type { ViteHotContext } from 'vite/types/hot'
 import type { InferCustomEventPayload } from 'vite/types/customEvent'
+import type { ViteHotContext } from 'vite/types/hot'
 
 // Vite v3 doesn't export overlay
 // import { ErrorOverlay, overlayId } from 'vite/src/client/overlay'

scripts/manifest.ts

@@ -1,4 +1,5 @@
 import fs from 'fs-extra'
+
 import { getManifest } from '../src/manifest'
 import { isFirefox, log, r } from './utils'
 

scripts/prepare.ts

@@ -1,7 +1,9 @@
 // generate stub index.html files for dev entry
 import { execSync } from 'node:child_process'
-import fs from 'fs-extra'
+
 import chokidar from 'chokidar'
+import fs from 'fs-extra'
+
 import { isDev, isFirefox, log, r } from './utils'
 
 /**

scripts/utils.ts

@@ -1,6 +1,7 @@
 import { dirname, resolve } from 'node:path'
 import process from 'node:process'
 import { fileURLToPath } from 'node:url'
+
 import { bgCyan, black } from 'kolorist'
 
 export const port = Number.parseInt(process.env.PORT || '') || 3303

src/background/index.ts

@@ -1,4 +1,5 @@
 import browser from 'webextension-polyfill'
+
 import { setupAllMsgLstnrs } from './messageListeners'
 
 browser.runtime.onInstalled.addListener((): void => {

src/background/messageListeners/index.ts

@@ -1,10 +1,10 @@
 import browser from 'webextension-polyfill'
-import { apiListenerFactory } from '../utils'
 
-import API_AUTH from './auth'
+import { apiListenerFactory } from '../utils'
 import API_ANIME from './anime'
-import API_HISTORY from './history'
+import API_AUTH from './auth'
 import API_FAVORITE from './favorite'
+import API_HISTORY from './history'
 import API_MOMENT from './moment'
 import API_NOTIFICATION from './notification'
 import API_RANKING from './ranking'

src/background/utils.ts

@@ -119,14 +119,14 @@ function apiListenerFactory(API_MAP: APIMAP) {
 }
 
 export {
-  type FetchAfterHandler,
-  toJsonHandler,
-  toData,
-  sendResponseHandler,
-  AHS,
-  type Message,
   type _FETCH,
+  AHS,
   type API,
-  type APIMAP,
   apiListenerFactory,
+  type APIMAP,
+  type FetchAfterHandler,
+  type Message,
+  sendResponseHandler,
+  toData,
+  toJsonHandler,
 }

src/components/Dialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
+
 import Button from '~/components/Button.vue'
 import { useBewlyApp } from '~/composables/useAppProvider'
 

src/components/Dock/Dock.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import Tooltip from '../Tooltip.vue'
-import type { HoveringDockItem } from './types'
+import { useDark } from '~/composables/useDark'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 import type { DockItem } from '~/stores/mainStore'
 import { useMainStore } from '~/stores/mainStore'
-import { useDark } from '~/composables/useDark'
+
+import Tooltip from '../Tooltip.vue'
+import type { HoveringDockItem } from './types'
 
 defineProps<{ activatedPage: AppPage }>()
 

src/components/HorizontalScrollView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
+
 import { settings } from '~/logic'
 
 const scrollListWrap = ref<HTMLElement>() as Ref<HTMLElement>

src/components/LongCoverCard/LongCoverCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { removeHttpFromUrl } from '~/utils/main'
 import { numFormatter } from '~/utils/dataFormatter'
+import { removeHttpFromUrl } from '~/utils/main'
 
 defineProps<{
   url: string

src/components/RightSideButtons/RightSideButtons.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import Button from '~/components/Button.vue'
+import { useDark } from '~/composables/useDark'
+
 import Tooltip from '../Tooltip.vue'
 import type { HoveringDockItem } from './types'
-import { useDark } from '~/composables/useDark'
-import Button from '~/components/Button.vue'
 
 const emit = defineEmits(['settings-visibility-change'])
 const { isDark, toggleDark } = useDark()

src/components/SearchBar/SearchBar.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { onKeyStroke } from '@vueuse/core'
+
+import { useApiClient } from '~/composables/api'
+import { useBewlyImage } from '~/composables/useImage'
+import { findLeafActiveElement } from '~/utils/element'
+
 import type { HistoryItem, SuggestionItem, SuggestionResponse } from './searchHistoryProvider'
 import {
   addSearchHistory,
   clearAllSearchHistory,
   getSearchHistory,
   removeSearchHistory,
 } from './searchHistoryProvider'
-import { useApiClient } from '~/composables/api'
-import { findLeafActiveElement } from '~/utils/element'
-import { useBewlyImage } from '~/composables/useImage'
 
 defineProps<{
   darkenOnFocus?: boolean

src/components/Settings/Settings.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import OverlayScrollbarsComponent from '../OverlayScrollbarsComponent'
 
+import { settings } from '~/logic'
+
+import OverlayScrollbarsComponent from '../OverlayScrollbarsComponent'
 import type { MenuItem } from './types'
 import { MenuType } from './types'
-import { settings } from '~/logic'
 
 const emit = defineEmits(['close'])
 

src/components/Settings/components/About.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import browser from 'webextension-polyfill'
-import { version } from '../../../../package.json'
+
 import Button from '~/components/Button.vue'
 import Dialog from '~/components/Dialog.vue'
-import { settings } from '~/logic'
 import Tooltip from '~/components/Tooltip.vue'
+import { settings } from '~/logic'
+
+import { version } from '../../../../package.json'
 
 const importSettingsRef = ref<HTMLElement>()
 const dialogVisible = reactive({

src/components/Settings/components/Appearance.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import SettingsItem from './SettingsItem.vue'
-import SettingsItemGroup from './SettingsItemGroup.vue'
-import { settings } from '~/logic'
+
 import Input from '~/components/Input.vue'
 import Radio from '~/components/Radio.vue'
 import Select from '~/components/Select.vue'
 import Slider from '~/components/Slider.vue'
 import Tooltip from '~/components/Tooltip.vue'
 import { useBewlyImage } from '~/composables/useImage'
+import { settings } from '~/logic'
+
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 
 const { wallpapers, getBewlyImage } = useBewlyImage()
 

src/components/Settings/components/Compatibility.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import SettingsItem from './SettingsItem.vue'
-import SettingsItemGroup from './SettingsItemGroup.vue'
+import Radio from '~/components/Radio.vue'
 import { settings } from '~/logic'
 import { isHomePage } from '~/utils/main'
-import Radio from '~/components/Radio.vue'
+
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 
 watch(() => settings.value.useOriginalBilibiliHomepage, () => {
   if (isHomePage())

src/components/Settings/components/General.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import draggable from 'vuedraggable'
-import SettingsItem from './SettingsItem.vue'
-import SettingsItemGroup from './SettingsItemGroup.vue'
+
 import Button from '~/components/Button.vue'
 import Radio from '~/components/Radio.vue'
 import Select from '~/components/Select.vue'
 import { settings } from '~/logic'
 import { useMainStore } from '~/stores/mainStore'
 
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
+
 const mainStore = useMainStore()
 const { t, locale } = useI18n()
 

src/components/Settings/components/Home.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-import type { Ref } from 'vue'
 import QRCodeVue from 'qrcode.vue'
+import type { Ref } from 'vue'
 import { useToast } from 'vue-toastification'
 import draggable from 'vuedraggable'
-import SearchPage from './SearchPage.vue'
+
+import Button from '~/components/Button.vue'
+import Radio from '~/components/Radio.vue'
+import { accessKey, settings } from '~/logic'
+import { useMainStore } from '~/stores/mainStore'
+import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
+
 import ChildSettingsDialog from './ChildSettingsDialog.vue'
+import SearchPage from './SearchPage.vue'
 import SettingsItem from './SettingsItem.vue'
 import SettingsItemGroup from './SettingsItemGroup.vue'
-import { getTVLoginQRCode, pollTVLoginQRCode, revokeAccessKey } from '~/utils/authProvider'
-import { accessKey, settings } from '~/logic'
-import { useMainStore } from '~/stores/mainStore'
-import Button from '~/components/Button.vue'
-import Radio from '~/components/Radio.vue'
 
 const mainStore = useMainStore()
 const toast = useToast()

src/components/Settings/components/SearchPage.vue

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
-import SettingsItem from './SettingsItem.vue'
-import SettingsItemGroup from './SettingsItemGroup.vue'
-import { settings } from '~/logic'
 import Input from '~/components/Input.vue'
 import Radio from '~/components/Radio.vue'
 import Slider from '~/components/Slider.vue'
 import Tooltip from '~/components/Tooltip.vue'
 import { useBewlyImage } from '~/composables/useImage'
+import { settings } from '~/logic'
+
+import SettingsItem from './SettingsItem.vue'
+import SettingsItemGroup from './SettingsItemGroup.vue'
 
 const { searchBarCharacters, wallpapers, getBewlyImage } = useBewlyImage()