Add new JS linter rules (#17699)

* Add new JS linter rules

Adds a few useful rules from eslint-plugin-github. Notable changes:

- Forbid dataset usage, its camel-casing behaviour makes it hard to
  grep for attributes.
- Forbid .then() and .catch(), we should generally prefer await for new
  code. For rare cases where they are useful, a eslint-disable-line
  directive can be set.
- Add docs js to linting

* also enable github/array-foreach

* small tweak

Co-authored-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

Author: 4 people

.eslintrc

@@ -13,6 +13,7 @@ plugins:
   - eslint-plugin-import
   - eslint-plugin-vue
   - eslint-plugin-html
+  - eslint-plugin-github
 
 extends:
   - plugin:vue/recommended
@@ -96,6 +97,23 @@ rules:
   function-paren-newline: [0]
   generator-star-spacing: [0]
   getter-return: [2]
+  github/array-foreach: [2]
+  github/async-currenttarget: [2]
+  github/async-preventdefault: [2]
+  github/authenticity-token: [0]
+  github/get-attribute: [2]
+  github/js-class-name: [0]
+  github/no-blur: [0]
+  github/no-d-none: [0]
+  github/no-dataset: [2]
+  github/no-implicit-buggy-globals: [0]
+  github/no-inner-html: [0]
+  github/no-innerText: [2]
+  github/no-then: [2]
+  github/no-useless-passive: [2]
+  github/prefer-observers: [0]
+  github/require-passive-events: [2]
+  github/unescaped-html-literal: [0]
   grouped-accessor-pairs: [2]
   guard-for-in: [0]
   id-blacklist: [0]

Makefile

@@ -328,7 +328,7 @@ lint: lint-frontend lint-backend
 
 .PHONY: lint-frontend
 lint-frontend: node_modules
-	npx eslint --color --max-warnings=0 web_src/js build templates *.config.js
+	npx eslint --color --max-warnings=0 web_src/js build templates *.config.js docs/assets/js
 	npx stylelint --color --max-warnings=0 web_src/less
 	npx editorconfig-checker templates
 

build/generate-images.js

@@ -80,5 +80,5 @@ async function main() {
   ]);
 }
 
-main().then(exit).catch(exit);
+main().then(exit).catch(exit); // eslint-disable-line github/no-then
 

build/generate-svg.js

@@ -54,5 +54,5 @@ async function main() {
   ]);
 }
 
-main().then(exit).catch(exit);
+main().then(exit).catch(exit); // eslint-disable-line github/no-then
 

docs/assets/js/search.js

@@ -15,7 +15,7 @@ const fuseOptions = {
   shouldSort: true,
   includeMatches: true,
   matchAllTokens: true,
-  threshold: 0.0, // for parsing diacritics
+  threshold: 0, // for parsing diacritics
   tokenize: true,
   location: 0,
   distance: 100,
@@ -52,25 +52,25 @@ function doSearch() {
     executeSearch(searchQuery);
   } else {
     const para = document.createElement('P');
-    para.innerText = 'Please enter a word or phrase above';
+    para.textContent = 'Please enter a word or phrase above';
     document.getElementById('search-results').appendChild(para);
   }
 }
 
 function getJSON(url, fn) {
   const request = new XMLHttpRequest();
   request.open('GET', url, true);
-  request.onload = function () {
+  request.addEventListener('load', () => {
     if (request.status >= 200 && request.status < 400) {
       const data = JSON.parse(request.responseText);
       fn(data);
     } else {
       console.error(`Target reached on ${url} with error ${request.status}`);
     }
-  };
-  request.onerror = function () {
+  });
+  request.addEventListener('error', () => {
     console.error(`Connection error ${request.status}`);
-  };
+  });
   request.send();
 }
 
@@ -84,20 +84,20 @@ function executeSearch(searchQuery) {
       populateResults(result);
     } else {
       const para = document.createElement('P');
-      para.innerText = 'No matches found';
+      para.textContent = 'No matches found';
       document.getElementById('search-results').appendChild(para);
     }
   });
 }
 
 function populateResults(result) {
-  result.forEach((value, key) => {
+  for (const [key, value] of result.entries()) {
     const content = value.item.contents;
     let snippet = '';
     const snippetHighlights = [];
     if (fuseOptions.tokenize) {
       snippetHighlights.push(searchQuery);
-      value.matches.forEach((mvalue) => {
+      for (const mvalue of value.matches) {
         if (mvalue.key === 'tags' || mvalue.key === 'categories') {
           snippetHighlights.push(mvalue.value);
         } else if (mvalue.key === 'contents') {
@@ -111,7 +111,7 @@ function populateResults(result) {
             snippetHighlights.push(mvalue.value.substring(mvalue.indices[0][0], mvalue.indices[0][1] - mvalue.indices[0][0] + 1));
           }
         }
-      });
+      }
     }
 
     if (snippet.length < 1) {
@@ -130,10 +130,10 @@ function populateResults(result) {
     });
     document.getElementById('search-results').appendChild(htmlToElement(output));
 
-    snippetHighlights.forEach((snipvalue) => {
+    for (const snipvalue of snippetHighlights) {
       new Mark(document.getElementById(`summary-${key}`)).mark(snipvalue);
-    });
-  });
+    }
+  }
 }
 
 function render(templateString, data) {