chore: add prettier-plugin-organize-imports plugin to organize imports (#6836)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.20.x

#### What this PR does / why we need it:

使用 https://github.com/simonhaenisch/prettier-plugin-organize-imports 优化 UI 项目的模块导入，之前我们是通过[配置 VSCode](9468e8741f/ui/.vscode/settings.json (L34-L36)) 来实现导入优化，但这种方式局限于 VSCode 编辑器，在其他编辑器无法得到统一的支持。

并且我们为 UI 添加了 git pre commit hook，在提交代码前会对已修改的文件执行 prettier，这样能够更好的保证一致性。

<img width="1475" alt="image" src="https://github.com/user-attachments/assets/755e2aba-be07-4fba-8007-6210ef44a8ef">

#### Does this PR introduce a user-facing change?

```release-note
None
```

ui/.vscode/settings.json

@@ -30,9 +30,5 @@
   },
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": "explicit",
-    "source.fixAll": "never"
   }
 }

ui/console-src/modules/contents/attachments/AttachmentList.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import UserFilterDropdown from "@/components/filter/UserFilterDropdown.vue";
 import LazyImage from "@/components/image/LazyImage.vue";
+import LazyVideo from "@/components/video/LazyVideo.vue";
 import { isImage } from "@/utils/image";
 import type { Attachment, Group } from "@halo-dev/api-client";
 import { coreApiClient } from "@halo-dev/api-client";
