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>

Author: silverwind

.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

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

package-lock.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",

package.json

@@ -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}}
 

templates/base/footer.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());

templates/repo/diff/box.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))}}