Add Typescript eslint

.eslintrc

@@ -1,9 +1,16 @@
 {
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
-  "parser": "@babel/eslint-parser",
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "requireConfigFile": false,
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2019,
     "ecmaFeatures": {
       "jsx": true,
       "modules": true,
@@ -15,7 +22,8 @@
     "commonjs": true,
     "es6": true
   },
-  "plugins": ["react"],
+  "ignorePatterns": ["*.scss.d.ts"],
+  "plugins": ["react", "react-hooks", "@typescript-eslint"],
   "globals": {
     "process": true
   },
@@ -25,221 +33,97 @@
     }
   },
   "rules": {
-    "react/jsx-no-undef": 0,
+    "react-hooks/exhaustive-deps": "error",
+    "react/jsx-boolean-value": ["error", "never", { "always": [] }],
+    "react/no-arrow-function-lifecycle": "error",
+    "react/no-invalid-html-attribute": "error",
+    "react/jsx-no-useless-fragment": "error",
+    "react/jsx-no-constructed-context-values": "error",
+    "react/jsx-fragments": ["error", "syntax"],
+    "react/jsx-no-duplicate-props": ["error", { "ignoreCase": true }],
+    "react/jsx-pascal-case": [
+      "error",
+      {
+        "allowAllCaps": true,
+        "ignore": []
+      }
+    ],
+    "react/no-danger": "warn",
+    "react/no-did-update-set-state": "error",
+    "react/no-will-update-set-state": "error",
+    "react/self-closing-comp": "error",
+    "react/jsx-no-undef": ["error", { "allowGlobals": true }],
 
     /*Possible Errors */
-    "no-cond-assign": [1, "except-parens"],
-    "no-console": 0,
-    "no-constant-condition": 1,
-    "no-control-regex": 1,
-    "no-debugger": 1,
-    "no-dupe-args": 1,
-    "no-dupe-keys": 1,
-    "no-duplicate-case": 0,
-    "no-empty-character-class": 1,
-    "no-empty": 0,
-    "no-ex-assign": 1,
-    "no-extra-boolean-cast": 1,
-    "no-extra-parens": 0,
-    "no-extra-semi": 1,
-    "no-func-assign": 1,
+    "no-console": "off",
     "no-inner-declarations": [1, "functions"],
-    "no-invalid-regexp": 1,
-    "no-irregular-whitespace": 1,
-    "no-negated-in-lhs": 1,
-    "no-obj-calls": 1,
-    "no-regex-spaces": 1,
-    "no-reserved-keys": 0,
-    "no-sparse-arrays": 1,
-    "no-unexpected-multiline": 1,
-    "no-unreachable": 1,
-    "use-isnan": 1,
-    "valid-jsdoc": 0,
-    "valid-typeof": 1,
 
     /* Best Practices */
-    "accessor-pairs": 0,
-    "block-scoped-var": 0, // see Babel section
-    "complexity": 0,
-    "consistent-return": 0,
-    "curly": 0,
-    "default-case": 0,
-    "dot-notation": [
-      0,
-      {
-        "allowKeywords": true,
-        "allowPattern": ""
-      }
-    ],
-    "dot-location": [1, "property"],
-    "eqeqeq": 1,
-    "guard-for-in": 0,
-    "no-alert": 1,
-    "no-caller": 1,
-    "no-div-regex": 1,
-    "no-else-return": 0,
-    "no-eq-null": 0,
-    "no-eval": 1,
-    "no-extend-native": 1,
-    "no-extra-bind": 0,
+    "eqeqeq": ["error"],
+    "no-alert": ["error"],
+    "no-caller": ["error"],
+    "no-div-regex": ["error"],
+    "no-eval": ["error"],
+    "no-extend-native": ["error"],
     "no-fallthrough": 0,
-    "no-floating-decimal": 1,
-    "no-implied-eval": 1,
-    "no-iterator": 1,
-    "no-labels": 1,
-    "no-lone-blocks": 1,
-    "no-loop-func": 1,
-    "no-multi-spaces": 0,
-    "no-multi-str": 0,
-    "no-native-reassign": 1,
-    "no-new-func": 1,
-    "no-new-wrappers": 1,
-    "no-new": 1,
-    "no-octal-escape": 1,
-    "no-octal": 1,
-    "no-param-reassign": 0,
-    "no-process-env": 0,
-    "no-proto": 1,
-    "no-redeclare": 1,
-    "no-return-assign": 1,
-    "no-script-url": 1,
-    "no-self-compare": 0,
-    "no-sequences": 1,
-    "no-throw-literal": 0,
-    "no-unused-expressions": 0,
-    "no-void": 0,
-    "no-warning-comments": [
-      0,
-      {
-        "terms": ["todo", "tofix"],
-        "location": "start"
-      }
-    ],
-    "no-with": 1,
-    "radix": 1,
-    "vars-on-top": 0,
-    "wrap-iife": [1, "inside"],
-    "yoda": [0, "never"],
+    "no-implied-eval": ["error"],
+    "no-iterator": ["error"],
+    "no-labels": ["error"],
+    "no-lone-blocks": ["error"],
+    "no-loop-func": ["error"],
+    "no-new-func": ["error"],
+    "no-new-wrappers": ["error"],
+    "no-new": ["error"],
+    "no-octal-escape": ["error"],
+    "no-proto": ["error"],
+    "no-return-assign": ["error"],
+    "no-script-url": ["error"],
+    "no-sequences": ["error"],
+    "radix": "error",
 
     /* Strict Mode */
     "strict": [0, "global"],
 
     /* Variables */
-    "no-catch-shadow": 0,
-    "no-delete-var": 1,
     "no-label-var": 1,
-    "no-shadow-restricted-names": 1,
-    "no-shadow": 0,
-    "no-undef-init": 1,
-    "no-undefined": 0,
     "no-unused-vars": [
       1,
       {
         "vars": "local",
         "args": "none"
       }
     ],
-    "no-use-before-define": 0,
 
-    /* Node.js */
-    "handle-callback-err": 0,
-    "no-mixed-requires": 1,
-    "no-new-require": 1,
-    "no-path-concat": 1,
-    "no-process-exit": 1,
-    "no-restricted-modules": [1, ""], // add any unwanted Node.js core modules
-    "no-sync": 1,
-
-    /* Stylistic Issues */
-    "array-bracket-spacing": [0, "never"],
-    "brace-style": [
-      0,
-      "1tbs",
-      {
-        "allowSingleLine": true
-      }
-    ],
     "camelcase": [
       0,
       {
         "properties": "always"
       }
     ],
-    "comma-spacing": [
-      0,
-      {
-        "before": false,
-        "after": true
-      }
-    ],
-    "comma-style": [1, "last"],
-    "comma-dangle": 0,
-    "computed-property-spacing": 0,
-    "consistent-this": 0,
-    "eol-last": 0,
-    "func-names": 0,
-    "func-style": 0,
-    "indent": [0, 4, { "SwitchCase": 1 }],
-    "key-spacing": [
-      0,
-      {
-        "beforeColon": false,
-        "afterColon": true
-      }
-    ],
-    "linebreak-style": 0,
-    "max-nested-callbacks": [0, 3],
-    "new-cap": 0, // see Babel section
-    "new-parens": 1,
-    "newline-after-var": 0,
-    "no-array-constructor": 1,
-    "no-continue": 0,
-    "no-inline-comments": 0,
-    "no-lonely-if": 0,
-    "no-mixed-spaces-and-tabs": 0,
-    "no-multiple-empty-lines": [
-      0,
-      {
-        "max": 1
-      }
-    ],
-    "no-nested-ternary": 0,
+    "no-array-constructor": "error",
     "no-new-object": 1,
-    "no-spaced-func": 0,
-    "no-ternary": 0,
-    "no-trailing-spaces": 0,
-    "no-underscore-dangle": 0,
-    "no-unneeded-ternary": 1,
-    "object-curly-spacing": 0, // see Babel section
-    "one-var": [0, "never"],
-    "padded-blocks": [0, "never"],
-    "quote-props": [0, "as-needed"],
-    "quotes": [0, "single"],
-    "semi-spacing": [
-      1,
-      {
-        "before": false,
-        "after": true
+    "no-unneeded-ternary": 1 /* ECMAScript 6 */,
+    "prefer-const": "error"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "rules": {
+        // @TODO: revise these rules
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "caughtErrorsIgnorePattern": "^_"
+          }
+        ],
+        "@typescript-eslint/ban-ts-comment": "warn",
+        "@typescript-eslint/no-loss-of-precision": "warn",
+        "@typescript-eslint/no-unsafe-declaration-merging": "warn",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/prop-types": "warn"
       }
-    ],
-    "semi": [1, "always"],
-    "sort-vars": 0,
-    "space-after-keywords": 0,
-    "space-before-blocks": [0, "always"],
-    "space-before-function-paren": [0, "never"],
-    "space-in-parens": [0, "never"],
-    "space-infix-ops": 0,
-    "space-unary-ops": 0,
-    "spaced-comment": [0, "always"],
-    "wrap-regex": 0,
-
-    /* ECMAScript 6 */
-    "constructor-super": 1,
-    "generator-star-spacing": 0, // see Babel section
-    "no-this-before-super": 1,
-    "no-var": 0,
-    "object-shorthand": 0, // see Babel section
-    "prefer-const": 1,
-    "no-useless-escape": 0
-  }
+    }
+  ]
 }

