refactor(ui): linting typescript in svelte components (#847)

Closes #801

***
* proof-of-concept linting typescript in svelte components
* rm console log
* linting fixups
* prettier
Co-authored-by: Alexander Simmerl <a.simmerl@gmail.com>

.buildkite/run.sh

@@ -41,15 +41,15 @@ echo "--- Run proxy fmt"
 echo "--- Run proxy lints"
 (cd proxy && time cargo clippy --all --all-features --all-targets -Z unstable-options -- --deny warnings)
 
+echo "--- Run app svelte checks"
+time yarn svelte:check
+
 echo "--- Run app eslint checks"
 time yarn lint
 
 echo "--- Run app prettier checks"
 time yarn prettier:check
 
-echo "--- Run app svelte checks"
-time yarn svelte:check
-
 echo "--- Run proxy tests"
 (cd proxy && time cargo test --all --all-features --all-targets)
 

.eslintrc.js

@@ -0,0 +1,55 @@
+const eslintSveltePreprocess = require("eslint-svelte3-preprocess");
+const svelteConfig = require("./svelte.config");
+
+module.exports = {
+  env: {
+    node: true,
+    browser: true,
+  },
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    createDefaultProgram: true,
+    ecmaVersion: 2019,
+    sourceType: "module",
+  },
+  extends: ["eslint:recommended"],
+  plugins: ["svelte3", "@typescript-eslint"],
+  overrides: [
+    {
+      files: ["*.svelte"],
+      processor: "svelte3/svelte3",
+    },
+    {
+      files: ["*.ts", "*.json"],
+      extends: ["plugin:@typescript-eslint/recommended"],
+    },
+  ],
+  rules: {
+    // Disallow Unused Variables
+    // https://eslint.org/docs/rules/no-unused-vars
+    "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+    // require using arrow functions as callbacks
+    // https://eslint.org/docs/rules/prefer-arrow-callback
+    "prefer-arrow-callback": "error",
+    // require using template literals instead of string concatenation
+    // http://eslint.org/docs/rules/prefer-template
+    "prefer-template": "error",
+    // require using of const declaration for variables that are never modified after declared
+    // https://eslint.org/docs/rules/prefer-const
+    "prefer-const": "error",
+    // disallow modifying variables that are declared using const
+    // https://eslint.org/docs/rules/no-const-assign
+    "no-const-assign": "error",
+    // require let or const instead of var
+    // https://eslint.org/docs/rules/no-var
+    "no-var": "error",
+
+    // require at least one whitespace after comments( // and /*)
+    // https://eslint.org/docs/rules/spaced-comment
+    "spaced-comment": ["warn", "always"],
+  },
+  settings: {
+    "svelte3/preprocess": eslintSveltePreprocess(svelteConfig.preprocess),
+  },
+};

cypress/plugins/index.js

@@ -12,7 +12,7 @@
 // the project's config changing)
 
 // eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
+module.exports = (_on, _config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 };

package.json

@@ -65,21 +65,23 @@
     "@types/marked": "^1.1.0",
     "@types/node": "^14.0.23",
     "@types/twemoji": "^12.1.1",
-    "@typescript-eslint/eslint-plugin": "^3.6.1",
-    "@typescript-eslint/parser": "^3.6.1",
+    "@typescript-eslint/eslint-plugin": "^3.10.0",
+    "@typescript-eslint/parser": "^3.10.0",
     "babel-eslint": "^10.1.0",
     "chokidar": "^3.4.1",
     "cypress": "^4.10.0",
     "electron": "^9.1.0",
     "electron-builder": "^22.6.0",
-    "eslint": "^7.5.0",
+    "eslint": "^7.7.0",
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-no-only-tests": "^2.4.0",
     "eslint-plugin-svelte3": "^2.7.3",
+    "eslint-svelte3-preprocess": "^0.0.4",
     "husky": ">=4.2.3",
     "jest": "^26.1.0",
     "lint-staged": "^10.2.11",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^6.2.2",
     "prettier": "^2.0.5",
     "prettier-plugin-svelte": "^1.1.0",
     "rollup": "^2.22.1",
@@ -93,12 +95,12 @@
     "sirv-cli": "^1.0.3",
     "standard-version": "^8.0.2",
     "svelte": "^3.24.0",
-    "svelte-check": "^0.1.55",
-    "svelte-preprocess": "^4.0.8",
+    "svelte-check": "^1.0.31",
+    "svelte-preprocess": "^4.0.0",
     "svelte-spa-router": "^2.2.0",
     "ts-jest": "^26.1.3",
     "ts-node": "^8.10.1",
-    "typescript": "^3.9.7",
+    "typescript": "^4.0.2",
     "wait-on": "^5.1.0"
   },
   "scripts": {
@@ -128,6 +130,7 @@
     "cypress:open": "yarn run cypress open",
     "release": "babel-node --presets \"@babel/env\" scripts/release.js",
     "release:finalize": "babel-node --presets \"@babel/env\" scripts/release.js --finalize",
+    "postinstall": "patch-package",
     "prettier": "prettier \"**/*.@(js|ts|json|svelte|css|html)\" --ignore-path .gitignore",
     "prettier:check": "yarn prettier --check",
     "prettier:write": "yarn prettier --write",