lint: format

.eslintignore

@@ -1,27 +0,0 @@
-.DS_Store
-node_modules
-/coverage
-/dist
-/ios
-/android
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-

.eslintrc.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
-  ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'vue/no-deprecated-slot-attribute': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-  }
-}

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
-    "recommendations": [
-        "Webnative.webnative"
-    ]
+  "recommendations": [
+    "Webnative.webnative",
+    "Vue.volar"
+  ]
 }

capacitor.config.ts

@@ -1,9 +1,9 @@
-import type { CapacitorConfig } from '@capacitor/cli';
+import type { CapacitorConfig } from "@capacitor/cli";
 
 const config: CapacitorConfig = {
-  appId: 'io.ionic.starter',
-  appName: 'riwa-ionic',
-  webDir: 'dist'
+  appId: "io.ionic.starter",
+  appName: "riwa-ionic",
+  webDir: "dist",
 };
 
 export default config;

cypress.config.ts

@@ -1,13 +1,13 @@
-import { defineConfig } from 'cypress';
+import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
-    supportFile: 'tests/e2e/support/e2e.{js,jsx,ts,tsx}',
-    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
-    videosFolder: 'tests/e2e/videos',
-    screenshotsFolder: 'tests/e2e/screenshots',
-    baseUrl: 'http://localhost:5173',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    supportFile: "tests/e2e/support/e2e.{js,jsx,ts,tsx}",
+    specPattern: "tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}",
+    videosFolder: "tests/e2e/videos",
+    screenshotsFolder: "tests/e2e/screenshots",
+    baseUrl: "http://localhost:5173",
+    // eslint-disable-next-line unused-imports/no-unused-vars
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

eslint.config.mjs

@@ -0,0 +1,32 @@
+import process from "node:process";
+import antfu from "@antfu/eslint-config";
+
+export default antfu({
+  vue: true,
+  typescript: true,
+  jsonc: false,
+  gitignore: true,
+  ignores: [
+    "ios",
+    "android",
+    "dist",
+    "coverage",
+    "node_modules",
+  ],
+  stylistic: {
+    semi: true,
+    quotes: "double",
+  },
+  formatters: {
+    css: "prettier",
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "vue/no-deprecated-slot-attribute": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+  },
+});

package.json

@@ -1,15 +1,17 @@
 {
   "name": "riwa-ionic",
-  "private": true,
-  "version": "0.0.1",
   "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "description": "An Ionic project",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "test:e2e": "cypress run",
     "test:unit": "vitest",
-    "lint": "eslint ."
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   },
   "dependencies": {
     "@capacitor/app": "8.0.0",
@@ -17,27 +19,37 @@
     "@capacitor/haptics": "8.0.0",
     "@capacitor/keyboard": "8.0.0",
     "@capacitor/status-bar": "8.0.0",
-    "@ionic/vue": "^8.0.0",
-    "@ionic/vue-router": "^8.0.0",
-    "ionicons": "^7.0.0",
-    "vue": "^3.3.0",
-    "vue-router": "^4.2.0"
+    "@ionic/vue": "^8.7.11",
+    "@ionic/vue-router": "^8.7.11",
+    "ionicons": "^8.0.13",
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^6.6.1",
     "@capacitor/cli": "8.0.0",
-    "@vitejs/plugin-legacy": "^5.0.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.3.0",
-    "cypress": "^13.5.0",
-    "eslint": "^8.35.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "jsdom": "^22.1.0",
-    "terser": "^5.4.0",
-    "typescript": "~5.9.0",
-    "vite": "^5.0.0",
-    "vitest": "^0.34.6",
-    "vue-tsc": "^2.1.10"
+    "@types/node": "^24.10.2",
+    "@vitejs/plugin-legacy": "^7.2.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/test-utils": "^2.4.6",
+    "cypress": "^15.7.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-format": "^1.1.0",
+    "eslint-plugin-vue": "^10.6.2",
+    "jsdom": "^27.3.0",
+    "lint-staged": "^16.2.7",
+    "simple-git-hooks": "^2.13.1",
+    "terser": "^5.44.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.7",
+    "vitest": "^4.0.15",
+    "vue-tsc": "^3.1.8"
   },
-  "description": "An Ionic project"
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
 }

src/App.vue

@@ -1,9 +1,9 @@
-<template>
-  <ion-app>
-    <ion-router-outlet />
-  </ion-app>
-</template>
-
 <script setup lang="ts">
-import { IonApp, IonRouterOutlet } from '@ionic/vue';
+import { IonApp, IonRouterOutlet } from "@ionic/vue";
 </script>
