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>

.eslintrc

@@ -5,7 +5,7 @@ extends:
   - eslint:recommended
 
 ignorePatterns:
- - /web_src/js/vendor
+  - /web_src/js/vendor
 
 parserOptions:
   ecmaVersion: 2020
@@ -26,19 +26,22 @@ globals:
 
 rules:
   arrow-body-style: [0]
+  arrow-parens: [2, always]
   camelcase: [0]
   comma-dangle: [2, only-multiline]
   consistent-return: [0]
   default-case: [0]
   func-names: [0]
-  import/extensions: [0]
+  import/extensions: [2, always, {ignorePackages: true}]
   import/prefer-default-export: [0]
   max-len: [0]
+  multiline-comment-style: [2, separate-lines]
   newline-per-chained-call: [0]
   no-alert: [0]
   no-cond-assign: [2, except-parens]
   no-console: [1, {allow: [info, warn, error]}]
   no-continue: [0]
+  no-eq-null: [2]
   no-mixed-operators: [0]
   no-multi-assign: [0]
   no-new: [0]
@@ -49,8 +52,12 @@ rules:
   no-unused-vars: [2, {args: all, argsIgnorePattern: ^_, varsIgnorePattern: ^_, ignoreRestSiblings: true}]
   no-use-before-define: [0]
   no-var: [2]
+  object-curly-spacing: [2, never]
   one-var-declaration-per-line: [0]
   one-var: [0]
+  operator-linebreak: [2, after]
   prefer-const: [2, {destructuring: all}]
   prefer-destructuring: [0]
+  quotes: [2, single, {avoidEscape: true, allowTemplateLiterals: true}]
   radix: [2, as-needed]
+  semi: [2, always, {omitLastInOneLineBlock: true}]

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;

web_src/js/publicpath.js

@@ -1,5 +1,5 @@
-/* This sets up webpack's chunk loading to load resources from the 'public'
-  directory. This file must be imported before any lazy-loading is being attempted. */
+// This sets up webpack's chunk loading to load resources from the 'public'
+// directory. This file must be imported before any lazy-loading is being attempted.
 
 if (document.currentScript && document.currentScript.src) {
   const url = new URL(document.currentScript.src);

webpack.config.js

@@ -9,11 +9,11 @@ const PostCSSSafeParser = require('postcss-safe-parser');
 const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const { statSync } = require('fs');
-const { resolve, parse } = require('path');
-const { SourceMapDevToolPlugin } = require('webpack');
+const {statSync} = require('fs');
+const {resolve, parse} = require('path');
+const {SourceMapDevToolPlugin} = require('webpack');
 
-const glob = (pattern) => fastGlob.sync(pattern, { cwd: __dirname, absolute: true });
+const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true});
 
 const themes = {};
 for (const path of glob('web_src/less/themes/*.less')) {
@@ -157,7 +157,7 @@ module.exports = {
               extract: true,
               spriteFilename: 'img/svg/icons.svg',
               symbolId: (path) => {
-                const { name } = parse(path);
+                const {name} = parse(path);
                 if (/@primer[/\\]octicons/.test(path)) {
                   return `octicon-${name}`;
                 }
@@ -194,7 +194,7 @@ module.exports = {
     }),
     new CopyPlugin([
       // workaround for https://github.com/go-gitea/gitea/issues/10653
-      { from: 'node_modules/fomantic-ui/dist/semantic.min.css', to: 'fomantic/semantic.min.css' },
+      {from: 'node_modules/fomantic-ui/dist/semantic.min.css', to: 'fomantic/semantic.min.css'},
     ]),
   ],
   performance: {