style: introduce prettier

ArtalkJS · Dec 19, 2023 · 3f73cd9 · 3f73cd9
1 parent 7a0a9db
commit 3f73cd9
Show file tree

Hide file tree

Showing 179 changed files with 3,444 additions and 1,914 deletions.
diff --git a/ui/.eslintignore b/ui/.eslintignore
diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     project: ['./packages/*/tsconfig.json'],
     tsconfigRootDir: __dirname,
   },
+  ignoreFiles: ['node_modules/', 'coverage/', 'dist/', '**/*.js'],
   extends: [
     'airbnb-base',
     'airbnb-typescript/base',
@@ -16,7 +17,7 @@ module.exports = {
     'plugin:import/typescript',
     'plugin:compat/recommended',
   ],
-  plugins: ['@typescript-eslint', 'import'],
+  plugins: ['prettier', '@typescript-eslint', 'import'],
   rules: {
     'no-alert': 'warn',
     'no-unused-vars': 0,

diff --git a/ui/.npmignore b/ui/.npmignore
diff --git a/ui/.prettierignore b/ui/.prettierignore
@@ -0,0 +1,11 @@
+# dist files
+dist/
+
+# node modules
+node_modules/
+
+# pnpm lock file
+pnpm-lock.yaml
+
+# Minified files
+artalk-sidebar/src/lib/md5.js
diff --git a/ui/.prettierrc b/ui/.prettierrc
diff --git a/ui/package.json b/ui/package.json
@@ -7,7 +7,8 @@
     "dev:sidebar": "pnpm -F @artalk/artalk-sidebar dev",
     "build": "pnpm -F artalk build",
     "build:sidebar": "pnpm -F @artalk/artalk-sidebar build",
-    "build:all": "pnpm build && pnpm build:sidebar"
+    "build:all": "pnpm build && pnpm build:sidebar",
+    "lint:prettier": "prettier --check --write ."
   },
   "devDependencies": {
     "@playwright/test": "^1.40.1",
@@ -36,5 +37,11 @@
   },
   "browserslist": [
     "supports es6 and supports es6-class and supports es6-generators and supports es6-module-dynamic-import and supports es6-module and supports es6-number and supports es6-string-includes"
-  ]
+  ],
+  "prettier": {
+    "semi": false,
+    "arrowParens": "always",
+    "singleQuote": true,
+    "htmlWhitespaceSensitivity": "ignore"
+  }
 }
