Add ESLint (#3152)

* add eslint to src project

* fix test

---------

Co-authored-by: Rob Larsen <rob@htmlcssjavascript.com>

.github/workflows/publish.yml

@@ -46,7 +46,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - name: publish npm
         run: npm publish

.github/workflows/spellcheck.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: streetsidesoftware/cspell-action@v6
+      - uses: streetsidesoftware/cspell-action@v7
         with:
           inline: warning
           strict: false

.github/workflows/test-windows.yml

@@ -1,35 +0,0 @@
-name: Build status (Windows)
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-permissions:
-  contents: read
-
-jobs:
-  build:
-    runs-on: windows-latest
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x]
-    steps:
-      - name: Get npm cache directory
-        id: npm-cache
-        run: |
-          echo "dir=$(npm config get cache)" >> "$GITHUB_OUTPUT"
-      - uses: actions/cache@v3
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-      - uses: actions/checkout@v4
-      - name: Run tests ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm test

.github/workflows/test.yml

@@ -1,20 +1,26 @@
-name: Build status (Ubuntu)
+name: Build status
 
 on:
   push:
     branches: [main]
   pull_request:
     branches: [main]
+  workflow_dispatch:
 
 permissions:
   contents: read
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version:
+          - 20
+          - 22
+          - 24
+        os: [ubuntu-latest, windows-latest]
+
     steps:
       - name: Get npm cache directory
         id: npm-cache

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "esbenp.prettier-vscode",
+    "streetsidesoftware.code-spell-checker"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "[javascript][typescript][json][jsonc][markdown][yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true
+  },
+  "[javascript][typescript]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  },
+  "eslint.validate": ["javascript", "typescript"],
+  "editor.formatOnSave": true,
+  "editor.renderWhitespace": "all",
+  "files.trimTrailingWhitespace": true
+}

docs/about-this-repo.md

@@ -51,7 +51,8 @@ Our branch protection rules are as follows:
 - In addition to the PR and approving reviewer, we require three status checks
   to pass before code can be merged
   _ Build with Node 20
-  _ Build with Node 18
+  _ Build with Node 22
+  _ Build with Node 24
 - We _allow_ force pushes for project admins. While force pushes can create
   some head scratching moments for people who have cloned the repo and update
   before and after the force push, the ability to clean up the `HEAD` of a

package-lock.json

@@ -14,20 +14,19 @@
         "eslint": "^8.57.1",
         "eslint-config-recommended": "^4.1.0",
         "eslint-plugin-mocha": "^10.5.0",
-        "glob": "^11.0.1",
+        "glob": "^11.0.2",
         "gulp": "^5.0.0",
         "gulp-autoprefixer": "^9.0.0",
         "gulp-eslint": "^6.0.0",
         "gulp-header": "^2.0.9",
         "gulp-rename": "^2.0.0",
         "main.css": "3.0.0",
-        "mocha": "^11.1.0",
+        "mocha": "^11.5.0",
         "prettier": "3.5.3",
-        "strip-json-comments": "^5.0.1"
+        "strip-json-comments": "^5.0.2"
       },
       "engines": {
-        "node": ">=18",
-        "npm": ">=10"
+        "node": ">=20"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -603,15 +602,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ansi-colors": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
-      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "dev": true,
@@ -1544,10 +1534,11 @@
       }
     },
     "node_modules/diff": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz",
-      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
+      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
       }
@@ -4207,9 +4198,9 @@
       }
     },
     "node_modules/glob": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.1.tgz",
-      "integrity": "sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==",
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.2.tgz",
+      "integrity": "sha512-YT7U7Vye+t5fZ/QMkBFrTJ7ZQxInIUjwyAjVj84CYXqgBdv30MFUPGnBR6sQaVq6Is15wYJUsnzTuWaGRBhBAQ==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -6003,25 +5994,25 @@
       }
     },
     "node_modules/mocha": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.1.0.tgz",
-      "integrity": "sha512-8uJR5RTC2NgpY3GrYcgpZrsEd9zKbPDpob1RezyR2upGHRQtHWofmzTMzTMSV6dru3tj5Ukt0+Vnq1qhFEEwAg==",
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.5.0.tgz",
+      "integrity": "sha512-VKDjhy6LMTKm0WgNEdlY77YVsD49LZnPSXJAaPNL9NRYQADxvORsyG1DIQY6v53BKTnlNbEE2MbVCDbnxr4K3w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-colors": "^4.1.3",
         "browser-stdout": "^1.3.1",
-        "chokidar": "^3.5.3",
+        "chokidar": "^4.0.1",
         "debug": "^4.3.5",
-        "diff": "^5.2.0",
+        "diff": "^7.0.0",
         "escape-string-regexp": "^4.0.0",
         "find-up": "^5.0.0",
         "glob": "^10.4.5",
         "he": "^1.2.0",
         "js-yaml": "^4.1.0",
         "log-symbols": "^4.1.0",
