Misc JS linting and naming tweaks (#10652)

- lowercase all js filenames except Vue components
- enable new lint rules, mostly focused on shorter code
- autofix new lint violations
- apply misc transformations indexOf -> includes and onevent-> addEventListener

Co-authored-by: Antoine GIRARD <sapk@users.noreply.github.com>

web_src/js/features/clipboard.js

@@ -2,7 +2,7 @@ export default async function initClipboard() {
   const els = document.querySelectorAll('.clipboard');
   if (!els || !els.length) return;
 
-  const { default: ClipboardJS } = await import(/* webpackChunkName: "clipboard" */'clipboard');
+  const {default: ClipboardJS} = await import(/* webpackChunkName: "clipboard" */'clipboard');
 
   const clipboard = new ClipboardJS(els);
   clipboard.on('success', (e) => {

web_src/js/features/contextpopup.js

@@ -1,6 +1,6 @@
-import { svg } from '../utils.js';
+import {svg} from '../utils.js';
 
-const { AppSubUrl } = window.config;
+const {AppSubUrl} = window.config;
 
 export default function initContextPopups() {
   const refIssues = $('.ref-issue');
@@ -14,7 +14,7 @@ export default function initContextPopups() {
 
 function issuePopup(owner, repo, index, $element) {
   $.get(`${AppSubUrl}/api/v1/repos/${owner}/${repo}/issues/${index}`, (issue) => {
-    const createdAt = new Date(issue.created_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+    const createdAt = new Date(issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
 
     let body = issue.body.replace(/\n+/g, ' ');
     if (body.length > 85) {

web_src/js/features/dropzone.js

@@ -1,5 +1,5 @@
 export default async function createDropzone(el, opts) {
-  const [{ default: Dropzone }] = await Promise.all([
+  const [{default: Dropzone}] = await Promise.all([
     import(/* webpackChunkName: "dropzone" */'dropzone'),
     import(/* webpackChunkName: "dropzone" */'dropzone/dist/dropzone.css'),
   ]);

web_src/js/features/gitgraph.js

@@ -2,7 +2,7 @@ export default async function initGitGraph() {
   const graphCanvas = document.getElementById('graph-canvas');
   if (!graphCanvas) return;
 
-  const { default: gitGraph } = await import(/* webpackChunkName: "gitgraph" */'../vendor/gitGraph.js');
+  const {default: gitGraph} = await import(/* webpackChunkName: "gitgraph" */'../vendor/gitgraph.js');
 
   const graphList = [];
   $('#graph-raw-list li span.node-relation').each(function () {

web_src/js/features/userheatmap.js

@@ -1,12 +1,12 @@
 import Vue from 'vue';
 
-const { AppSubUrl, heatmapUser } = window.config;
+const {AppSubUrl, heatmapUser} = window.config;
 
 export default async function initHeatmap() {
   const el = document.getElementById('user-heatmap');
   if (!el) return;
 
-  const { CalendarHeatmap } = await import(/* webpackChunkName: "userheatmap" */'vue-calendar-heatmap');
+  const {CalendarHeatmap} = await import(/* webpackChunkName: "userheatmap" */'vue-calendar-heatmap');
   Vue.component('calendarHeatmap', CalendarHeatmap);
 
   const vueDelimeters = ['${', '}'];
@@ -59,7 +59,7 @@ export default async function initHeatmap() {
           const chartData = [];
           for (let i = 0; i < chartRawData.length; i++) {
             self.totalContributions += chartRawData[i].contributions;
-            chartData[i] = { date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions };
+            chartData[i] = {date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions};
           }
           self.values = chartData;
           self.isLoading = false;