CHANGES.md

@@ -11,6 +11,7 @@
 - `WebMapServiceCatalogItem` will drop problematic query parameters from `url` when calling `GetCapabilities` (eg `"styles","srs","crs","format"`)
 - Fixed regression causing explorer window not to display instructions when first opened.
 - [The next improvement]
+- Enable eslint for typescript: plugin:@typescript-eslint/eslint-recommended
 
 #### 8.4.1 - 2023-12-08
 

doc/js/rewrite-links.js

@@ -11,5 +11,7 @@ document.querySelectorAll("a").forEach(function (a) {
       a.target = "_blank";
       a.rel = "noreferrer noopener";
     }
-  } catch {}
+  } catch {
+    /* eslint-disable-line no-empty */
+  }
 });

gulpfile.js

@@ -49,13 +49,11 @@ gulp.task("lint", function (done) {
     "lib",
     "test",
     "--ext",
-    ".jsx",
-    "--ext",
-    ".js",
+    ".jsx,.js,.ts,.tsx",
     "--ignore-pattern",
     "lib/ThirdParty",
     "--max-warnings",
-    "0"
+    "481" // TODO: Bring this back to 0
   ]);
 
   done();

lib/Core/CorsProxy.ts

@@ -101,7 +101,7 @@ export default class CorsProxy {
     }
 
     host = host.toLowerCase();
