Enable linting of JS inside templates (#13708)

Indentation-related rules are disabled because indent templates with
tabs but our lint rules expect spaces.

Also had to exclude a few files where using template variables in the JS
is causing syntax errors for the JS parser. I don't think there's a way
to solve this otherwise.

Co-authored-by: Lauris BH <lauris@nix.lv>

7 files changed, 81 insertions, 9 deletions

diff --git a/.eslintrc b/.eslintrc
index 398d1a610f..f289e79b91 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,6 +3,9 @@ reportUnusedDisableDirectives: true
 
 ignorePatterns:
   - /web_src/js/vendor
+  - /templates/base/head.tmpl
+  - /templates/repo/activity.tmpl
+  - /templates/repo/view_file.tmpl
 
 parserOptions:
   sourceType: module
@@ -12,6 +15,7 @@ plugins:
   - eslint-plugin-unicorn
   - eslint-plugin-import
   - eslint-plugin-vue
+  - eslint-plugin-html
 
 extends:
   - plugin:vue/recommended
@@ -27,12 +31,19 @@ globals:
   SimpleMDE: false
   u2fApi: false
 
+settings:
+  html/html-extensions: [".tmpl"]
+
 overrides:
-  - files: ["web_src/**/*.js", "web_src/**/*.vue"]
+  - files: ["web_src/**/*.js", "web_src/**/*.vue", "templates/**/*.tmpl"]
     env:
       browser: true
       jquery: true
       node: false
+  - files: ["templates/**/*.tmpl"]
+    rules:
+      no-tabs: [0]
+      indent: [2, tab, {SwitchCase: 1}]
   - files: ["web_src/**/*worker.js"]
     env:
       worker: true
diff --git a/Makefile b/Makefile
index 3c13045756..0321800e1c 100644
--- a/Makefile
+++ b/Makefile
@@ -312,7 +312,7 @@ lint: lint-frontend lint-backend
 
 .PHONY: lint-frontend
 lint-frontend: node_modules
-	npx eslint --max-warnings=0 web_src/js build webpack.config.js
+	npx eslint --max-warnings=0 web_src/js build templates webpack.config.js
 	npx stylelint --max-warnings=0 web_src/less
 
 .PHONY: lint-backend
diff --git a/package-lock.json b/package-lock.json
index 41023754b4..af1f4c9622 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5100,6 +5100,66 @@
         }
       }
     },
+    "eslint-plugin-html": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.1.1.tgz",
+      "integrity": "sha512-JSe3ZDb7feKMnQM27XWGeoIjvP4oWQMJD9GZ6wW67J7/plVL87NK72RBwlvfc3tTZiYUchHhxAwtgEd1GdofDA==",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "^5.0.1"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz",
+          "integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
+          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
+          "dev": true
+        },
+        "domhandler": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
+          "integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "domutils": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.2.tgz",
+          "integrity": "sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.3.0"
+          }
+        },
+        "htmlparser2": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-5.0.1.tgz",
+          "integrity": "sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.3.0",
+            "domutils": "^2.4.2",
+            "entities": "^2.0.0"
+          }
+        }
+      }
+    },
     "eslint-plugin-import": {
       "version": "2.22.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz",
diff --git a/package.json b/package.json
index 674c1f1451..d563c92aeb 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
   },
   "devDependencies": {
     "eslint": "7.13.0",
+    "eslint-plugin-html": "6.1.1",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-unicorn": "23.0.0",
     "eslint-plugin-vue": "7.1.0",
diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index c8e9674fba..bc45315ef9 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -16,7 +16,7 @@
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js"></script>
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js"></script>
 	<script>
-		CodeMirror.modeURL =  "{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/%N/%N.js";
+		CodeMirror.modeURL = '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/%N/%N.js';
 	</script>
 {{end}}
 
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index d34d9b8fd9..d278e94457 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -278,14 +278,14 @@
 
 		{{if .IsSplitStyle}}
 			<script>
-				document.addEventListener('DOMContentLoaded', function() {
+				document.addEventListener('DOMContentLoaded', () => {
 					$('tr.add-code').each(function() {
-						var prev = $(this).prev();
-						if(prev.is('.del-code') && prev.children().eq(5).text().trim() === '') {
-							while(prev.prev().is('.del-code') && prev.prev().children().eq(5).text().trim() === '') {
+						let prev = $(this).prev();
+						if (prev.is('.del-code') && prev.children().eq(5).text().trim() === '') {
+							while (prev.prev().is('.del-code') && prev.prev().children().eq(5).text().trim() === '') {
 								prev = prev.prev();
 							}
-							prev.children().eq(3).attr("data-line-num", $(this).children().eq(3).attr("data-line-num"));
+							prev.children().eq(3).attr('data-line-num', $(this).children().eq(3).attr('data-line-num'));
 							prev.children().eq(3).html($(this).children().eq(3).html());
 							prev.children().eq(4).html($(this).children().eq(4).html());
 							prev.children().eq(5).html($(this).children().eq(5).html());
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index ee3406fac6..73508bdd2f 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -135,7 +135,7 @@
 							if (httpsButton) httpsButton.classList[isSSH ? 'remove' : 'add']('primary');
 							setTimeout(() => {
 								if (sshButton) sshButton.classList.remove('no-transition');
-								if (httpsButto) httpsButton.classList.remove('no-transition');
+								if (httpsButton) httpsButton.classList.remove('no-transition');
 							}, 100);
 						</script>
 						{{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}