+
+<template>
+  <IonApp>
+    <IonRouterOutlet />
+  </IonApp>
+</template>

src/components/ExploreContainer.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+defineProps({
+  name: String,
+});
+</script>
+
 <template>
   <div id="container">
     <strong>{{ name }}</strong>
@@ -5,12 +11,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-defineProps({
-  name: String,
-});
-</script>
-
 <style scoped>
 #container {
   text-align: center;

src/main.ts

@@ -1,24 +1,24 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router';
+import { IonicVue } from "@ionic/vue";
+import { createApp } from "vue";
+import App from "./App.vue";
 
-import { IonicVue } from '@ionic/vue';
+import router from "./router";
 
 /* Core CSS required for Ionic components to work properly */
-import '@ionic/vue/css/core.css';
+import "@ionic/vue/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-import '@ionic/vue/css/normalize.css';
-import '@ionic/vue/css/structure.css';
-import '@ionic/vue/css/typography.css';
+import "@ionic/vue/css/normalize.css";
+import "@ionic/vue/css/structure.css";
+import "@ionic/vue/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-import '@ionic/vue/css/padding.css';
-import '@ionic/vue/css/float-elements.css';
-import '@ionic/vue/css/text-alignment.css';
-import '@ionic/vue/css/text-transformation.css';
-import '@ionic/vue/css/flex-utils.css';
-import '@ionic/vue/css/display.css';
+import "@ionic/vue/css/padding.css";
+import "@ionic/vue/css/float-elements.css";
+import "@ionic/vue/css/text-alignment.css";
+import "@ionic/vue/css/text-transformation.css";
+import "@ionic/vue/css/flex-utils.css";
+import "@ionic/vue/css/display.css";
 
 /**
  * Ionic Dark Mode
@@ -29,15 +29,15 @@ import '@ionic/vue/css/display.css';
 
 /* @import '@ionic/vue/css/palettes/dark.always.css'; */
 /* @import '@ionic/vue/css/palettes/dark.class.css'; */
-import '@ionic/vue/css/palettes/dark.system.css';
+import "@ionic/vue/css/palettes/dark.system.css";
 
 /* Theme variables */
-import './theme/variables.css';
+import "./theme/variables.css";
 
 const app = createApp(App)
   .use(IonicVue)
   .use(router);
 
 router.isReady().then(() => {
-  app.mount('#app');
+  app.mount("#app");
 });

src/router/index.ts

@@ -1,39 +1,39 @@
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import TabsPage from '../views/TabsPage.vue'
+import type { RouteRecordRaw } from "vue-router";
+import { createRouter, createWebHistory } from "@ionic/vue-router";
+import TabsPage from "../views/TabsPage.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: '/',
-    redirect: '/tabs/tab1'
+    path: "/",
+    redirect: "/tabs/tab1",
   },
   {
-    path: '/tabs/',
+    path: "/tabs/",
     component: TabsPage,
     children: [
       {
-        path: '',
-        redirect: '/tabs/tab1'
+        path: "",
+        redirect: "/tabs/tab1",
       },
       {
-        path: 'tab1',
-        component: () => import('@/views/Tab1Page.vue')
+        path: "tab1",
+        component: () => import("@/views/Tab1Page.vue"),
       },
       {
-        path: 'tab2',
-        component: () => import('@/views/Tab2Page.vue')
+        path: "tab2",
+        component: () => import("@/views/Tab2Page.vue"),
       },
       {
-        path: 'tab3',
-        component: () => import('@/views/Tab3Page.vue')
-      }
-    ]
-  }
-]
+        path: "tab3",
+        component: () => import("@/views/Tab3Page.vue"),
+      },
+    ],
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

src/views/Tab1Page.vue

@@ -1,23 +1,25 @@
+<script setup lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import ExploreContainer from "@/components/ExploreContainer.vue";
+</script>
+
 <template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Tab 1</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Tab 1</ion-title>
-        </ion-toolbar>
-      </ion-header>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Tab 1</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent :fullscreen="true">
+      <IonHeader collapse="condense">
+        <IonToolbar>
+          <IonTitle size="large">
+            Tab 1
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
 
       <ExploreContainer name="Tab 1 page" />
-    </ion-content>
-  </ion-page>
+    </IonContent>
+  </IonPage>
 </template>
-
-<script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-import ExploreContainer from '@/components/ExploreContainer.vue';
-</script>

src/views/Tab2Page.vue

@@ -1,23 +1,25 @@
+<script setup lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import ExploreContainer from "@/components/ExploreContainer.vue";
+</script>
+
 <template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Tab 2</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Tab 2</ion-title>