-        "minimatch": "^5.1.6",
+        "minimatch": "^9.0.5",
         "ms": "^2.1.3",
+        "picocolors": "^1.1.1",
         "serialize-javascript": "^6.0.2",
         "strip-json-comments": "^3.1.1",
         "supports-color": "^8.1.1",
@@ -6048,6 +6039,22 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/mocha/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/mocha/node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -6095,22 +6102,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/mocha/node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/mocha/node_modules/has-flag": {
       "version": "4.0.0",
       "dev": true,
@@ -6143,16 +6134,19 @@
       "license": "ISC"
     },
     "node_modules/mocha/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/mocha/node_modules/ms": {
@@ -6177,6 +6171,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mocha/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/mocha/node_modules/strip-json-comments": {
       "version": "3.1.1",
       "dev": true,
@@ -6639,10 +6647,11 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.0",
@@ -7393,7 +7402,9 @@
       }
     },
     "node_modules/strip-json-comments": {
-      "version": "5.0.1",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.2.tgz",
+      "integrity": "sha512-4X2FR3UwhNUE9G49aIsJW5hRRR3GXGTBTZRMfv568O60ojM8HcWjV/VxAxCDW3SUND33O6ZY66ZuRcdkj73q2g==",
       "dev": true,
       "license": "MIT",
       "engines": {

package.json

@@ -1,21 +1,28 @@
 {
   "name": "html5-boilerplate",
   "version": "9.0.1",
-  "homepage": "https://html5boilerplate.com/",
-  "license": "MIT",
   "description": "A professional front-end template for building fast, robust, and adaptable web apps or sites.",
   "keywords": [
     "h5bp",
     "template",
     "front-end"
   ],
+  "homepage": "https://html5boilerplate.com/",
+  "bugs": {
+    "url": "https://github.com/h5bp/html5-boilerplate/issues"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/h5bp/html5-boilerplate.git"
   },
-  "bugs": {
-    "url": "https://github.com/h5bp/html5-boilerplate/issues"
-  },
+  "license": "MIT",
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE.txt",
+    "package.json",
+    "dist/",
+    "README.md"
+  ],
   "scripts": {
     "build": "gulp build",
     "prettier": "prettier --write ./**/*.{js,json,md,mjs,yml}",
@@ -27,20 +34,22 @@
     "eslint": "^8.57.1",
     "eslint-config-recommended": "^4.1.0",
     "eslint-plugin-mocha": "^10.5.0",
-    "glob": "^11.0.1",
+    "glob": "^11.0.2",
     "gulp": "^5.0.0",
     "gulp-autoprefixer": "^9.0.0",
     "gulp-eslint": "^6.0.0",
     "gulp-header": "^2.0.9",
     "gulp-rename": "^2.0.0",
     "main.css": "3.0.0",
-    "mocha": "^11.1.0",
+    "mocha": "^11.5.0",
     "prettier": "3.5.3",
-    "strip-json-comments": "^5.0.1"
+    "strip-json-comments": "^5.0.2"
   },
   "engines": {
-    "node": ">=18",
-    "npm": ">=10"
+    "node": ">=20"
+  },
+  "volta": {
+    "node": "20.19.1"
   },
   "h5bp-configs": {
     "directories": {
@@ -49,12 +58,5 @@
       "src": "src",
       "test": "test"
     }
-  },
-  "files": [
-    "CHANGELOG.md",
-    "LICENSE.txt",
-    "package.json",
-    "dist/",
-    "README.md"
-  ]
+  }
 }

src/eslint.config.mjs

@@ -0,0 +1,9 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+
+export default [
+  {
+    languageOptions: { globals: globals.browser },
+  },
+  pluginJs.configs.recommended,
+];

src/package.json

@@ -11,14 +11,18 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack serve --open --config webpack.config.dev.js",
-    "build": "webpack --config webpack.config.prod.js"
+    "lint": "eslint ./js --fix",
+    "build": "npm run lint && webpack --config webpack.config.prod.js"
   },
   "devDependencies": {
-    "copy-webpack-plugin": "^13.0.0",
-    "html-webpack-plugin": "^5.6.3",
-    "webpack": "^5.99.5",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.1",
-    "webpack-merge": "^6.0.1"
+    "@eslint/js": "^9.9.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint": "^8.57.0",
+    "globals": "^15.9.0",
+    "html-webpack-plugin": "^5.6.0",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-merge": "^5.10.0"
   }
 }

test/file_existence.mjs

@@ -34,6 +34,7 @@ const expectedFilesInDistDir = [
 
   'index.html',
 
+  'eslint.config.mjs',
   'js/',
   'js/app.js',
   'js/vendor/',