Fix ESLint configuration for lint-staged files

Author: andornaut

.eslintignore

@@ -1,3 +1,4 @@
 module.exports = {
-  '*.{css,js,json,jsx,md}': 'prettier-eslint --write',
+  '*.{js,jsx}': ['eslint --fix', 'prettier --write'],
+  '*.{css,json,md}': ['prettier --write'],
 };

.lintstagedrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'es5',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+};

.prettierrc.js

@@ -30,11 +30,19 @@ n.b. Only a handful of websites are configured out of the box, and you'll need t
 
 ### Getting Started
 
-1. Install [node](https://nodejs.org/en/) > v10.19.0
-1. Install [npm](https://www.npmjs.com/) > v6.14.4
+1. Install [node](https://nodejs.org/en/) > v20.15.0
+1. Install [npm](https://www.npmjs.com/) > v10.0.0
 1. `npm install`
 1. `npm run web-ext`
 
+### Available Commands
+
+- `npm run build` - Build extension for development
+- `npm run build-production` - Build extension for production
+- `npm run test` - Run test suite
+- `npm run static-analysis` - Run ESLint code quality checks
+- `npm run format` - Format code with Prettier
+
 ### Developing for Android
 
 Follow the [Extension Workshop guide](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/):

README.md

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

babel.config.js

@@ -0,0 +1,111 @@
+import js from '@eslint/js';
+
+export default [
+  js.configs.recommended,
+  // Configuration files (webpack, babel, etc.)
+  {
+    files: ['*.config.js', '.eslintrc.js', '.lintstagedrc.js', '.prettierrc.js', 'babel.config.js', 'jest.config.js', 'web-ext-config.js', 'webpack.config.js'],
+    ignores: ['node_modules/**'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'commonjs',
+      globals: {
+        module: 'readonly',
+        require: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        process: 'readonly'
+      }
+    },
+    rules: {
+      'no-console': 'off'
+    }
+  },
+  // Static extension files (background.js, content-script.js)
+  {
+    files: ['static/**/*.js'],
+    ignores: ['node_modules/**'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'script',
+      globals: {
+        chrome: 'readonly',
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly',
+        setTimeout: 'readonly',
+        setInterval: 'readonly',
+        clearTimeout: 'readonly',
+        clearInterval: 'readonly',
+        MutationObserver: 'readonly'
+      }
+    },
+    rules: {
+      'no-console': 'off',
+      'no-unused-expressions': ['error', { allowTaggedTemplates: true }]
+    }
+  },
+  // React source files
+  {
+    files: ['src/**/*.js', 'src/**/*.jsx'],
+    ignores: ['dist/**', 'node_modules/**', 'web-ext-artifacts/**'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: {
+        chrome: 'readonly',
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly'
+      }
+    },
+    rules: {
+      'no-console': 'off',
+      'no-continue': 'off',
+      'no-param-reassign': 'off',
+      'no-underscore-dangle': 'off',
+      'no-unused-vars': ['error', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^(React|.*Component|.*List|.*Field|.*Content|App|Root|Topics|Websites)$'
+      }],
+      'max-len': ['error', { code: 140 }], // Relaxed for JSX
+      'no-undef': 'error'
+    }
+  },
+  // Test files
+  {
+    files: ['src/**/*.test.js', 'src/**/*.test.jsx', 'src/test-setup.js'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: {
+        jest: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+        describe: 'readonly',
+        it: 'readonly',
+        expect: 'readonly',
+        global: 'writable',
+        chrome: 'readonly'
+      }
+    },
+    rules: {
+      'no-console': 'off',
+      'no-unused-vars': ['error', {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^React$|^App$' // Allow unused React and component imports
+      }],
+      'max-len': ['error', { code: 140 }]
+    }
+  }
+];

eslint.config.mjs

@@ -0,0 +1,10 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.js'],
+  testMatch: ['<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}', '<rootDir>/src/**/*.{test,spec}.{js,jsx,ts,tsx}'],
+  transform: {
+    '^.+\\.(js|jsx)$': 'babel-jest',
+  },
+  moduleFileExtensions: ['js', 'jsx', 'json'],
+  collectCoverageFrom: ['src/**/*.{js,jsx}', '!src/**/*.test.{js,jsx}', '!src/test-setup.js'],
+};