-        </ion-toolbar>
-      </ion-header>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Tab 2</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent :fullscreen="true">
+      <IonHeader collapse="condense">
+        <IonToolbar>
+          <IonTitle size="large">
+            Tab 2
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
 
       <ExploreContainer name="Tab 2 page" />
-    </ion-content>
-  </ion-page>
+    </IonContent>
+  </IonPage>
 </template>
-
-<script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-import ExploreContainer from '@/components/ExploreContainer.vue';
-</script>

src/views/Tab3Page.vue

@@ -1,23 +1,25 @@
+<script setup lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import ExploreContainer from "@/components/ExploreContainer.vue";
+</script>
+
 <template>
-  <ion-page>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Tab 3</ion-title>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Tab 3</ion-title>
-        </ion-toolbar>
-      </ion-header>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Tab 3</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent :fullscreen="true">
+      <IonHeader collapse="condense">
+        <IonToolbar>
+          <IonTitle size="large">
+            Tab 3
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
 
       <ExploreContainer name="Tab 3 page" />
-    </ion-content>
-  </ion-page>
+    </IonContent>
+  </IonPage>
 </template>
-
-<script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-import ExploreContainer from '@/components/ExploreContainer.vue';
-</script>

src/views/TabsPage.vue

@@ -1,28 +1,28 @@
-<template>
-  <ion-page>
-    <ion-tabs>
-      <ion-router-outlet></ion-router-outlet>
-      <ion-tab-bar slot="bottom">
-        <ion-tab-button tab="tab1" href="/tabs/tab1">
-          <ion-icon aria-hidden="true" :icon="triangle" />
-          <ion-label>Tab 1</ion-label>
-        </ion-tab-button>
-
-        <ion-tab-button tab="tab2" href="/tabs/tab2">
-          <ion-icon aria-hidden="true" :icon="ellipse" />
-          <ion-label>Tab 2</ion-label>
-        </ion-tab-button>
-
-        <ion-tab-button tab="tab3" href="/tabs/tab3">
-          <ion-icon aria-hidden="true" :icon="square" />
-          <ion-label>Tab 3</ion-label>
-        </ion-tab-button>
-      </ion-tab-bar>
-    </ion-tabs>
-  </ion-page>
-</template>
-
 <script setup lang="ts">
-import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
-import { ellipse, square, triangle } from 'ionicons/icons';
+import { IonIcon, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/vue";
+import { ellipse, square, triangle } from "ionicons/icons";
 </script>
+
+<template>
+  <IonPage>
+    <IonTabs>
+      <IonRouterOutlet />
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="tab1" href="/tabs/tab1">
+          <IonIcon aria-hidden="true" :icon="triangle" />
+          <IonLabel>Tab 1</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="tab2" href="/tabs/tab2">
+          <IonIcon aria-hidden="true" :icon="ellipse" />
+          <IonLabel>Tab 2</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="tab3" href="/tabs/tab3">
+          <IonIcon aria-hidden="true" :icon="square" />
+          <IonLabel>Tab 3</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  </IonPage>
+</template>

tests/e2e/specs/test.cy.ts

@@ -1,6 +1,6 @@
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('ion-content', 'Tab 1 page')
-  })
-})
+describe("My First Test", () => {
+  it("Visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("ion-content", "Tab 1 page");
+  });
+});

tests/e2e/support/commands.ts

@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }

tests/e2e/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

tests/unit/example.spec.ts

@@ -1,10 +1,10 @@
-import { mount } from '@vue/test-utils'
-import Tab1Page from '@/views/Tab1Page.vue'
-import { describe, expect, test } from 'vitest'
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import Tab1Page from "@/views/Tab1Page.vue";
 
-describe('Tab1Page.vue', () => {
-  test('renders tab 1 Tab1Page', () => {
-    const wrapper = mount(Tab1Page)
-    expect(wrapper.text()).toMatch('Tab 1 page')
-  })
-})
+describe("tab1Page.vue", () => {
+  it("renders tab 1 Tab1Page", () => {
+    const wrapper = mount(Tab1Page);
+    expect(wrapper.text()).toMatch("Tab 1 page");
+  });
+});

vite.config.ts

@@ -1,23 +1,23 @@
 /// <reference types="vitest" />
 
-import legacy from '@vitejs/plugin-legacy'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-import { defineConfig } from 'vite'
+import path from "node:path";
+import legacy from "@vitejs/plugin-legacy";
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
-    legacy()
+    legacy(),
   ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      "@": path.resolve(__dirname, "./src"),
     },
   },
   test: {
     globals: true,
-    environment: 'jsdom'
-  }
-})
+    environment: "jsdom",
+  },
+});