Migrate to eslint-plugin-matrix-org

.eslintrc.js

@@ -1,23 +1,30 @@
 module.exports = {
-    "extends": ["matrix-org", "matrix-org/react"],
-    "env": {
-        "browser": true,
-        "node": true,
+    plugins: ["matrix-org"],
+    extends: [
+        "plugin:matrix-org/babel",
+        "plugin:matrix-org/react",
+    ],
+    env: {
+        browser: true,
+        node: true,
     },
-    "rules": {
+    rules: {
+        // Things we do that break the ideal style
         "quotes": "off",
     },
-    "overrides": [{
-        "files": ["src/**/*.{ts,tsx}"],
-        "extends": ["matrix-org/ts", "matrix-org/react"],
-        "env": {
-            "browser": true,
-        },
-        "rules": {
+    overrides: [{
+        files: ["src/**/*.{ts,tsx}"],
+        extends: [
+            "plugin:matrix-org/typescript",
+            "plugin:matrix-org/react",
+        ],
+        rules: {
+            // Things we do that break the ideal style
+            "prefer-promise-reject-errors": "off",
             "quotes": "off",
-            // While converting to ts we allow this
+
+            // We disable this while we're transitioning
             "@typescript-eslint/no-explicit-any": "off",
-            "prefer-promise-reject-errors": "off",
         },
     }],
 };

babel.config.js

@@ -10,7 +10,6 @@ module.exports = {
             ],
         }],
         "@babel/preset-typescript",
-        "@babel/preset-flow",
         "@babel/preset-react",
     ],
     "plugins": [
@@ -21,7 +20,6 @@ module.exports = {
         "@babel/plugin-proposal-object-rest-spread",
         "@babel/plugin-proposal-optional-chaining",
         "@babel/plugin-proposal-nullish-coalescing-operator",
-        "@babel/plugin-transform-flow-comments",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",
     ],

package.json

@@ -71,6 +71,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.12.10",
+    "@babel/eslint-plugin": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-decorators": "^7.12.12",
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
@@ -79,10 +81,8 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
     "@babel/plugin-proposal-optional-chaining": "^7.12.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-flow-comments": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
@@ -94,8 +94,9 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/sanitize-html": "^2.3.1",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "autoprefixer": "^9.8.6",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "canvas": "^2.6.1",
@@ -104,9 +105,8 @@
     "cpx": "^1.5.0",
     "css-loader": "^3.6.0",
     "eslint": "7.18.0",
-    "eslint-config-matrix-org": "^0.2.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#main",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",

src/@types/global.d.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import "matrix-react-sdk/src/@types/global"; // load matrix-react-sdk's type extensions first
-import type {Renderer} from "react-dom";
+import type { Renderer } from "react-dom";
 
 type ElectronChannel =
     "app_onAction" |

src/async-components/structures/CompatibilityView.tsx

@@ -27,7 +27,7 @@ interface IProps {
 }
 
 const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
-    const {brand, mobileBuilds} = SdkConfig.get();
+    const { brand, mobileBuilds } = SdkConfig.get();
 
     let ios = null;
     const iosCustomUrl = mobileBuilds?.ios;
@@ -71,7 +71,7 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
         android = [];
     }
 
-    let mobileHeader = <h2 id="step2_heading">{_t("Use %(brand)s on mobile", {brand})}</h2>;
+    let mobileHeader = <h2 id="step2_heading">{_t("Use %(brand)s on mobile", { brand })}</h2>;
     if (!android.length && !ios) {
         mobileHeader = null;
     }

src/async-components/structures/ErrorView.tsx

@@ -27,7 +27,7 @@ interface IProps {
     messages?: string[];
 }
 
-const ErrorView: React.FC<IProps> = ({title, messages}) => {
+const ErrorView: React.FC<IProps> = ({ title, messages }) => {
     return <div className="mx_ErrorView">
         <div className="mx_ErrorView_container">
             <div className="mx_HomePage_header">

src/components/views/auth/VectorAuthFooter.tsx

@@ -22,9 +22,9 @@ import { _t } from 'matrix-react-sdk/src/languageHandler';
 const VectorAuthFooter = () => {
     const brandingConfig = SdkConfig.get().branding;
     let links = [
-        {"text": "Blog", "url": "https://element.io/blog"},
-        {"text": "Twitter", "url": "https://twitter.com/element_hq"},
-        {"text": "GitHub", "url": "https://github.com/vector-im/element-web"},
+        { "text": "Blog", "url": "https://element.io/blog" },
+        { "text": "Twitter", "url": "https://twitter.com/element_hq" },
+        { "text": "GitHub", "url": "https://github.com/vector-im/element-web" },
     ];
 
     if (brandingConfig && brandingConfig.authFooterLinks) {

src/components/views/auth/VectorAuthHeaderLogo.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
 
 export default class VectorAuthHeaderLogo extends React.PureComponent {
-    static replaces = 'AuthHeaderLogo'
+    static replaces = 'AuthHeaderLogo';
 
     render() {
         const brandingConfig = SdkConfig.get().branding;

src/components/views/auth/VectorAuthPage.tsx

@@ -19,7 +19,7 @@ import * as sdk from 'matrix-react-sdk/src/index';
 import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
 
 export default class VectorAuthPage extends React.PureComponent {
-    static replaces = 'AuthPage'
+    static replaces = 'AuthPage';
 
     static welcomeBackgroundUrl;
 

src/favicon.ts

@@ -57,7 +57,7 @@ export default class Favicon {
     private readyCb = () => {};
 
     constructor(params: Partial<IParams> = {}) {
-        this.params = {...defaults, ...params};
+        this.params = { ...defaults, ...params };
 
         this.icons = Favicon.getIcons();
         // create work canvas
@@ -125,7 +125,7 @@ export default class Favicon {
     }
 
     private circle(n: number | string, opts?: Partial<IParams>) {
-        const params = {...this.params, ...opts};
+        const params = { ...this.params, ...opts };
         const opt = this.options(n, params);
 
         let more = false;
@@ -214,7 +214,7 @@ export default class Favicon {
         if (!this.isReady) {
             this.readyCb = () => {
                 this.badge(content, opts);
-            }
+            };
             return;
         }
 

src/vector/app.tsx

@@ -25,17 +25,17 @@ window.React = React;
 
 import * as sdk from 'matrix-react-sdk';
 import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
-import {_td, newTranslatableError} from 'matrix-react-sdk/src/languageHandler';
+import { _td, newTranslatableError } from 'matrix-react-sdk/src/languageHandler';
 import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils';
-import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
+import { AutoDiscovery } from "matrix-js-sdk/src/autodiscovery";
 import * as Lifecycle from "matrix-react-sdk/src/Lifecycle";
 import type MatrixChatType from "matrix-react-sdk/src/components/structures/MatrixChat";
-import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
+import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg';
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
 
-import {parseQs, parseQsFromFragment} from './url_utils';
+import { parseQs, parseQsFromFragment } from './url_utils';
 import VectorBasePlatform from "./platform/VectorBasePlatform";
-import {createClient} from "matrix-js-sdk/src/matrix";
+import { createClient } from "matrix-js-sdk/src/matrix";
 
 let lastLocationHashSet: string = null;
 
@@ -257,12 +257,12 @@ async function verifyServerConfig() {
 
         validatedConfig = AutoDiscoveryUtils.buildValidatedConfigFromDiscovery(serverName, discoveryResult, true);
     } catch (e) {
-        const {hsUrl, isUrl, userId} = await Lifecycle.getStoredSessionVars();
+        const { hsUrl, isUrl, userId } = await Lifecycle.getStoredSessionVars();
         if (hsUrl && userId) {
             console.error(e);
             console.warn("A session was found - suppressing config error and using the session's homeserver");
 
-            console.log("Using pre-existing hsUrl and isUrl: ", {hsUrl, isUrl});
+            console.log("Using pre-existing hsUrl and isUrl: ", { hsUrl, isUrl });
             validatedConfig = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl, true);
         } else {
             // the user is not logged in, so scream
@@ -277,7 +277,7 @@ async function verifyServerConfig() {
 
     // Add the newly built config to the actual config for use by the app
     console.log("Updating SdkConfig with validated discovery information");
-    SdkConfig.add({"validated_server_config": validatedConfig});
+    SdkConfig.add({ "validated_server_config": validatedConfig });
 
     return SdkConfig.get();
 }

src/vector/getconfig.ts

@@ -55,7 +55,7 @@ function getConfig(configJsonFilename: string): Promise<{}> {
                                 resolve({});
                             }
                         }
-                        reject({err: err, response: response});
+                        reject({ err: err, response: response });
                         return;
                     }
 
@@ -65,7 +65,7 @@ function getConfig(configJsonFilename: string): Promise<{}> {
                     // loading from the filesystem (see above).
                     resolve(JSON.parse(body));
                 } catch (e) {
-                    reject({err: e});
+                    reject({ err: e });
                 }
             },
         );

src/vector/index.ts

@@ -26,7 +26,7 @@ require('highlight.js/styles/github.css');
 require('katex/dist/katex.css');
 
 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
-import {parseQsFromFragment} from "./url_utils";
+import { parseQsFromFragment } from "./url_utils";
 import './modernizr';
 
 async function settled(...promises: Array<Promise<any>>) {

src/vector/indexeddb-worker.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {IndexedDBStoreWorker} from 'matrix-js-sdk/src/indexeddb-worker.js';
+import { IndexedDBStoreWorker } from 'matrix-js-sdk/src/indexeddb-worker.js';
 
 const remoteWorker = new IndexedDBStoreWorker(postMessage);
 

src/vector/init.tsx

@@ -31,10 +31,9 @@ import PWAPlatform from "./platform/PWAPlatform";
 import WebPlatform from "./platform/WebPlatform";
 import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
-import {setTheme} from "matrix-react-sdk/src/theme";
-
-import {initRageshake, initRageshakeStore} from "./rageshakesetup";
+import { setTheme } from "matrix-react-sdk/src/theme";
 
+import { initRageshake, initRageshakeStore } from "./rageshakesetup";
 
 export const rageshakePromise = initRageshake();
 

src/vector/jitsi/index.ts

@@ -18,7 +18,7 @@ limitations under the License.
 require("./index.scss");
 
 import * as qs from 'querystring';
-import {KJUR} from 'jsrsasign';
+import { KJUR } from 'jsrsasign';
 import {
     IOpenIDCredentials,
     IWidgetApiRequest,
@@ -138,7 +138,7 @@ let meetApi: any; // JitsiMeetExternalAPI
                         });
                         widgetApi.transport.reply(ev.detail, {}); // ack
                     } else {
-                        widgetApi.transport.reply(ev.detail, {error: {message: "Conference not joined"}});
+                        widgetApi.transport.reply(ev.detail, { error: { message: "Conference not joined" } });
                     }
                 },
             );
@@ -168,7 +168,7 @@ function switchVisibleContainers() {
  */
 function createJWTToken() {
     // Header
-    const header = {alg: 'HS256', typ: 'JWT'};
+    const header = { alg: 'HS256', typ: 'JWT' };
     // Payload
     const payload = {
         // As per Jitsi token auth, `iss` needs to be set to something agreed between

src/vector/mobile_guide/index.js

@@ -1,4 +1,4 @@
-import {getVectorConfig} from '../getconfig';
+import { getVectorConfig } from '../getconfig';
 
 function onBackToElementClick() {
     // Cookie should expire in 4 hours

src/vector/platform/ElectronPlatform.tsx

@@ -48,7 +48,7 @@ import React from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Action } from "matrix-react-sdk/src/dispatcher/actions";
 import { ActionPayload } from "matrix-react-sdk/src/dispatcher/payloads";
-import { SwitchSpacePayload} from "matrix-react-sdk/src/dispatcher/payloads/SwitchSpacePayload";
+import { SwitchSpacePayload } from "matrix-react-sdk/src/dispatcher/payloads/SwitchSpacePayload";
 import { showToast as showUpdateToast } from "matrix-react-sdk/src/toasts/UpdateToast";
 import { CheckUpdatesPayload } from "matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload";
 import ToastStore from "matrix-react-sdk/src/stores/ToastStore";
@@ -119,8 +119,8 @@ class SeshatIndexManager extends BaseEventIndexManager {
         // TODO this should be moved into the preload.js file.
         const ipcCallId = ++this.nextIpcCallId;
         return new Promise((resolve, reject) => {
-            this.pendingIpcCalls[ipcCallId] = {resolve, reject};
-            window.electron.send('seshat', {id: ipcCallId, name, args});
+            this.pendingIpcCalls[ipcCallId] = { resolve, reject };
+            window.electron.send('seshat', { id: ipcCallId, name, args });
         });
     }
 
@@ -258,9 +258,9 @@ export default class ElectronPlatform extends VectorBasePlatform {
             dis.fire(Action.ViewUserSettings);
         });
 
-        electron.on('userDownloadCompleted', (ev, {path, name}) => {
+        electron.on('userDownloadCompleted', (ev, { path, name }) => {
             const onAccept = () => {
-                electron.send('userDownloadOpen', {path});
+                electron.send('userDownloadOpen', { path });
             };
 
             ToastStore.sharedInstance().addOrReplaceToast({
@@ -326,7 +326,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
         return this._ipcCall('getConfig');
     }
 
-    onUpdateDownloaded = async (ev, {releaseNotes, releaseName}) => {
+    onUpdateDownloaded = async (ev, { releaseNotes, releaseName }) => {
         dis.dispatch<CheckUpdatesPayload>({
             action: Action.CheckUpdates,
             status: UpdateCheckStatus.Ready,
@@ -497,8 +497,8 @@ export default class ElectronPlatform extends VectorBasePlatform {
     async _ipcCall(name: string, ...args: any[]): Promise<any> {
         const ipcCallId = ++this.nextIpcCallId;
         return new Promise((resolve, reject) => {
-            this.pendingIpcCalls[ipcCallId] = {resolve, reject};
-            window.electron.send('ipcCall', {id: ipcCallId, name, args});
+            this.pendingIpcCalls[ipcCallId] = { resolve, reject };
+            window.electron.send('ipcCall', { id: ipcCallId, name, args });
             // Maybe add a timeout to these? Probably not necessary.
         });
     }

src/vector/platform/VectorBasePlatform.ts

@@ -18,8 +18,8 @@ limitations under the License.
 */
 
 import BasePlatform from 'matrix-react-sdk/src/BasePlatform';
-import {_t} from 'matrix-react-sdk/src/languageHandler';
-import {getVectorConfig} from "../getconfig";
+import { _t } from 'matrix-react-sdk/src/languageHandler';
+import { getVectorConfig } from "../getconfig";
 
 import Favicon from "../../favicon";