chore(lint): add eslint and prettier with ionic configs and CI workflow

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.github/workflows/CI.yml

@@ -0,0 +1,51 @@
+# GitHub Actions docs
+# https://help.github.com/en/articles/about-github-actions
+# https://help.github.com/en/articles/workflow-syntax-for-github-actions
+
+name: Install Dependencies, Lint, Build and Test
+
+on: [pull_request]
+
+jobs:
+  lint:
+    name: Lint
+    # Lint once on Linux. Windows runners check out with CRLF line endings,
+    # which Prettier would report as formatting changes.
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - name: Use Node.js 24
+      uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+      with:
+        node-version: 24
+    - name: Install Dependencies
+      run: npm ci
+    - name: Lint
+      run: npm run lint
+
+  test:
+    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        # When node version is updated, update the version in the GitHub repository settings (admin access required):
+        # Branches -> Edit `main` -> Protect matching branches ->
+        # Require status checks to pass before merging ->
+        # Search for the new version -> Add them to the list ->
+        # Remove the old version from the list -> Save changes
+        node_version: [24]
+        os: [windows-latest, macOS-latest]
+
+    steps:
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
+      with:
+        node-version: ${{ matrix.node_version }}
+    - name: Install Dependencies
+      run: npm ci
+    - name: Build
+      run: npm run build
+    - name: Test
+      run: npm run test.unit -- --run

.prettierignore

@@ -0,0 +1,5 @@
+# Prettier only reads the root .gitignore, not the ones inside the native
+# projects, so ignore them here to skip Capacitor's copied web build and
+# Gradle's build output.
+android/
+ios/

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Webnative.webnative"
+  ]
+}

README.md

@@ -37,3 +37,10 @@ After the user navigates to Tab 2 (Photos), they can tap/click on the camera but
 4) Install the project dependencies: `npm install`
 5) Run the app in your browser: `ionic serve`
 6) Run the app on iOS or Android: Follow the [Capacitor Workflow](https://capacitorjs.com/docs/basics/workflow) guide for instructions on building and running the app on a native platform.
+
+## Linting
+
+The code is checked with [ESLint](https://eslint.org/) and formatted with [Prettier](https://prettier.io/), using Ionic's shared configs. Pull requests must pass `npm run lint`.
+
+- Check for issues: `npm run lint`
+- Fix what can be fixed automatically: `npm run lint:fix`

capacitor.config.ts

@@ -1,11 +1,11 @@
-import { CapacitorConfig } from '@capacitor/cli';
+import type { CapacitorConfig } from '@capacitor/cli';
 
 const config: CapacitorConfig = {
   appId: 'io.ionic.tutorial.photogallery.react',
   appName: 'tutorial-photo-gallery-react',
   webDir: 'dist',
   server: {
-    androidScheme: 'https'
+    androidScheme: 'https',
   },
   plugins: {
     SplashScreen: {

cypress.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
-    baseUrl: "http://localhost:5173",
+    baseUrl: 'http://localhost:5173',
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
   },
-});
+});

cypress/e2e/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')
-  })
-})
+    cy.visit('/');
+    cy.contains('ion-content', 'Tab 1 page');
+  });
+});

cypress/support/commands.ts

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

cypress/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')

eslint.config.js

@@ -0,0 +1,21 @@
+import ionic from '@ionic/eslint-config/recommended.js';
+import { defineConfig } from 'eslint/config';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import globals from 'globals';
+
+export default defineConfig([
+  { ignores: ['dist/**', 'android/**', 'ios/**', 'cypress.config.ts'] },
+  ionic,
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [reactHooks.configs.flat.recommended, reactRefresh.configs.vite],
+    languageOptions: {
+      globals: globals.browser,
+    },
+    rules: {
+      // Ionic's base level; `recommended` makes it an error, which is meant for libraries.
+      '@typescript-eslint/explicit-module-boundary-types': 'warn',
+    },
+  },
+]);