-    for (var i = 0; i < domains.length; i++) {
+    for (let i = 0; i < domains.length; i++) {
       if (host.match("(^|\\.)" + domains[i] + "$")) {
         return true;
       }
@@ -123,7 +123,7 @@ export default class CorsProxy {
   }
 
   getProxyBaseURL(proxyFlag: string | undefined) {
-    var flag = proxyFlag === undefined ? "" : "_" + proxyFlag + "/";
+    const flag = proxyFlag === undefined ? "" : "_" + proxyFlag + "/";
     return this.baseProxyUrl + flag;
   }
 
@@ -161,8 +161,8 @@ export default class CorsProxy {
       return false;
     }
 
-    var uri = new URI(url);
-    var host = uri.host();
+    const uri = new URI(url);
+    const host = uri.host();
 
     if (host === "") {
       // do not proxy local files

lib/Core/TerriaError.ts

@@ -304,7 +304,7 @@ export default class TerriaError {
 
   /** Has any error in the error tree been raised to the user? */
   get raisedToUser() {
-    return this.flatten().find((error) => error._raisedToUser) ? true : false;
+    return !!this.flatten().find((error) => error._raisedToUser);
   }
 
   /** Resolve error seveirty */

lib/Core/animation.ts

@@ -33,7 +33,7 @@
   });
 
 const animationTimeout = (
   timeoutID: ReturnType<typeof setTimeout> | undefined
 ) =>
   new Promise<void>((_, reject) => {
     timeoutID = setTimeout(() => {
@@ -48,7 +48,7 @@
  */
 
 export const animateEnd = (element: Element | null) => {
-  let timeoutID: ReturnType<typeof setTimeout> | undefined = undefined;
+  const timeoutID: ReturnType<typeof setTimeout> | undefined = undefined;
   return Promise.race([
     transitionEnd(element),
     animationTimeout(timeoutID)