diff --git a/spx-gui/src/App.vue b/spx-gui/src/App.vue
index 4becdb332..34394b85d 100644
--- a/spx-gui/src/App.vue
+++ b/spx-gui/src/App.vue
@@ -27,7 +27,14 @@
 </template>
 
 <script setup lang="ts">
-import { NConfigProvider, NMessageProvider, NModalProvider, NLayout, NLayoutHeader, NLayoutContent } from 'naive-ui'
+import {
+  NConfigProvider,
+  NMessageProvider,
+  NModalProvider,
+  NLayout,
+  NLayoutHeader,
+  NLayoutContent
+} from 'naive-ui'
 import TopMenu from '@/components/top-menu/TopMenu.vue'
 import '@/assets/theme'
 /**
diff --git a/spx-gui/src/components/project/ProjectCreate.vue b/spx-gui/src/components/project/ProjectCreate.vue
index b2c498e07..a7cc02174 100644
--- a/spx-gui/src/components/project/ProjectCreate.vue
+++ b/spx-gui/src/components/project/ProjectCreate.vue
@@ -24,7 +24,7 @@ import { useUserStore } from '@/stores/user'
 import { ApiException, ApiExceptionCode } from '@/apis/common/exception'
 
 const emit = defineEmits<{
-  created: [ProjectData],
+  created: [ProjectData]
   cancelled: []
 }>()
 
@@ -45,7 +45,7 @@ function handleCancel() {
 const addProject = useMessageHandle(
   rawAddProject,
   { en: 'Failed to create project', zh: '创建失败' },
-  project => ({ en: `Project ${project.name} created`, zh: `项目 ${project.name} 创建成功` })
+  (project) => ({ en: `Project ${project.name} created`, zh: `项目 ${project.name} 创建成功` })
 )
 
 async function handleSubmit() {
@@ -65,29 +65,30 @@ async function validateName(name: string): Promise<ValidationResult> {
 
   if (name === '') return { en: 'The project name must not be blank', zh: '项目名不可为空' }
 
-  if (!/^[\w-]+$/.test(name)) return {
-    en: 'The project name can only contain ASCII letters, digits, and the characters - and _',
-    zh: '项目名仅可包含字母、数字、符号 - 及 _'
-  }
+  if (!/^[\w-]+$/.test(name))
+    return {
+      en: 'The project name can only contain ASCII letters, digits, and the characters - and _',
+      zh: '项目名仅可包含字母、数字、符号 - 及 _'
+    }
 
-  if (name.length > 100) return {
-    en: 'The project name is too long (maximum is 100 characters)',
-    zh: '项目名长度超出限制（最多 100 个字符）'
-  }
+  if (name.length > 100)
+    return {
+      en: 'The project name is too long (maximum is 100 characters)',
+      zh: '项目名长度超出限制（最多 100 个字符）'
+    }
 
   // check naming conflict
   const username = userStore.userInfo!.name // TODO: remove `!` here
-  const existedProject = await getProject(username, name).catch(e => {
+  const existedProject = await getProject(username, name).catch((e) => {
     if (e instanceof ApiException && e.code === ApiExceptionCode.errorNotFound) return null
     throw e
   })
-  if (existedProject != null) return {
-    en: `Project ${name} already exists`,
-    zh: `项目 ${name} 已存在`
-  }
+  if (existedProject != null)
+    return {
+      en: `Project ${name} already exists`,
+      zh: `项目 ${name} 已存在`
+    }
 }
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>
diff --git a/spx-gui/src/components/project/index.ts b/spx-gui/src/components/project/index.ts
index 40013a446..6b736116c 100644
--- a/spx-gui/src/components/project/index.ts
+++ b/spx-gui/src/components/project/index.ts
@@ -13,16 +13,17 @@ export function useCreateProject() {
     return new Promise<ProjectData>((resolve, reject) => {
       const modal = modalCtrl.create({
         title: t({ en: 'Create a new project', zh: '创建新的项目' }),
-        content: () => h(ProjectCreate, {
-          onCreated(projectData) {
-            modal.destroy()
-            resolve(projectData)
-          },
-          onCancelled() {
-            modal.destroy()
-            reject(new Cancelled())
-          }
-        }),
+        content: () =>
+          h(ProjectCreate, {
+            onCreated(projectData) {
+              modal.destroy()
+              resolve(projectData)
+            },
+            onCancelled() {
+              modal.destroy()
+              reject(new Cancelled())
+            }
+          }),
         preset: 'dialog'
       })
     })
diff --git a/spx-gui/src/utils/exception.ts b/spx-gui/src/utils/exception.ts
index 16808b9ea..9110bbd86 100644
--- a/spx-gui/src/utils/exception.ts
+++ b/spx-gui/src/utils/exception.ts
@@ -54,11 +54,13 @@ export function useMessageHandle<Args extends any[], Ret>(
   const m = useMessage()
   const { t } = useI18n()
 
-  return ((...args: Args) => {
+  return (...args: Args) => {
     return action(...args).then(
       (ret) => {
         if (successMessage != null) {
-          const successText = t(typeof successMessage === 'function' ? successMessage(ret) : successMessage)
+          const successText = t(
+            typeof successMessage === 'function' ? successMessage(ret) : successMessage
+          )
           m.success(() => successText)
         }
         return ret
@@ -75,7 +77,7 @@ export function useMessageHandle<Args extends any[], Ret>(
         throw e
       }
     )
-  })
+  }
 }
 
 // TODO: helpers for in-place feedback
diff --git a/spx-gui/src/utils/form.ts b/spx-gui/src/utils/form.ts
index a5de55703..bb34a5a6f 100644
--- a/spx-gui/src/utils/form.ts
+++ b/spx-gui/src/utils/form.ts
@@ -23,7 +23,7 @@ export function useForm(rulesInput: FormRulesInput) {
   const formRef = ref<FormInst | null>(null)
 
   const rules: FormRules = {}
-  Object.keys(rulesInput).forEach(path => {
+  Object.keys(rulesInput).forEach((path) => {
     const validator = rulesInput[path]
     rules[path] = {
       async validator(_: unknown, v: unknown) {
@@ -40,7 +40,7 @@ export function useForm(rulesInput: FormRulesInput) {
     if (formRef.value == null) throw new Error('invalid calling of validate without formRef value')
     const errs: FormValidationError[] = await formRef.value.validate().then(
       () => [],
-      e => {
+      (e) => {
         if (Array.isArray(e)) return e
         throw e
       }