Add eslint-plugin-html to lint JS in HTML files (#37186)

.eslintignore

@@ -3,4 +3,6 @@
 **/vendor/
 /_site/
 /js/coverage/
+/js/tests/integration/
 /site/static/sw.js
+/site/layouts/

js/tests/visual/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    "html"
+  ],
+  "extends": "../../../.eslintrc.json",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "settings": {
+    "html/html-extensions": [
+      ".html"
+    ]
+  },
+  "rules": {
+    "no-console": "off",
+    "no-new": "off",
+    "unicorn/no-array-for-each": "off"
+  }
+}

js/tests/visual/modal.html

@@ -201,6 +201,8 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
+      /* global bootstrap: false */
+
       const ffBugTestResult = document.getElementById('ff-bug-test-result')
       const firefoxTestDone = false
 
@@ -217,11 +219,7 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
 
       const tall = document.getElementById('tall')
       document.getElementById('tall-toggle').addEventListener('click', () => {
-        if (tall.style.display === 'none') {
-          tall.style.display = 'block'
-        } else {
-          tall.style.display = 'none'
-        }
+        tall.style.display = tall.style.display === 'none' ? 'block' : 'none'
       })
 
       const ffBugInput = document.getElementById('ff-bug-input')
@@ -231,6 +229,7 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
         ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true))
         ffBugInput.removeEventListener('focus', handlerClickFfBugInput)
       }
+
       ffBugInput.addEventListener('focus', handlerClickFfBugInput)
 
       const modalFf = new bootstrap.Modal(firefoxModal)

js/tests/visual/popover.html

@@ -33,6 +33,8 @@ <h1>Popover <small>Bootstrap Visual Test</small></h1>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
+      /* global bootstrap: false */
+
       document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl))
     </script>
   </body>

js/tests/visual/toast.html

@@ -52,15 +52,17 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
+      /* global bootstrap: false */
+
       window.addEventListener('load', () => {
         document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl))
 
         document.getElementById('btnShowToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl =>  bootstrap.Toast.getInstance(toastEl).show())
+          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).show())
         })
 
         document.getElementById('btnHideToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl =>  bootstrap.Toast.getInstance(toastEl).hide())
+          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).hide())
         })
       })
     </script>

js/tests/visual/tooltip.html

@@ -85,6 +85,8 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
+      /* global bootstrap: false */
+
       if (typeof document.body.attachShadow === 'function') {
         const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
         shadowRoot.innerHTML =
@@ -101,32 +103,35 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
         })
       }
 
-
       new bootstrap.Tooltip('#tooltipElement', {
         container: '#customContainer'
       })
 
       const targetTooltip = new bootstrap.Tooltip('#target', {
-        placement : 'top',
-        trigger : 'manual'
+        placement: 'top',
+        trigger: 'manual'
       })
       targetTooltip.show()
 
-      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl=>  new bootstrap.Tooltip(tooltipEl))
+      document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl))
     </script>
 
     <script>
+      /* global bootstrap: false */
+
       new bootstrap.Tooltip('#wrapperTriggeredBySelector', {
         animation: false,
         selector: '.bs-dynamic-tooltip'
       })
 
+      /* eslint-disable no-unused-vars */
       function duplicateButtons() {
         const buttonsBlock = document.querySelector('.selectorButtonsBlock')// get first
         const buttonsBlockClone = buttonsBlock.cloneNode(true)
-        buttonsBlockClone.innerHTML+= new Date().toLocaleString()
-       document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone)
+        buttonsBlockClone.innerHTML += new Date().toLocaleString()
+        document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone)
       }
+      /* eslint-enable no-unused-vars */
     </script>
 
   </body>

package.json

@@ -63,7 +63,7 @@
     "js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.js --sourcemap",
     "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
     "js-compile-plugins": "node build/build-plugins.js",
-    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js .",
     "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js",
@@ -118,6 +118,7 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.24.0",
     "eslint-config-xo": "^0.42.0",
+    "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-unicorn": "^43.0.2",