pack: add prettier and reformat all codes

.eslintrc.json

@@ -13,16 +13,11 @@
     "node": true,
     "es6": true
   },
-  "extends": [
+  "extends": ["standard", "plugin:vue/vue3-recommended", "prettier"],
-    "standard",
-    "plugin:vue/vue3-recommended"
-  ],
   "globals": {
     "__static": true
   },
-  "plugins": [
+  "plugins": ["vue"],
-    "vue"
-  ],
   "rules": {
     "arrow-parens": 0,
     "generator-star-spacing": 0,

.prettierignore

@@ -0,0 +1,4 @@
+dist/
+.idea/
+
+package-lock.json

README.md

@@ -4,13 +4,7 @@
 
 Quick Start Templates for **[Vite](https://vitejs.dev)** + **[Vue 3](https://vuejs.org)** + **[Electron](https://www.electronjs.org)**
 
-[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/vutron/blob/master/LICENSE)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/vutron/blob/master/LICENSE) ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/vutron) ![github repo size](https://img.shields.io/github/repo-size/jooy2/vutron) ![Stars](https://img.shields.io/github/stars/jooy2/vutron?style=social) ![Commit Count](https://img.shields.io/github/commit-activity/y/jooy2/vutron) ![Line Count](https://img.shields.io/tokei/lines/github/jooy2/vutron) [![Followers](https://img.shields.io/github/followers/jooy2?style=social)](https://github.com/jooy2)
-![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/vutron)
-![github repo size](https://img.shields.io/github/repo-size/jooy2/vutron)
-![Stars](https://img.shields.io/github/stars/jooy2/vutron?style=social)
-![Commit Count](https://img.shields.io/github/commit-activity/y/jooy2/vutron)
-![Line Count](https://img.shields.io/tokei/lines/github/jooy2/vutron)
-[![Followers](https://img.shields.io/github/followers/jooy2?style=social)](https://github.com/jooy2)
 
 **Vutron** is a preconfigured template for developing `Electron` cross-platform desktop apps. It uses `Vue 3` and allows you to build a fast development environment with little effort.
 

electron-builder.json5

@@ -1,121 +1,117 @@
 {
-  "productName": "Vutron",
+  productName: 'Vutron',
-  "appId": "com.vutron.vutron",
+  appId: 'com.vutron.vutron',
-  "asar": true,
+  asar: true,
-  "extends": null,
+  extends: null,
-  "compression": "maximum",
+  compression: 'maximum',
-  "copyright": "ⓒ 2022 ${author}",
+  copyright: 'ⓒ 2022 ${author}',
-  "artifactName": "${productName} ${version}_${arch}.${ext}",
+  artifactName: '${productName} ${version}_${arch}.${ext}',
-  "directories": {
+  directories: {
-    "buildResources": "buildRes",
+    buildResources: 'buildRes',
-    "output": "./dist/release/${version}"
+    output: './dist/release/${version}'
   },
   /* A list of files not to be included in the build. */
-  "files": [
+  files: [
     /*
       (Recommended) The files and folders listed below should not be included in the build.
     */
-    "dist/**/*",
+    'dist/**/*',
-    "!dist/release/**/*",
+    '!dist/release/**/*',
-    "!dist/main/index.ts",
+    '!dist/main/index.ts',
-    "!**/.*",
+    '!**/.*',
     /*
       (Optional) Please review the list below based on your project preferences, as you may need to include them as needed.
     */
-    "!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*",
+    '!**/node_modules/**/{CONTRIBUTORS,CNAME,AUTHOR,TODO,CONTRIBUTING,COPYING,INSTALL,NEWS,PORTING,Makefile,htdocs,CHANGELOG,ChangeLog,changelog,README,Readme,readme,test,sample,example,demo,composer.json,tsconfig.json,jsdoc.json,tslint.json,typings.json,gulpfile,bower.json,package-lock,Gruntfile,CMakeLists,karma.conf,yarn.lock}*',
-    "!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}",
+    '!**/node_modules/**/{man,benchmark,node_modules,spec,cmake,browser,vagrant,doxy*,bin,obj,obj.target,example,examples,test,tests,doc,docs,msvc,Xcode,CVS,RCS,SCCS}{,/**/*}',
-    "!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}",
+    '!**/node_modules/**/*.{conf,png,pc,coffee,txt,spec.js,ts,js.flow,html,def,jst,xml,ico,in,ac,sln,dsp,dsw,cmd,vcproj,vcxproj,vcxproj.filters,pdb,exp,obj,lib,map,md,sh,gypi,gyp,h,cpp,yml,log,tlog,Makefile,mk,c,cc,rc,xcodeproj,xcconfig,d.ts,yaml,hpp}',
-    "!**/node_modules/**/node-v*-x64{,/**/*}",
+    '!**/node_modules/**/node-v*-x64{,/**/*}',
-    "!**/node_modules/bluebird/js/browser{,/**/*}",
+    '!**/node_modules/bluebird/js/browser{,/**/*}',
-    "!**/node_modules/bluebird/js/browser{,/**/*}",
+    '!**/node_modules/bluebird/js/browser{,/**/*}',
-    "!**/node_modules/source-map/dist{,/**/*}",
+    '!**/node_modules/source-map/dist{,/**/*}',
-    "!**/node_modules/lodash/fp{,/**/*}",
+    '!**/node_modules/lodash/fp{,/**/*}',
-    "!**/node_modules/async/!(dist|package.json)",
+    '!**/node_modules/async/!(dist|package.json)',
-    "!**/node_modules/async/internal{,/**/*}",
+    '!**/node_modules/async/internal{,/**/*}',
-    "!**/node_modules/ajv/dist{,/**/*}",
+    '!**/node_modules/ajv/dist{,/**/*}',
-    "!**/node_modules/ajv/scripts{,/**/*}",
+    '!**/node_modules/ajv/scripts{,/**/*}',
-    "!**/node_modules/node-pre-gyp/!(lib|package.json)",
+    '!**/node_modules/node-pre-gyp/!(lib|package.json)',
-    "!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)",
+    '!**/node_modules/node-pre-gyp/lib/!(util|pre-binding.js|node-pre-gyp.js)',
-    "!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)",
+    '!**/node_modules/node-pre-gyp/lib/util/!(versioning.js|abi_crosswalk.json)',
-    "!**/node_modules/source-map-support/browser-source-map-support.js",
+    '!**/node_modules/source-map-support/browser-source-map-support.js',
-    "!**/node_modules/json-schema/!(package.json|lib)"
+    '!**/node_modules/json-schema/!(package.json|lib)'
   ],
-  "mac": {
+  mac: {
-    "bundleVersion": "1.0",
+    bundleVersion: '1.0',
-    "hardenedRuntime": true,
+    hardenedRuntime: true,
-    "gatekeeperAssess": false,
+    gatekeeperAssess: false,
-    "icon": "buildRes/icons/icon.icns",
+    icon: 'buildRes/icons/icon.icns',
-    "type": "distribution",
+    type: 'distribution',
-    "target": [
+    target: [
       {
-        "target": "dmg",
+        target: 'dmg',
-        "arch": [
+        arch: ['x64', 'arm64', 'universal']
-          "x64",
-          "arm64",
-          "universal"
-        ]
       }
     ]
   },
-  "dmg": {
+  dmg: {
-    "contents": [
+    contents: [
       {
-        "x": 410,
+        x: 410,
-        "y": 150,
+        y: 150,
-        "type": "link",
+        type: 'link',
-        "path": "/Applications"
+        path: '/Applications'
       },
       {
-        "x": 130,
+        x: 130,
-        "y": 150,
+        y: 150,
-        "type": "file"
+        type: 'file'
       }
     ],
-    "sign": false
+    sign: false
   },
-  "win": {
+  win: {
-    "icon": "buildRes/icons/icon.ico",
+    icon: 'buildRes/icons/icon.ico',
-    "target": [
+    target: [
       {
-        "target": "appx",
+        target: 'appx',
-        "arch": "x64"
+        arch: 'x64'
       },
       {
-        "target": "zip",
+        target: 'zip',
-        "arch": "x64"
+        arch: 'x64'
       },
       {
-        "target": "portable",
+        target: 'portable',
-        "arch": "x64"
+        arch: 'x64'
       },
       {
-        "target": "nsis",
+        target: 'nsis',
-        "arch": "x64"
+        arch: 'x64'
       }
     ]
   },
-  "portable": {
+  portable: {
-    "artifactName": "${productName} ${version}_${arch} Portable.${ext}"
+    artifactName: '${productName} ${version}_${arch} Portable.${ext}'
   },
-  "nsis": {
+  nsis: {
-    "oneClick": true
+    oneClick: true
   },
-  "linux": {
+  linux: {
-    "executableName": "vutron",
+    executableName: 'vutron',
-    "icon": "buildRes/icons",
+    icon: 'buildRes/icons',
-    "category": "Utility",
+    category: 'Utility',
-    "target": [
+    target: [
       {
-        "target": "snap",
+        target: 'snap',
-        "arch": "x64"
+        arch: 'x64'
       },
       {
-        "target": "deb",
+        target: 'deb',
-        "arch": "x64"
+        arch: 'x64'
       },
       {
-        "target": "rpm",
+        target: 'rpm',
-        "arch": "x64"
+        arch: 'x64'
       }
     ]
   }

package.json

@@ -5,14 +5,16 @@
   "main": "dist/main/index.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development vite",
-    "build": "vue-tsc --noEmit && npm run build:pre && electron-builder -wml",
+    "build": "npm run build:pre && electron-builder -wml",
-    "build:pre": "cross-env NODE_ENV=production vite build",
+    "build:pre": "npm run format:fix && vue-tsc --noEmit && cross-env NODE_ENV=production vite build",
     "build:dir": "npm run build:pre && electron-builder --dir",
     "build:mac": "npm run build:pre && CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --mac",
     "build:linux": "npm run build:pre && electron-builder --linux",
     "build:win": "npm run build:pre && electron-builder --windows",
-    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
+    "lint": "eslint --ext .js,.ts,.vue -f ./node_modules/eslint-friendly-formatter src",
-    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
+    "lint:fix": "eslint --ext .js,.ts,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
+    "format": "prettier .",
+    "format:fix": "prettier . --write",
     "postinstall": "npm run lint:fix && electron-builder install-app-deps"
   },
   "engines": {
@@ -29,6 +31,7 @@
     "vuetify": "^3.0.0-beta.13"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.40.1",
     "@typescript-eslint/parser": "^5.40.1",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
@@ -36,10 +39,12 @@
     "electron": "^21.0.0",
     "electron-builder": "^23.3.3",
     "eslint": "^8.24.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-vue": "^9.5.1",
+    "prettier": "^2.7.1",
     "typescript": "^4.8.4",
     "vite": "^3.1.4",
     "vite-plugin-electron": "^0.9.3",

prettier.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  vueIndentScriptAndStyle: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  trailingComma: 'none',
+  bracketSpacing: true,
+  bracketSameLine: false,
+  jsxBracketSameLine: false,
+  jsxSingleQuote: false,
+  arrowParens: 'always',
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'lf'
+}

src/main/MainRunner.ts

@@ -2,7 +2,7 @@ import { app, BrowserWindow, RenderProcessGoneDetails } from 'electron'
 import Constants from './utils/Constants'
 import * as electronRemote from '@electron/remote/main'
 
-const exitApp = (mainWindow: BrowserWindow) : void => {
+const exitApp = (mainWindow: BrowserWindow): void => {
   if (mainWindow && !mainWindow.isDestroyed()) {
     mainWindow.hide()
   }
@@ -10,7 +10,7 @@ const exitApp = (mainWindow: BrowserWindow) : void => {
   app.exit()
 }
 
-export const createMainWindow = async (mainWindow: BrowserWindow) : Promise<BrowserWindow> => {
+export const createMainWindow = async (mainWindow: BrowserWindow): Promise<BrowserWindow> => {
   mainWindow = new BrowserWindow({
     title: Constants.APP_NAME,
     show: false,
@@ -51,7 +51,11 @@ export const createMainWindow = async (mainWindow: BrowserWindow) : Promise<Brow
   return mainWindow
 }
 
-export const createErrorWindow = async (errorWindow: BrowserWindow, mainWindow: BrowserWindow, details?: RenderProcessGoneDetails) : Promise<BrowserWindow> => {
+export const createErrorWindow = async (
+  errorWindow: BrowserWindow,
+  mainWindow: BrowserWindow,
+  details?: RenderProcessGoneDetails
+): Promise<BrowserWindow> => {
   if (!Constants.IS_DEV_ENV) {
     mainWindow?.hide()
   }

src/main/index.ts

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

src/main/utils/Menus.ts

@@ -2,7 +2,7 @@ import { systemPreferences } from 'electron'
 import Constants from './Constants'
 
 export default class Menus {
-  static macOSDisableDefaultMenuItem () : void {
+  static macOSDisableDefaultMenuItem(): void {
     if (Constants.IS_MAC) {
       systemPreferences.setUserDefault('NSDisabledDictationMenuItem', 'boolean', true)
       systemPreferences.setUserDefault('NSDisabledCharacterPaletteMenuItem', 'boolean', true)

src/renderer/App.vue

@@ -9,15 +9,16 @@ import { DefaultLayout } from '@/renderer/components/layout'
 </template>
 
 <style>
-  html {
+html {
-    overflow-y: auto !important
+  overflow-y: auto !important;
-  }
+}
-  html, body {
+html,
+body {
   width: 100%;
-    height: 100%
+  height: 100%;
-  }
+}
-  /* Do not force capitalization of button text */
+/* Do not force capitalization of button text */
-  .v-btn {
+.v-btn {
-    text-transform: unset !important
+  text-transform: unset !important;
-  }
+}
 </style>

src/renderer/components/layout/HeaderLayout.vue

@@ -1,8 +1,5 @@
 <template>
-  <v-app-bar
+  <v-app-bar color="primary" density="compact">
-    color="primary"
-    density="compact"
-  >
     <v-app-bar-title>{{ $route.meta.title }}</v-app-bar-title>
   </v-app-bar>
 </template>

src/renderer/components/layout/index.ts

@@ -1,7 +1,4 @@
 import DefaultLayout from '@/renderer/components/layout/DefaultLayout.vue'
 import HeaderLayout from '@/renderer/components/layout/HeaderLayout.vue'
 
-export {
+export { DefaultLayout, HeaderLayout }
-  DefaultLayout,
-  HeaderLayout
-}

src/renderer/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-        <meta charset="utf-8">
+    <meta charset="utf-8" />
   </head>
   <body>
     <div id="app"></div>

src/renderer/main.ts

@@ -10,10 +10,6 @@ import 'vuetify/dist/vuetify.min.css'
 
 const app = createApp(App)
 
-app
+app.use(vuetify).use(i18n).use(router).use(createPinia())
-  .use(vuetify)
-  .use(i18n)
-  .use(router)
-  .use(createPinia())
 
 app.mount('#app')

src/renderer/screens/ErrorScreen.vue

@@ -1,8 +1,5 @@
-<script setup lang="tsx">
+<script setup lang="tsx"></script>
-</script>
 
 <template>
-  <div>
+  <div>Unknown error occurred</div>
-    Unknown error occurred
-  </div>
 </template>

src/renderer/screens/MainScreen.vue

@@ -6,11 +6,11 @@ import Utils from '@/renderer/utils'
 const { locale } = useI18n()
 const theme = useTheme()
 
-const handleChangeTheme = () : void => {
+const handleChangeTheme = (): void => {
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }
 
-const handleChangeLanguage = () : void => {
+const handleChangeLanguage = (): void => {
   if (locale.value === 'en') {
     locale.value = 'ko'
   } else {
@@ -18,51 +18,32 @@ const handleChangeLanguage = () : void => {
   }
 }
 
-const handleAbout = async () : Promise<void> => {
+const handleAbout = async (): Promise<void> => {
   await Utils.openExternal('https://github.com/jooy2/vutron')
 }
 </script>
 
 <template>
   <v-container>
-    <v-row
+    <v-row align="center" class="text-center">
-      align="center"
-      class="text-center"
-    >
       <v-col cols="12">
-        <img
+        <img alt="logo" class="ma-auto h-auto w-75" src="/images/vutron-logo.webp" />
-          alt="logo"
-          class="ma-auto h-auto w-75"
-          src="/images/vutron-logo.webp"
-        >
       </v-col>
       <v-col cols="12">
         {{ $t('desc.welcome') }}
       </v-col>
       <v-col cols="4">
-        <v-btn
+        <v-btn block color="primary" @click="handleChangeTheme">
-          block
-          color="primary"
-          @click="handleChangeTheme"
-        >
           {{ $t('menu.change-theme') }}
         </v-btn>
       </v-col>
       <v-col cols="4">
-        <v-btn
+        <v-btn block color="primary" @click="handleChangeLanguage">
-          block
-          color="primary"
-          @click="handleChangeLanguage"
-        >
           {{ $t('menu.change-language') }}
         </v-btn>
       </v-col>
       <v-col cols="4">
-        <v-btn
+        <v-btn block color="primary" @click="handleAbout">
-          block
-          color="primary"
-          @click="handleAbout"
-        >
           {{ $t('menu.about') }}
         </v-btn>
       </v-col>

src/renderer/screens/index.ts

@@ -1,7 +1,4 @@
 import ErrorScreen from '@/renderer/screens/ErrorScreen.vue'
 import MainScreen from '@/renderer/screens/MainScreen.vue'
 
-export {
+export { ErrorScreen, MainScreen }
-  ErrorScreen,
-  MainScreen
-}

src/renderer/store/temp.ts

@@ -8,7 +8,7 @@ export const useTempStore = defineStore('temp', {
     getText: (state) => state.text
   },
   actions: {
-    setText (text) {
+    setText(text) {
       this.text = text
     }
   }

src/renderer/utils/index.ts

@@ -1,11 +1,11 @@
 import { shell } from 'electron'
 
 export default class Utils {
-  static getCurrentLocale () : string {
+  static getCurrentLocale(): string {
     return navigator?.language?.split('-')[0] || 'en'
   }
 
-  static async openExternal (url: string) : Promise<void> {
+  static async openExternal(url: string): Promise<void> {
     await shell.openExternal(url)
   }
 }

tsconfig.json

@@ -15,21 +15,11 @@
     "strict": true,
     "skipLibCheck": true,
     "paths": {
-      "@/*": [
+      "@/*": ["./src/*"]
-        "./src/*"
-      ]
     },
-    "lib": [
+    "lib": ["esnext", "dom"]
-      "esnext",
-      "dom"
-    ]
   },
-  "include": [
+  "include": ["src/**/*/*.ts", "src/**/*/*.d.ts", "src/**/*/*.tsx", "src/**/*/*.vue"],
-    "src/**/*/*.ts",
-    "src/**/*/*.d.ts",
-    "src/**/*/*.tsx",
-    "src/**/*/*.vue"
-  ],
   "references": [
     {
       "path": "./tsconfig.node.json"

tsconfig.node.json

@@ -8,8 +8,5 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true
   },
-    "include": [
+  "include": ["package.json", "electron"]
-        "package.json",
-        "electron"
-    ]
 }

vite.config.js

@@ -14,14 +14,7 @@ export default defineConfig({
     __INTLIFY_PROD_DEVTOOLS__: false
   },
   resolve: {
-    extensions: [
+    extensions: ['.mjs', '.js', '.ts', '.vue', '.json', '.scss'],
-      '.mjs',
-      '.js',
-      '.ts',
-      '.vue',
-      '.json',
-      '.scss'
-    ],
     alias: {
       '@': resolve(dirname(fileURLToPath(import.meta.url)), 'src')
     }
@@ -46,10 +39,7 @@ export default defineConfig({
             assetsDir: '.',
             outDir: 'dist/main',
             rollupOptions: {
-              external: [
+              external: ['electron', ...builtinModules]
-                'electron',
-                ...builtinModules
-              ]
             }
           }
         }