Linting, so much linting

I installed and configured stylelint and eslint, and added an editorconfig as well as a vscode recommended extensions file.

The reason the diff is so large is I ran the linters and fixed all the linting issues.

docs/index.html

@@ -22,15 +22,6 @@
     <meta name="msapplication-TileColor" content="#00aba9" />
     <meta name="msapplication-config" content="./icons/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
-    <!-- Use bright favicons when the browser is in dark mode. -->
-    <script type="module">
-      import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
-      faviconSwitcher([
-        { element: '#icon-ico', href: { dark: './icons/light-favicon.ico' } },
-        { element: '#icon-16', href: { dark: './icons/light-favicon-16x16.png' } },
-        { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } },
-      ])
-    </script>
 
     <!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
     <link rel="preload" as="style" href="./water.css/dark-legacy.standalone.min.css" />
@@ -71,12 +62,20 @@
       }
     </script>
 
+    <!-- Use bright favicons when the browser is in dark mode. -->
+    <script type="module">
+      import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
+      faviconSwitcher([
+        { element: '#icon-ico', href: { dark: './icons/light-favicon.ico' } },
+        { element: '#icon-16', href: { dark: './icons/light-favicon-16x16.png' } },
+        { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
+      ])
+    </script>
+
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-116663597-6"></script>
     <script>
       window.dataLayer = window.dataLayer || []
-      function gtag() {
-        dataLayer.push(arguments)
-      }
+      const gtag = (...args) => window.dataLayer.push(args)
       gtag('js', new Date())
       gtag('config', 'UA-116663597-6')
     </script>

docs/script.js

@@ -40,7 +40,7 @@ const FILE_SIZES = {
   'light.min.css': 1.4,
   'light.standalone.min.css': 1.3,
   'light-legacy.min.css': 0.178 + 1.16 + 1.15,
-  'light-legacy.standalone.min.css': 1.15,
+  'light-legacy.standalone.min.css': 1.15
 }
 
 /** Takes in version options and returns the respective CSS file name. */
@@ -81,31 +81,30 @@ const getFileSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStand
 const externalElements = {
   _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),
   _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),
-  _removeStartupStylesheet() {
+  _removeStartupStylesheet: () => {
     const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')
     if (startupStylesheet) document.head.removeChild(startupStylesheet)
-    const that = externalElements
-    that._stylesheet.removeEventListener('load', that._removeStartupStylesheet)
+    externalElements._stylesheet.removeEventListener('load', externalElements._removeStartupStylesheet)
   },
-  _updateProductHunt(/** @type {Theme} */ theme) {
-    this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)
+  _updateProductHunt: (/** @type {Theme} */ theme) => {
+    externalElements._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)
   },
-  _updateStylesheet(/** @type {FileName} */ fileName) {
-    this._stylesheet.href = DEV_BASE + fileName
+  _updateStylesheet: (/** @type {FileName} */ fileName) => {
+    externalElements._stylesheet.href = DEV_BASE + fileName
   },
 
   /** Sets up listener to remove startup version of water.css when right one loads, then updates */
-  init(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {
-    this._stylesheet.addEventListener('load', this._removeStartupStylesheet)
-    this.update(options, preferedTheme)
+  init: (/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) => {
+    externalElements._stylesheet.addEventListener('load', externalElements._removeStartupStylesheet)
+    externalElements.update(options, preferedTheme)
   },
   /** Takes current version + the user's prefered scheme and updates all external elements. */
-  update(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {
+  update: (/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) => {
     const displayedTheme = options.isStandalone ? options.theme : preferedTheme || options.theme
 
-    this._updateStylesheet(getFileName(options))
-    this._updateProductHunt(displayedTheme)
-  },
+    externalElements._updateStylesheet(getFileName(options))
+    externalElements._updateProductHunt(displayedTheme)
+  }
 }
 
 /**
@@ -124,65 +123,65 @@ const themeFromParams = queryParams.get('theme')
 const initialVersionOptions = {
   theme: themeFromParams === 'dark' || themeFromParams === 'light' ? themeFromParams : 'dark',
   isLegacy: queryParams.has('legacy') || !supportsCssVars,
-  isStandalone: queryParams.has('standalone'),
+  isStandalone: queryParams.has('standalone')
 }
 
-new w.Vue({
+new w.Vue({ // eslint-disable-line no-new
   el: '#installation',
   filters: {
-    capitalize: (/** @type {string} */ str) => str.charAt(0).toUpperCase() + str.slice(1),
+    capitalize: (/** @type {string} */ str) => str.charAt(0).toUpperCase() + str.slice(1)
   },
   /** @type {VueData} */
   data: {
     versionOptions: initialVersionOptions,
     preferedColorScheme: null,
-    copyStatus: null,
+    copyStatus: null
   },
   computed: {
     /** @returns {boolean} */
-    isOverwritten() {
+    isOverwritten () {
       const { isStandalone, theme } = this.versionOptions
       if (isStandalone || !this.preferedColorScheme) return false
       return theme !== this.preferedColorScheme
     },
     /** @returns {{ fileName: string, fileSize: string, fileSnippet: string }} */
-    selectedVersion() {
+    selectedVersion () {
       return {
         fileName: getFileName(this.versionOptions),
         fileSize: getFileSize(this.versionOptions).toFixed(2),
-        fileSnippet: getFileSnippet(this.versionOptions),
+        fileSnippet: getFileSnippet(this.versionOptions)
       }
-    },
+    }
   },
-  created() {
+  created () {
     createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
     createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
 
     externalElements.init(this.versionOptions, this.preferedColorScheme)
   },
   methods: {
-    getTooltipMessage(/** @type {Theme} */ theme) {
+    getTooltipMessage (/** @type {Theme} */ theme) {
       if (this.versionOptions.theme === theme && this.isOverwritten) {
         return 'Your theme selection is currently overwritten by the theme setting on your device.'
       } else return "Selected theme can be overwritten by theme setting on user's device."
     },
-    copyToClipboard() {
+    copyToClipboard () {
       Promise.resolve()
         .then(() => w.clipboard.writeText(this.selectedVersion.fileSnippet))
         .then(() => (this.copyStatus = 'success'))
         .catch(() => (this.copyStatus = 'failed'))
       setTimeout(() => (this.copyStatus = null), 1000)
-    },
+    }
   },
   watch: {
-    preferedColorScheme(/** @type {Theme} */ nextScheme) {
+    preferedColorScheme (/** @type {Theme} */ nextScheme) {
       externalElements.update(this.versionOptions, nextScheme)
     },
     versionOptions: {
       deep: true,
-      handler(/** @type {VersionOptions} */ nextOptions) {
+      handler (/** @type {VersionOptions} */ nextOptions) {
         externalElements.update(nextOptions, this.preferedColorScheme)
-      },
-    },
-  },
+      }
+    }
+  }
 })