diff --git a/ui/packages/artalk-sidebar/auto-imports.d.ts b/ui/packages/artalk-sidebar/auto-imports.d.ts
@@ -5,68 +5,76 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const defineLoader: typeof import('vue-router/auto')['defineLoader']
-  const definePage: typeof import('unplugin-vue-router/runtime')['_definePage']
-  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeRouteLeave: typeof import('vue-router/auto')['onBeforeRouteLeave']
-  const onBeforeRouteUpdate: typeof import('vue-router/auto')['onBeforeRouteUpdate']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const toValue: typeof import('vue')['toValue']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useI18n: typeof import('vue-i18n')['useI18n']
-  const useRoute: typeof import('vue-router/auto')['useRoute']
-  const useRouter: typeof import('vue-router/auto')['useRouter']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const EffectScope: (typeof import('vue'))['EffectScope']
+  const computed: (typeof import('vue'))['computed']
+  const createApp: (typeof import('vue'))['createApp']
+  const customRef: (typeof import('vue'))['customRef']
+  const defineAsyncComponent: (typeof import('vue'))['defineAsyncComponent']
+  const defineComponent: (typeof import('vue'))['defineComponent']
+  const defineLoader: (typeof import('vue-router/auto'))['defineLoader']
+  const definePage: (typeof import('unplugin-vue-router/runtime'))['_definePage']
+  const effectScope: (typeof import('vue'))['effectScope']
+  const getCurrentInstance: (typeof import('vue'))['getCurrentInstance']
+  const getCurrentScope: (typeof import('vue'))['getCurrentScope']
+  const h: (typeof import('vue'))['h']
+  const inject: (typeof import('vue'))['inject']
+  const isProxy: (typeof import('vue'))['isProxy']
+  const isReactive: (typeof import('vue'))['isReactive']
+  const isReadonly: (typeof import('vue'))['isReadonly']
+  const isRef: (typeof import('vue'))['isRef']
+  const markRaw: (typeof import('vue'))['markRaw']
+  const nextTick: (typeof import('vue'))['nextTick']
+  const onActivated: (typeof import('vue'))['onActivated']
+  const onBeforeMount: (typeof import('vue'))['onBeforeMount']
+  const onBeforeRouteLeave: (typeof import('vue-router/auto'))['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: (typeof import('vue-router/auto'))['onBeforeRouteUpdate']
+  const onBeforeUnmount: (typeof import('vue'))['onBeforeUnmount']
+  const onBeforeUpdate: (typeof import('vue'))['onBeforeUpdate']
+  const onDeactivated: (typeof import('vue'))['onDeactivated']
+  const onErrorCaptured: (typeof import('vue'))['onErrorCaptured']
+  const onMounted: (typeof import('vue'))['onMounted']
+  const onRenderTracked: (typeof import('vue'))['onRenderTracked']
+  const onRenderTriggered: (typeof import('vue'))['onRenderTriggered']
+  const onScopeDispose: (typeof import('vue'))['onScopeDispose']
+  const onServerPrefetch: (typeof import('vue'))['onServerPrefetch']
+  const onUnmounted: (typeof import('vue'))['onUnmounted']
+  const onUpdated: (typeof import('vue'))['onUpdated']
+  const provide: (typeof import('vue'))['provide']
+  const reactive: (typeof import('vue'))['reactive']
+  const readonly: (typeof import('vue'))['readonly']
+  const ref: (typeof import('vue'))['ref']
+  const resolveComponent: (typeof import('vue'))['resolveComponent']
+  const shallowReactive: (typeof import('vue'))['shallowReactive']
+  const shallowReadonly: (typeof import('vue'))['shallowReadonly']
+  const shallowRef: (typeof import('vue'))['shallowRef']
+  const toRaw: (typeof import('vue'))['toRaw']
+  const toRef: (typeof import('vue'))['toRef']
+  const toRefs: (typeof import('vue'))['toRefs']
+  const toValue: (typeof import('vue'))['toValue']
+  const triggerRef: (typeof import('vue'))['triggerRef']
+  const unref: (typeof import('vue'))['unref']
+  const useAttrs: (typeof import('vue'))['useAttrs']
+  const useCssModule: (typeof import('vue'))['useCssModule']
+  const useCssVars: (typeof import('vue'))['useCssVars']
+  const useI18n: (typeof import('vue-i18n'))['useI18n']
+  const useRoute: (typeof import('vue-router/auto'))['useRoute']
+  const useRouter: (typeof import('vue-router/auto'))['useRouter']
+  const useSlots: (typeof import('vue'))['useSlots']
+  const watch: (typeof import('vue'))['watch']
+  const watchEffect: (typeof import('vue'))['watchEffect']
+  const watchPostEffect: (typeof import('vue'))['watchPostEffect']
+  const watchSyncEffect: (typeof import('vue'))['watchSyncEffect']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type {
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+  } from 'vue'
 }
diff --git a/ui/packages/artalk-sidebar/components.d.ts b/ui/packages/artalk-sidebar/components.d.ts
@@ -7,22 +7,22 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    FileUploader: typeof import('./src/components/FileUploader.vue')['default']
-    Header: typeof import('./src/components/Header.vue')['default']
-    ItemTextEditor: typeof import('./src/components/ItemTextEditor.vue')['default']
-    LoadingLayer: typeof import('./src/components/LoadingLayer.vue')['default']
-    LogTerminal: typeof import('./src/components/LogTerminal.vue')['default']
-    PageEditor: typeof import('./src/components/PageEditor.vue')['default']
-    Pagination: typeof import('./src/components/Pagination.vue')['default']
-    PreferenceArr: typeof import('./src/components/PreferenceArr.vue')['default']
-    PreferenceGrp: typeof import('./src/components/PreferenceGrp.vue')['default']
-    PreferenceItem: typeof import('./src/components/PreferenceItem.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SiteCreate: typeof import('./src/components/SiteCreate.vue')['default']
-    SiteEditor: typeof import('./src/components/SiteEditor.vue')['default']
-    SiteSwitcher: typeof import('./src/components/SiteSwitcher.vue')['default']
-    Tab: typeof import('./src/components/Tab.vue')['default']
-    UserEditor: typeof import('./src/components/UserEditor.vue')['default']
+    FileUploader: (typeof import('./src/components/FileUploader.vue'))['default']
+    Header: (typeof import('./src/components/Header.vue'))['default']
+    ItemTextEditor: (typeof import('./src/components/ItemTextEditor.vue'))['default']
+    LoadingLayer: (typeof import('./src/components/LoadingLayer.vue'))['default']
+    LogTerminal: (typeof import('./src/components/LogTerminal.vue'))['default']
+    PageEditor: (typeof import('./src/components/PageEditor.vue'))['default']
+    Pagination: (typeof import('./src/components/Pagination.vue'))['default']
+    PreferenceArr: (typeof import('./src/components/PreferenceArr.vue'))['default']
+    PreferenceGrp: (typeof import('./src/components/PreferenceGrp.vue'))['default']
+    PreferenceItem: (typeof import('./src/components/PreferenceItem.vue'))['default']
+    RouterLink: (typeof import('vue-router'))['RouterLink']
+    RouterView: (typeof import('vue-router'))['RouterView']
+    SiteCreate: (typeof import('./src/components/SiteCreate.vue'))['default']
+    SiteEditor: (typeof import('./src/components/SiteEditor.vue'))['default']
+    SiteSwitcher: (typeof import('./src/components/SiteSwitcher.vue'))['default']
+    Tab: (typeof import('./src/components/Tab.vue'))['default']
+    UserEditor: (typeof import('./src/components/UserEditor.vue'))['default']
   }
 }
