Merge pull request #14673 from vector-im/joriks/eslint-config

Configure eslint package and fix lint issues

.eslintrc.js

@@ -1,3 +1,23 @@
 module.exports = {
-    extends: ["./node_modules/matrix-react-sdk/.eslintrc.js"],
+    "extends": ["matrix-org", "matrix-org/react"],
+    "env": {
+        "browser": true,
+        "node": true,
+    },
+    "rules": {
+        "quotes": "off",
+    },
+    "overrides": [{
+        "files": ["src/**/*.{ts, tsx}"],
+        "extends": ["matrix-org/ts", "matrix-org/react"],
+        "env": {
+            "browser": true,
+        },
+        "rules": {
+            "quotes": "off",
+            // While converting to ts we allow this
+            "@typescript-eslint/no-explicit-any": "off",
+            "prefer-promise-reject-errors": "off",
+        },
+    }],
 }

package.json

@@ -49,9 +49,8 @@
     "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,riot-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js\"",
     "start:res": "yarn build:jitsi && node scripts/copy-res.js -w",
     "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development",
-    "lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style",
+    "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
     "lint:js": "eslint src",
-    "lint:ts": "echo 'We don't actually have a typescript linter at this layer because tslint is being removed from our stack. Presumably your TS is fine.'",
     "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint 'res/css/**/*.scss'",
     "test": "jest"
@@ -101,8 +100,9 @@
     "concurrently": "^4.0.1",
     "cpx": "^1.3.2",
     "css-loader": "^3.3.2",
-    "eslint": "^5.8.0",
+    "eslint": "7.3.1",
     "eslint-config-google": "^0.7.1",
+    "eslint-config-matrix-org": "^0.1.2",
     "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-flowtype": "^2.50.3",
     "eslint-plugin-jest": "^23.0.4",

src/components/structures/VectorEmbeddedPage.js

@@ -29,6 +29,7 @@ export default class VectorEmbeddedPage extends EmbeddedPage {
     translate(s) {
         s = sanitizeHtml(_t(s));
         // ugly fix for https://github.com/vector-im/riot-web/issues/4243
+        // eslint-disable-next-line max-len
         s = s.replace(/\[matrix\]/, '<a href="https://matrix.org" target="_blank" rel="noreferrer noopener"><img width="79" height="34" alt="[matrix]" style="padding-left: 1px;vertical-align: middle" src="welcome/images/matrix.svg"/></a>');
         return s;
     }

src/favicon.ts

@@ -52,7 +52,7 @@ export default class Favicon {
     private context: CanvasRenderingContext2D;
     private icons: HTMLLinkElement[];
 
-    private isReady: boolean = false;
+    private isReady = false;
     // callback to run once isReady is asserted, allows for a badge to be queued for when it can be shown
     private readyCb = () => {};
 

src/vector/getconfig.ts

@@ -18,7 +18,7 @@ import request from 'browser-request';
 
 // Load the config file. First try to load up a domain-specific config of the
 // form "config.$domain.json" and if that fails, fall back to config.json.
-export async function getVectorConfig(relativeLocation: string='') {
+export async function getVectorConfig(relativeLocation='') {
     if (relativeLocation !== '' && !relativeLocation.endsWith('/')) relativeLocation += '/';
 
     const specificConfigPromise = getConfig(`${relativeLocation}config.${document.domain}.json`);

src/vector/index.ts

@@ -175,8 +175,12 @@ async function start() {
             if (error.err && error.err instanceof SyntaxError) {
                 // This uses the default brand since the app config is unavailable.
                 return showError(_t("Your Element is misconfigured"), [
-                    _t("Your Element configuration contains invalid JSON. Please correct the problem and reload the page."),
-                    _t("The message from the parser is: %(message)s", { message: error.err.message || _t("Invalid JSON")}),
+                    _t("Your Element configuration contains invalid JSON. " +
+                        "Please correct the problem and reload the page."),
+                    _t(
+                        "The message from the parser is: %(message)s",
+                        { message: error.err.message || _t("Invalid JSON") },
+                    ),
                 ]);
             }
             return showError(_t("Unable to load config file: please refresh the page to try again."));
@@ -210,6 +214,7 @@ start().catch(err => {
     // with some basic styling to make the iframe full page
     delete document.body.style.height;
     const iframe = document.createElement("iframe");
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore - typescript seems to only like the IE syntax for iframe sandboxing
     iframe["sandbox"] = "";
     iframe.src = supportedBrowser ? "static/unable-to-load.html" : "static/incompatible-browser.html";

src/vector/jitsi/index.ts

@@ -23,7 +23,7 @@ import { Capability, WidgetApi } from "matrix-react-sdk/src/widgets/WidgetApi";
 // Dev note: we use raw JS without many dependencies to reduce bundle size.
 // We do not need all of React to render a Jitsi conference.
 
-declare var JitsiMeetExternalAPI: any;
+declare let JitsiMeetExternalAPI: any;
 
 let inConference = false;
 
@@ -36,7 +36,7 @@ let userId: string;
 
 let widgetApi: WidgetApi;
 
-(async function () {
+(async function() {
     try {
         // The widget's options are encoded into the fragment to avoid leaking info to the server. The widget
         // spec on the other hand requires the widgetId and parentUrl to show up in the regular query string.

src/vector/mobile_guide/index.js

@@ -29,7 +29,7 @@ function renderConfigError(message) {
 async function initPage() {
     document.getElementById('back_to_element_button').onclick = onBackToElementClick;
 
-    let config = await getVectorConfig('..');
+    const config = await getVectorConfig('..');
 
     // We manually parse the config similar to how validateServerConfig works because
     // calling that function pulls in roughly 4mb of JS we don't use.