@@ -31,16 +32,15 @@ import type { Ref } from "vue";
 import { computed, onMounted, provide, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import AttachmentDetailModal from "./components/AttachmentDetailModal.vue";
+import AttachmentError from "./components/AttachmentError.vue";
 import AttachmentGroupList from "./components/AttachmentGroupList.vue";
 import AttachmentListItem from "./components/AttachmentListItem.vue";
+import AttachmentLoading from "./components/AttachmentLoading.vue";
 import AttachmentPoliciesModal from "./components/AttachmentPoliciesModal.vue";
 import AttachmentUploadModal from "./components/AttachmentUploadModal.vue";
-import AttachmentLoading from "./components/AttachmentLoading.vue";
-import AttachmentError from "./components/AttachmentError.vue";
 import { useAttachmentControl } from "./composables/use-attachment";
 import { useFetchAttachmentGroup } from "./composables/use-attachment-group";
 import { useFetchAttachmentPolicy } from "./composables/use-attachment-policy";
-import LazyVideo from "@/components/video/LazyVideo.vue";
 
 const { t } = useI18n();
 

ui/console-src/modules/contents/comments/components/CommentListItem.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue";
 import { usePluginModuleStore } from "@/stores/plugin";
 import { formatDatetime } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
+import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
 import type {
   Extension,
   ListedComment,
@@ -34,18 +36,16 @@ import type {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import {
   computed,
+  markRaw,
   onMounted,
   provide,
   ref,
   type Ref,
   toRefs,
-  markRaw,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import ReplyCreationModal from "./ReplyCreationModal.vue";
 import ReplyListItem from "./ReplyListItem.vue";
-import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
-import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();

ui/console-src/modules/contents/comments/components/ReplyListItem.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
+import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue";
 import { formatDatetime } from "@/utils/date";
+import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
 import type { ListedComment, ListedReply } from "@halo-dev/api-client";
 import { coreApiClient } from "@halo-dev/api-client";
 import {
@@ -15,11 +17,9 @@ import {
 } from "@halo-dev/components";
 import type { OperationItem } from "@halo-dev/console-shared";
 import { useQueryClient } from "@tanstack/vue-query";
-import { computed, inject, ref, type Ref, toRefs, markRaw } from "vue";
+import { computed, inject, markRaw, ref, type Ref, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
 import ReplyCreationModal from "./ReplyCreationModal.vue";
-import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
-import EntityDropdownItems from "@/components/entity/EntityDropdownItems.vue";
 
 const { t } = useI18n();
 const queryClient = useQueryClient();

ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue

@@ -23,10 +23,10 @@ import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import { setFocus } from "@/formkit/utils/focus";
 import { FormType } from "@/types/slug";
 import useSlugify from "@console/composables/use-slugify";
+import { reset, submitForm } from "@formkit/core";
 import { cloneDeep } from "lodash-es";
 import { onMounted } from "vue";
 import { useI18n } from "vue-i18n";
-import { submitForm, reset } from "@formkit/core";
 
 const props = withDefaults(
   defineProps<{

ui/console-src/modules/system/plugins/components/entity-fields/ReloadField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { IconInformation, VButton } from "@halo-dev/components";
 import { PluginStatusPhaseEnum, type Plugin } from "@halo-dev/api-client";
+import { IconInformation, VButton } from "@halo-dev/components";
 import { computed } from "vue";
 
 const props = withDefaults(

ui/console-src/modules/system/users/components/UserCreationModal.vue

@@ -9,10 +9,10 @@ import SubmitButton from "@/components/button/SubmitButton.vue";
 import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 
 // hooks
+import { PASSWORD_REGEX } from "@/constants/regex";
 import { setFocus } from "@/formkit/utils/focus";
 import { useQueryClient } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
-import { PASSWORD_REGEX } from "@/constants/regex";
 
 const { t } = useI18n();
 const queryClient = useQueryClient();

ui/package.json

@@ -143,6 +143,7 @@
     "postcss": "^8.4.21",
     "postcss-viewport-height-correction": "^1.1.1",
     "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "randomstring": "^1.2.3",
     "rollup-plugin-gzip": "^3.1.0",

ui/pnpm-lock.yaml

@@ -312,6 +312,9 @@ importers:
       prettier:
         specifier: ^2.8.8
         version: 2.8.8
+      prettier-plugin-organize-imports:
+        specifier: ^4.1.0
+        version: 4.1.0(prettier@2.8.8)(typescript@5.6.2)(vue-tsc@2.1.6(typescript@5.6.2))
       prettier-plugin-tailwindcss:
         specifier: ^0.1.13
         version: 0.1.13(prettier@2.8.8)
@@ -8398,6 +8401,16 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
+  prettier-plugin-organize-imports@4.1.0:
+    resolution: {integrity: sha512-5aWRdCgv645xaa58X8lOxzZoiHAldAPChljr/MT0crXVOWTZ+Svl4hIWlz+niYSlO6ikE5UXkN1JrRvIP2ut0A==}
+    peerDependencies:
+      prettier: '>=2.0'
+      typescript: '>=2.9'
+      vue-tsc: ^2.1.0
+    peerDependenciesMeta:
+      vue-tsc:
+        optional: true
+
   prettier-plugin-tailwindcss@0.1.13:
     resolution: {integrity: sha512-/EKQURUrxLu66CMUg4+1LwGdxnz8of7IDvrSLqEtDqhLH61SAlNNUSr90UTvZaemujgl3OH/VHg+fyGltrNixw==}
     engines: {node: '>=12.17.0'}
@@ -19899,6 +19912,13 @@ snapshots:
     dependencies:
       fast-diff: 1.2.0
 
+  prettier-plugin-organize-imports@4.1.0(prettier@2.8.8)(typescript@5.6.2)(vue-tsc@2.1.6(typescript@5.6.2)):
+    dependencies:
+      prettier: 2.8.8
+      typescript: 5.6.2
+    optionalDependencies:
+      vue-tsc: 2.1.6(typescript@5.6.2)
+
   prettier-plugin-tailwindcss@0.1.13(prettier@2.8.8):
     dependencies:
       prettier: 2.8.8

ui/prettier.config.cjs

@@ -1,3 +1,6 @@
 module.exports = {
-  plugins: [require("prettier-plugin-tailwindcss")],
+  plugins: [
+    require("prettier-plugin-tailwindcss"),
+    require("prettier-plugin-organize-imports"),
+  ],
 };

ui/src/components/editor/DefaultEditor.vue

@@ -90,6 +90,7 @@ import MdiFormatHeader5 from "~icons/mdi/format-header-5";
 import MdiFormatHeader6 from "~icons/mdi/format-header-6";
 import RiLayoutRightLine from "~icons/ri/layout-right-line";
 import { useAttachmentSelect } from "./composables/use-attachment";
+import { useExtension } from "./composables/use-extension";
 import {
   UiExtensionAudio,
   UiExtensionImage,
@@ -97,7 +98,6 @@ import {
   UiExtensionVideo,
 } from "./extensions";
 import { getContents } from "./utils/attachment";
-import { useExtension } from "./composables/use-extension";
 
 const { t } = useI18n();
 const { currentUserHasPermission } = usePermission();

ui/src/formkit/inputs/select/MultipleSelect.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import MultipleSelectItem from "./MultipleSelectItem.vue";
-import MultipleOverflowItem from "./MultipleOverflowItem.vue";
-import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
-import { watch } from "vue";
 import type {
   NodeDragEventData,
   NodeTouchEventData,
 } from "@formkit/drag-and-drop";
+import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
+import { watch } from "vue";
+import MultipleOverflowItem from "./MultipleOverflowItem.vue";
+import MultipleSelectItem from "./MultipleSelectItem.vue";
 
 const props = defineProps<{
   selectedOptions: Array<{

ui/src/formkit/inputs/select/SelectDropdownContainer.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { i18n } from "@/locales";
-import SelectOption from "./SelectOption.vue";
 import { VEmpty, VLoading } from "@halo-dev/components";
 import { useTimeout } from "@vueuse/shared";
-import { i18n } from "@/locales";
+import { computed, watch } from "vue";
+import SelectOption from "./SelectOption.vue";
 
 const props = defineProps<{
   options?: Array<Record<string, unknown> & { label: string; value: string }>;

ui/uc-src/modules/profile/tabs/Devices.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { ucApiClient } from "@halo-dev/api-client";
 import { VLoading } from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 import DeviceListItem from "./components/DeviceListItem.vue";
-import { ucApiClient } from "@halo-dev/api-client";
 
 const { data, isLoading } = useQuery({
   queryKey: ["uc:devices"],