diff --git a/ui/packages/artalk-sidebar/index.html b/ui/packages/artalk-sidebar/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8" />

diff --git a/ui/packages/artalk-sidebar/scripts/fetch-conf-tpl.js b/ui/packages/artalk-sidebar/scripts/fetch-conf-tpl.js
@@ -6,10 +6,19 @@ import { fileURLToPath } from 'url'
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
-fs.copyFile(path.join(__dirname, '../../../../artalk.example.yml'), path.join(__dirname, '../src/assets/artalk.example.yml'), (err) => {
-  if (!err) console.log("\nArtalk config file 'artalk.example.yml' loaded.\n")
-  else console.error("Failed to load config file 'artalk.example.yml':\n\n", err, "\n");
-})
+fs.copyFile(
+  path.join(__dirname, '../../../../artalk.example.yml'),
+  path.join(__dirname, '../src/assets/artalk.example.yml'),
+  (err) => {
+    if (!err) console.log("\nArtalk config file 'artalk.example.yml' loaded.\n")
+    else
+      console.error(
+        "Failed to load config file 'artalk.example.yml':\n\n",
+        err,
+        '\n',
+      )
+  },
+)
 
 // const file = fs.createWriteStream()
 

diff --git a/ui/packages/artalk-sidebar/src/App.vue b/ui/packages/artalk-sidebar/src/App.vue
@@ -14,11 +14,15 @@ const i18n = useI18n()
 onBeforeMount(() => {
   // 获取语言
   if (!global.getBootParams().locale) {
-    global.getArtalk().ctx.getApi().system.conf().then(resp => {
-      if (resp.frontend_conf?.locale == 'string') {
-        i18n.locale.value = resp.frontend_conf.locale
-      }
-    })
+    global
+      .getArtalk()
+      .ctx.getApi()
+      .system.conf()
+      .then((resp) => {
+        if (resp.frontend_conf?.locale == 'string') {
+          i18n.locale.value = resp.frontend_conf.locale
+        }
+      })
   }
 
   if (bootParams.user?.email) {
@@ -34,13 +38,17 @@ onBeforeMount(() => {
   }
 
   // 验证登陆身份有效性
-  global.getArtalk().ctx.getApi().user.loginStatus().then(resp => {
-    if (resp.is_admin && !resp.is_login) {
-      global.getArtalk().ctx.get('user').logout()
-      user.logout()
-      router.replace('/login')
-    }
-  })
+  global
+    .getArtalk()
+    .ctx.getApi()
+    .user.loginStatus()
+    .then((resp) => {
+      if (resp.is_admin && !resp.is_login) {
+        global.getArtalk().ctx.get('user').logout()
+        user.logout()
+        router.replace('/login')
+      }
+    })
 })
 
 const darkMode = ref(bootParams.darkMode)
@@ -55,7 +63,10 @@ const darkMode = ref(bootParams.darkMode)
 </script>
 
 <template>
-  <div class="app-wrap artalk atk-sidebar" :class="{ 'atk-dark-mode': darkMode }">
+  <div
+    class="app-wrap artalk atk-sidebar"
+    :class="{ 'atk-dark-mode': darkMode }"
+  >
     <Header />
     <Tab />