chore: fix vue prettier rules (max-attributes-per-line), reformat all codes

.prettierrc

@@ -12,6 +12,8 @@
   "insertPragma": false,
   "requirePragma": false,
   "proseWrap": "never",
+  "singleAttributePerLine": true,
   "htmlWhitespaceSensitivity": "strict",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "printWidth": 80
 }

docs/src/.vitepress/config.mts

@@ -5,7 +5,8 @@ import { withI18n } from 'vitepress-i18n'
 import type { VitePressSidebarOptions } from 'vitepress-sidebar/types'
 import type { VitePressI18nOptions } from 'vitepress-i18n/types'
 
-const capitalizeFirst = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1)
+const capitalizeFirst = (str: string): string =>
+  str.charAt(0).toUpperCase() + str.slice(1)
 const supportLocales = ['en', 'ko', 'zhHans']
 const defaultLocale: string = supportLocales[0]
 
@@ -96,5 +97,8 @@ const vitePressConfigs: UserConfig = {
 }
 
 export default defineConfig(
-  withSidebar(withI18n(vitePressConfigs, vitePressI18nConfigs), vitePressSidebarConfigs)
+  withSidebar(
+    withI18n(vitePressConfigs, vitePressI18nConfigs),
+    vitePressSidebarConfigs
+  )
 )

docs/src/en/installation-and-build/npm-scripts.md

@@ -33,7 +33,7 @@ order: 3
 Used only for contributing to project documentation. Must be run from the `docs` directory location.
 
 | Script Name | Description |
-| ----------- | ------------------------------------------------------------------ |
+| --- | --- |
 | `dev` | Start the local document server. (For development) |
 | `build` | Build a local document server. Used only for GitHub page builders. |
 | `serve` | Start the local document server. |

docs/src/ko/installation-and-build/npm-scripts.md

@@ -33,7 +33,7 @@ order: 3
 프로젝트 문서에 기여하는 경우에만 사용됩니다. `docs` 디렉토리 위치에서 실행해야 합니다.
 
 | Script Name | Description |
-| ----------- | ------------------------------------------------------------------ |
+| --- | --- |
 | `dev` | Start the local document server. (For development) |
 | `build` | Build a local document server. Used only for GitHub page builders. |
 | `serve` | Start the local document server. |

docs/src/zhHans/installation-and-build/npm-scripts.md

@@ -10,7 +10,7 @@ order: 3
 ## 一般情况
 
 | 脚本名称 | 说明 |
-| ----------------- | ---------------------------------------------------------- |
+| --- | --- |
 | `dev` | 启动电子作为开发环境 |
 | `dev:debug` | 将 Electron 作为开发环境启动（使用 vite debug） |
 | `dev:debug:force` | 以Electron作为开发环境启动（使用vite调试+清理vite缓存） |

eslint.config.ts

@@ -60,6 +60,17 @@ export default pluginTypeScriptESLint.config(
       'vue/v-on-event-hyphenation': 'off',
       'vue/no-v-text-v-html-on-component': 'off',
       'vue/attribute-hyphenation': 'off',
+      'vue/max-attributes-per-line': [
+        'error',
+        {
+          singleline: {
+            max: 1
+          },
+          multiline: {
+            max: 1
+          }
+        }
+      ],
       '@typescript-eslint/no-explicit-any': 'off'
     }
   }

src/main/IPCs.ts

@@ -12,12 +12,17 @@ export default class IPCs {
     })
 
     // Open url via web browser
-    ipcMain.on('msgOpenExternalLink', async (event: IpcMainEvent, url: string) => {
+    ipcMain.on(
+      'msgOpenExternalLink',
+      async (event: IpcMainEvent, url: string) => {
         await shell.openExternal(url)
-    })
+      }
+    )
 
     // Open file
-    ipcMain.handle('msgOpenFile', async (event: IpcMainEvent, filter: string) => {
+    ipcMain.handle(
+      'msgOpenFile',
+      async (event: IpcMainEvent, filter: string) => {
         const filters = []
         if (filter === 'text') {
           filters.push({ name: 'Text', extensions: ['txt', 'json'] })
@@ -29,6 +34,7 @@ export default class IPCs {
           filters
         })
         return dialogResult
-    })
+      }
+    )
   }
 }

src/main/index.ts

