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 test -- --watch=false --browsers=ChromeHeadless

.gitignore

@@ -23,7 +23,8 @@ npm-debug.log*
 /.sass-cache
 /.sourcemaps
 /.versions
-/.vscode
+/.vscode/*
+!/.vscode/extensions.json
 /coverage
 /dist
 /node_modules

.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,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Angular.ng-template",
+    "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,14 +1,14 @@
 import { CapacitorConfig } from '@capacitor/cli';
 const config: CapacitorConfig = {
-  appId: "io.ionic.tutorial.photogallery.angular",
-  appName: "tutorial-photo-gallery-angular",
-  npmClient: "npm",
-  webDir: "www",
+  appId: 'io.ionic.tutorial.photogallery.angular',
+  appName: 'tutorial-photo-gallery-angular',
+  npmClient: 'npm',
+  webDir: 'www',
   plugins: {
     SplashScreen: {
       launchAutoHide: false,
-      backgroundColor: "#ffffffff",
-      androidScaleType: "CENTER_CROP",
+      backgroundColor: '#ffffffff',
+      androidScaleType: 'CENTER_CROP',
     },
   },
 };

eslint.config.js

@@ -1,14 +1,20 @@
 // @ts-check
-const eslint = require('@eslint/js');
-const tseslint = require('typescript-eslint');
+const ionic = require('@ionic/eslint-config/recommended');
 const angular = require('angular-eslint');
+const { defineConfig } = require('eslint/config');
 
-module.exports = tseslint.config(
+module.exports = defineConfig([
+  {
+    ignores: ['www/**', 'dist/**', 'coverage/**', '.angular/**', 'android/**', 'ios/**'],
+  },
+  ionic,
   {
     files: ['**/*.ts'],
-    extends: [eslint.configs.recommended, ...tseslint.configs.recommended, ...angular.configs.tsRecommended],
+    extends: [angular.configs.tsRecommended],
     processor: angular.processInlineTemplates,
     rules: {
+      // Ionic's base level; `recommended` makes it an error, which is meant for libraries.
+      '@typescript-eslint/explicit-module-boundary-types': 'warn',
       '@angular-eslint/directive-selector': [
         'error',
         {
@@ -35,7 +41,7 @@ module.exports = tseslint.config(
   },
   {
     files: ['**/*.html'],
-    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+    extends: [angular.configs.templateRecommended, angular.configs.templateAccessibility],
     rules: {},
-  }
-);
+  },
+]);