Enable linting for extension (#1769)

* Enable linting for extension

* Update lock file

Author: Methuselah96

eslint.js.react.jest.config.base.mjs

@@ -0,0 +1,43 @@
+import eslint from '@eslint/js';
+import react from 'eslint-plugin-react';
+import { fixupPluginRules } from '@eslint/compat';
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
+import jest from 'eslint-plugin-jest';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+export default [
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...eslint.configs.recommended,
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...react.configs.flat.recommended,
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    plugins: {
+      'react-hooks': fixupPluginRules(eslintPluginReactHooks),
+    },
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...jest.configs['flat/recommended'],
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...jest.configs['jest/style'],
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    ...eslintConfigPrettier,
+  },
+];

extension/.eslintignore

@@ -0,0 +1,38 @@
+import globals from 'globals';
+import eslintJs from '../eslint.js.config.base.mjs';
+import eslintTsReact from '../eslint.ts.react.config.base.mjs';
+import eslintJsReactJest from '../eslint.js.react.jest.config.base.mjs';
+
+export default [
+  ...eslintJs,
+  ...eslintTsReact(import.meta.dirname),
+  ...eslintJsReactJest,
+  {
+    ignores: [
+      'chrome',
+      'dist',
+      'edge',
+      'examples',
+      'firefox',
+      'test/electron/fixture/dist',
+    ],
+  },
+  {
+    files: ['build.mjs'],
+    languageOptions: {
+      globals: {
+        ...globals.nodeBuiltin,
+      },
+    },
+  },
+  {
+    files: ['test/**/*.js', 'test/**/*.jsx'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        EUI: true,
+      },
+    },
+  },
+];

extension/.eslintrc

@@ -3,7 +3,7 @@ module.exports = {
   testPathIgnorePatterns: ['<rootDir>/examples'],
   testEnvironment: 'jsdom',
   moduleNameMapper: {
-    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.js',
   },
   transformIgnorePatterns: [
     'node_modules/(?!.pnpm|@babel/code-frame|@babel/highlight|@babel/helper-validator-identifier|chalk|d3|dateformat|delaunator|internmap|jsondiffpatch|lodash-es|nanoid|robust-predicates|uuid)',

extension/eslint.config.mjs

@@ -17,9 +17,10 @@
     "clean": "rimraf dist && rimraf chrome/dist && rimraf edge/dist && rimraf firefox/dist",
     "test:app": "cross-env BABEL_ENV=test jest test/app",
     "test:chrome": "jest test/chrome",
+    "build:test:electron:fixture": "webpack --config test/electron/fixture/webpack.config.js",
     "test:electron": "pnpm run build:test:electron:fixture && jest test/electron",
     "test": "pnpm run test:app && pnpm run test:chrome && pnpm run test:electron",
-    "build:test:electron:fixture": "webpack --config test/electron/fixture/webpack.config.js",
+    "lint": "eslint .",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
@@ -64,12 +65,7 @@
     "cross-env": "^7.0.3",
     "electron": "^31.6.0",
     "esbuild": "^0.23.1",
-    "eslint": "^8.57.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "globals": "^15.9.0",
     "immutable": "^4.3.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

extension/jest.config.js renamed to extension/jest.config.cjs

@@ -31,19 +31,19 @@ type Props = StateProps & DispatchProps & OwnProps;
 
 const isElectron = navigator.userAgent.includes('Electron');
 
-function sendMessage(message: SingleMessage) {
-  chrome.runtime.sendMessage(message);
+async function sendMessage(message: SingleMessage) {
+  await chrome.runtime.sendMessage(message);
 }
 
 class Actions extends Component<Props> {
-  openWindow = (position: Position) => {
-    sendMessage({ type: 'OPEN', position });
+  openWindow = async (position: Position) => {
+    await sendMessage({ type: 'OPEN', position });
   };
-  openOptionsPage = () => {
-    if (navigator.userAgent.indexOf('Firefox') !== -1) {
-      sendMessage({ type: 'OPEN_OPTIONS' });
+  openOptionsPage = async () => {
+    if (navigator.userAgent.includes('Firefox')) {
+      await sendMessage({ type: 'OPEN_OPTIONS' });
     } else {
-      chrome.runtime.openOptionsPage();
+      await chrome.runtime.openOptionsPage();
     }
   };
 
@@ -85,7 +85,7 @@ class Actions extends Component<Props> {
           {features.import && <ImportButton />}
           {position &&
             (position !== '#popup' ||
-              navigator.userAgent.indexOf('Firefox') !== -1) && <PrintButton />}
+              navigator.userAgent.includes('Firefox')) && <PrintButton />}
           <Divider />
           <MonitorSelector />
           <Divider />
@@ -96,17 +96,17 @@ class Actions extends Component<Props> {
           <Divider />
           {!isElectron && (
             <Button
-              onClick={() => {
-                this.openWindow('window');
+              onClick={async () => {
+                await this.openWindow('window');
               }}
             >
               <MdOutlineWindow />
             </Button>
           )}
           {!isElectron && (
             <Button
-              onClick={() => {
-                this.openWindow('remote');
+              onClick={async () => {
+                await this.openWindow('remote');
               }}
             >
               <GoBroadcast />

extension/package.json

@@ -27,6 +27,7 @@ class App extends Component<Props> {
           <a
             href="https://github.com/zalmoxisus/redux-devtools-extension#usage"
             target="_blank"
+            rel="noreferrer"
           >
             the instructions
           </a>

extension/src/app/Actions.tsx

@@ -6,7 +6,7 @@ export function createMenu() {
     { id: 'devtools-remote', title: 'Open Remote DevTools' },
   ];
 
-  let shortcuts: { [commandName: string]: string | undefined } = {};
+  const shortcuts: { [commandName: string]: string | undefined } = {};
   chrome.commands.getAll((commands) => {
     for (const { name, shortcut } of commands) {
       shortcuts[name!] = shortcut;

extension/src/app/App.tsx

@@ -15,7 +15,7 @@ chrome.commands.onCommand.addListener((shortcut) => {
 
 // Disable the action by default and create the context menu when installed
 chrome.runtime.onInstalled.addListener(() => {
-  chrome.action.disable();
+  void chrome.action.disable();
 
   getOptions((option) => {
     if (option.showContextMenus) createMenu();
@@ -32,6 +32,7 @@ chrome.storage.onChanged.addListener((changes) => {
 
 // https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#keep_a_service_worker_alive_continuously
 setInterval(
-  () => chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() }),
+  () =>
+    void chrome.storage.local.set({ 'last-heartbeat': new Date().getTime() }),
   20000,
 );