@@ -38,7 +38,11 @@ app.on('window-all-closed', () => {
 
 app.on(
   'render-process-gone',
-  (event: Event, webContents: WebContents, details: RenderProcessGoneDetails) => {
+  (
+    event: Event,
+    webContents: WebContents,
+    details: RenderProcessGoneDetails
+  ) => {
     errorWindow = createErrorWindow(errorWindow, mainWindow, details)
   }
 )

src/main/tray.ts

@@ -97,7 +97,9 @@ function calculateWindowPosition(b) {
   const screenBounds = screen.getPrimaryDisplay().size
   const trayBounds = tray.getBounds()
   const bottom = trayBounds.y > screenBounds.height / 2
-  const x = Math.floor(trayBounds.x - b.width / 2 - margin.x + trayBounds.width / 2)
+  const x = Math.floor(
+    trayBounds.x - b.width / 2 - margin.x + trayBounds.width / 2
+  )
   const y = bottom
     ? Math.floor(trayBounds.y - b.height - margin.y + trayBounds.height / 2)
     : Math.floor(trayBounds.y + margin.y + trayBounds.height / 2)

src/preload/index.ts

@@ -1,7 +1,11 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron'
 
 // Whitelist of valid channels used for IPC communication (Send message from Renderer to Main)
-const mainAvailChannels: string[] = ['msgRequestGetVersion', 'msgOpenExternalLink', 'msgOpenFile']
+const mainAvailChannels: string[] = [
+  'msgRequestGetVersion',
+  'msgOpenExternalLink',
+  'msgOpenFile'
+]
 const rendererAvailChannels: string[] = []
 
 contextBridge.exposeInMainWorld('mainApi', {
@@ -15,21 +19,30 @@ contextBridge.exposeInMainWorld('mainApi', {
       throw new Error(`Unknown ipc channel name: ${channel}`)
     }
   },
-  on: (channel: string, listener: (event: IpcRendererEvent, ...args: any[]) => void): void => {
+  on: (
+    channel: string,
+    listener: (event: IpcRendererEvent, ...args: any[]) => void
+  ): void => {
     if (rendererAvailChannels.includes(channel)) {
       ipcRenderer.on(channel, listener)
     } else {
       throw new Error(`Unknown ipc channel name: ${channel}`)
     }
   },
-  once: (channel: string, listener: (event: IpcRendererEvent, ...args: any[]) => void): void => {
+  once: (
+    channel: string,
+    listener: (event: IpcRendererEvent, ...args: any[]) => void
+  ): void => {
     if (rendererAvailChannels.includes(channel)) {
       ipcRenderer.once(channel, listener)
     } else {
       throw new Error(`Unknown ipc channel name: ${channel}`)
     }
   },
-  off: (channel: string, listener: (event: IpcRendererEvent, ...args: any[]) => void): void => {
+  off: (
+    channel: string,
+    listener: (event: IpcRendererEvent, ...args: any[]) => void
+  ): void => {
     if (rendererAvailChannels.includes(channel)) {
       ipcRenderer.off(channel, listener)
     } else {

src/renderer/components/layout/HeaderLayout.vue

@@ -18,7 +18,10 @@ const isCurrentRoute = (path: string): boolean => {
 }
 </script>
 <template>
-  <v-app-bar color="primary" density="compact">
+  <v-app-bar
+    color="primary"
+    density="compact"
+  >
     <v-app-bar-title>{{ t(titleKey) }}</v-app-bar-title>
     <template #append>
       <v-btn

src/renderer/index.html

@@ -6,5 +6,8 @@
   <body>
     <div id="app"></div>
   </body>
-  <script type="module" src="./main"></script>
+  <script
+    type="module"
+    src="./main"
+  ></script>
 </html>

src/renderer/plugins/vuetify.ts

@@ -1,5 +1,17 @@
 import { createVuetify } from 'vuetify'
-import { ko, en, zhHans, zhHant, de, es, ja, fr, ru, pt, nl } from 'vuetify/locale'
+import {
+  ko,
+  en,
+  zhHans,
+  zhHant,
+  de,
+  es,
+  ja,
+  fr,
+  ru,
+  pt,
+  nl
+} from 'vuetify/locale'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
 import 'vuetify/styles'
 

src/renderer/screens/MainScreen.vue

@@ -4,7 +4,13 @@ import { useTheme } from 'vuetify'
 import { openExternal, openFile } from '@/renderer/utils'
 import { useCounterStore } from '@/renderer/store/counter'
 import { onMounted, ref } from 'vue'
-import { mdiBrightness6, mdiFileDocument, mdiFolderOpen, mdiGithub, mdiPlusCircle } from '@mdi/js'
+import {
+  mdiBrightness6,
+  mdiFileDocument,
+  mdiFolderOpen,
+  mdiGithub,
+  mdiPlusCircle
+} from '@mdi/js'
 import { storeToRefs } from 'pinia'
 
 const { t, locale, availableLocales } = useI18n()
@@ -58,9 +64,15 @@ const handleOpenFile = async () => {
 
 <template>
   <v-container>
-    <v-row no-gutters class="text-center align-center">
+    <v-row
-      <v-col cols="12" md="5">
+      no-gutters
-        <img
+      class="text-center align-center"
+    >
+      <v-col
+        cols="12"
+        md="5"
+      >
+        <v-img
           data-testid="main-logo"
           alt="logo"
           draggable="false"
@@ -68,56 +80,103 @@ const handleOpenFile = async () => {
           src="/images/vutron-logo.webp"
         />
       </v-col>
-      <v-col cols="12" md="7">
+      <v-col
-        <h2 class="my-4">{{ t('desc.welcome-title') }}</h2>
+        cols="12"
+        md="7"
+      >
+        <h2 class="my-4">
+          {{ t('desc.welcome-title') }}
+        </h2>
         <p>{{ t('desc.welcome-desc') }}</p>
         <p class="my-4">
           App Version: <strong>{{ appVersion }}</strong>
         </p>
-        <p v-if="selectedFile">{{
+        <p v-if="selectedFile">
+          {{
             t('desc.selected-file', {
               filePath: selectedFile
             })
-        }}</p>
+          }}
+        </p>
         <v-row class="my-4">
           <v-col>
-            <v-btn icon color="primary" @click="handleChangeTheme">
+            <v-btn
+              icon
+              color="primary"
+              @click="handleChangeTheme"
+            >
               <v-icon :icon="mdiBrightness6" />
-              <v-tooltip activator="parent" location="bottom">
+              <v-tooltip
+                activator="parent"
+                location="bottom"
+              >
                 {{ t('menu.change-theme') }}
               </v-tooltip>
             </v-btn>
           </v-col>
           <v-col>
-            <v-badge data-testid="counter-badge" color="blue" :content="count">
+            <v-badge
-              <v-btn data-testid="btn-counter" icon color="primary" @click="handleCountIncrease">
+              data-testid="counter-badge"
+              color="blue"
+              :content="count"
+            >
+              <v-btn
+                data-testid="btn-counter"
+                icon
+                color="primary"
+                @click="handleCountIncrease"
+              >
                 <v-icon :icon="mdiPlusCircle" />
-                <v-tooltip activator="parent" location="bottom">
+                <v-tooltip
+                  activator="parent"
+                  location="bottom"
+                >
                   {{ t('menu.increase-count') }}
                 </v-tooltip>
               </v-btn>
             </v-badge>
           </v-col>
           <v-col>
-            <v-btn icon color="primary" @click="handleOpenDocument">
+            <v-btn
+              icon
+              color="primary"
+              @click="handleOpenDocument"
+            >
               <v-icon :icon="mdiFileDocument" />
-              <v-tooltip activator="parent" location="bottom">
+              <v-tooltip
+                activator="parent"
+                location="bottom"
+              >
                 {{ t('menu.documentation') }}
               </v-tooltip>
             </v-btn>
           </v-col>
           <v-col>
-            <v-btn icon color="primary" @click="handleOpenGitHub">
+            <v-btn
+              icon
+              color="primary"
+              @click="handleOpenGitHub"
+            >
               <v-icon :icon="mdiGithub" />
-              <v-tooltip activator="parent" location="bottom">
+              <v-tooltip
+                activator="parent"
+                location="bottom"
+              >
                 {{ t('menu.github') }}
               </v-tooltip>
             </v-btn>
           </v-col>
           <v-col>
-            <v-btn icon color="primary" @click="handleOpenFile">
+            <v-btn
+              icon
+              color="primary"
+              @click="handleOpenFile"
+            >
               <v-icon :icon="mdiFolderOpen" />
-              <v-tooltip activator="parent" location="bottom">
+              <v-tooltip
+                activator="parent"
+                location="bottom"
+              >
                 {{ t('menu.open-file') }}
               </v-tooltip>
             </v-btn>

src/renderer/screens/SecondScreen.vue

@@ -7,11 +7,23 @@ const { t } = useI18n()
 
 <template>
   <v-container>
-    <v-row no-gutters class="text-center">
+    <v-row
+      no-gutters
+      class="text-center"
+    >
       <v-col cols="12">
-        <v-icon :icon="mdiEmoticonCoolOutline" size="250" color="#009f57" />
+        <v-icon
+          :icon="mdiEmoticonCoolOutline"
+          size="250"
+          color="#009f57"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        class="my-4"
+      >
+        {{ t('desc.second-desc') }}
       </v-col>
-      <v-col cols="12" class="my-4">{{ t('desc.second-desc') }}</v-col>
     </v-row>
   </v-container>
 </template>

tests/fixtures.mts

@@ -39,7 +39,8 @@ export const beforeAll = async () => {
   page.on('console', console.log)
   page.on('pageerror', console.log)
 
-  const evaluateResult = await appElectron.evaluate(async ({ app, BrowserWindow }) => {
+  const evaluateResult = await appElectron.evaluate(
+    async ({ app, BrowserWindow }) => {
       const currentWindow = BrowserWindow.getFocusedWindow()
 
       // Fix window position for testing
@@ -50,7 +51,8 @@ export const beforeAll = async () => {
         packaged: app.isPackaged,
         dataPath: app.getPath('userData')
       }
-  })
+    }
+  )
 
   base.expect(evaluateResult.packaged, 'app is not packaged').toBe(false)
 }

vite.config.mts

@@ -29,7 +29,11 @@ export default defineConfig(({ mode }) => {
     {
       entry: 'src/main/index.ts',
       onstart({ startup }) {
-        const debugArgs = ['.', '--inspect=9228', '--remote-debugging-port=9229']
+        const debugArgs = [
+          '.',
+          '--inspect=9228',
+          '--remote-debugging-port=9229'
+        ]
         startup(debugArgs)
       },
       vite: {