Update prettier config, update eslint config, update dependencies

.github/workflows/ci.yml

@@ -22,6 +22,13 @@ jobs:
                   cache: 'yarn'
                   cache-dependency-path: 'yarn.lock'
 
+            - name: Cache ESLint cache
+              uses: actions/cache@v4
+              with:
+                  path: js/.cache/.eslintcache
+                  # Invalidate cache when any of the listed files changes
+                  key: ${{ runner.os }}-eslint-${{ hashFiles('js/yarn.lock', 'js/eslint-config/src/*', 'js/eslint-config/index.js', 'js/eslint.config.js', 'js/.cache/.eslintcache') }}
+
             - name: Install dependencies
               run: yarn install --frozen-lockfile
 

.gitignore

@@ -36,3 +36,5 @@ dist/
 out/
 *.crx
 *.pem
+
+.cache/

.prettierignore

@@ -1 +1,3 @@
 dist/
+node_modules/
+.yarn/

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.2.2.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

README.md

@@ -11,17 +11,17 @@ from [chrome-extension-boilerplate-react](https://github.com/lxieyang/chrome-ext
 This is a basic Chrome Extensions boilerplate to help you write modular and modern Javascript code and load CSS easily.
 This boilerplate is using:
 
--   [Chrome Extension Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/)
--   [React 18](https://reactjs.org)
--   [MUI](https://mui.com/)
--   [CRXJS Vite Plugin](https://www.npmjs.com/package/@crxjs/vite-plugin/v/2.0.0-beta.23)
--   ESLint:
-    -   [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
-    -   [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier)
-    -   [eslint-plugin-simple-import-sort](https://www.npmjs.com/package/eslint-plugin-simple-import-sort)
-    -   [typescript-eslint](https://www.npmjs.com/package/typescript-eslint)
--   [Prettier](https://prettier.io/)
--   [TypeScript](https://www.typescriptlang.org/)
+- [Chrome Extension Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/)
+- [React 18](https://reactjs.org)
+- [MUI](https://mui.com/)
+- [CRXJS Vite Plugin](https://www.npmjs.com/package/@crxjs/vite-plugin/v/2.0.0-beta.23)
+- ESLint:
+    - [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
+    - [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier)
+    - [eslint-plugin-simple-import-sort](https://www.npmjs.com/package/eslint-plugin-simple-import-sort)
+    - [typescript-eslint](https://www.npmjs.com/package/typescript-eslint)
+- [Prettier](https://prettier.io/)
+- [TypeScript](https://www.typescriptlang.org/)
 
 Please open up an issue to nudge me to keep the npm packages up-to-date.
 
@@ -72,7 +72,7 @@ at the [official guide](https://developer.chrome.com/webstore/publish) to more i
 
 ## Resources:
 
--   [Chrome Extension documentation](https://developer.chrome.com/docs/extensions/get-started)
+- [Chrome Extension documentation](https://developer.chrome.com/docs/extensions/get-started)
 
 ---
 

eslint.config.js

@@ -1,34 +1,32 @@
 // @ts-check
-
-import eslint from '@eslint/js';
 import eslintConfigPrettier from 'eslint-config-prettier';
-import reactJsxRuntime from 'eslint-plugin-react/configs/jsx-runtime.js';
-import reactRecommended from 'eslint-plugin-react/configs/recommended.js';
-import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import eslintPluginReact from 'eslint-plugin-react';
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
 import tseslint from 'typescript-eslint';
 
+import eslint from '@eslint/js';
+
 export default tseslint.config(
-    {
-        ignores: ['dist']
-    },
     eslint.configs.recommended,
     ...tseslint.configs.recommended,
+    eslintPluginReact.configs.flat.recommended,
+    eslintPluginReact.configs.flat['jsx-runtime'],
     {
-        ...reactRecommended,
-        ...reactJsxRuntime,
-        files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
-        settings: {
-            version: 'detect'
-        }
-    },
-    {
+        files: ['src/**/*.jsx', 'src/**/*.tsx'],
         plugins: {
-            'simple-import-sort': simpleImportSort
+            'react-hooks': eslintPluginReactHooks
         },
         rules: {
-            'simple-import-sort/imports': 'warn',
-            'simple-import-sort/exports': 'warn'
+            ...eslintPluginReactHooks.configs.recommended.rules
         }
     },
-    eslintConfigPrettier
+    eslintConfigPrettier,
+    {
+        settings: {
+            react: {
+                version: 'detect'
+            }
+        },
+        ignores: ['dist', 'node_modules', '.yarn']
+    }
 );

package.json

@@ -5,39 +5,39 @@
     "license": "MIT",
     "type": "module",
     "scripts": {
-        "lint": "eslint .",
-        "lint:fix": "eslint . --fix",
-        "format": "prettier --write .",
+        "lint": "eslint . --cache --cache-strategy content --cache-location .cache/.eslintcache",
+        "format": "prettier --config prettier.config.js --write .",
         "watch": "tsc && vite build --watch",
         "build": "tsc && vite build"
     },
     "dependencies": {
-        "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.5",
-        "@fontsource/roboto": "^5.0.13",
-        "@mui/icons-material": "^5.15.16",
-        "@mui/material": "^5.15.16",
-        "@mui/system": "^5.15.15",
-        "axios": "^1.6.8",
+        "@emotion/react": "^11.13.5",
+        "@emotion/styled": "^11.13.5",
+        "@fontsource/roboto": "^5.1.0",
+        "@mui/icons-material": "^6.1.10",
+        "@mui/material": "^6.1.10",
+        "@mui/system": "^6.1.10",
+        "axios": "^1.7.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-router-dom": "^6.23.0"
+        "react-router-dom": "^6.28.0"
     },
     "devDependencies": {
-        "@crxjs/vite-plugin": "2.0.0-beta.23",
-        "@eslint/js": "^8.57.0",
-        "@types/react": "^18.3.1",
-        "@types/react-dom": "^18.3.0",
-        "@vitejs/plugin-react": "^4.2.1",
-        "chrome-types": "^0.1.282",
-        "eslint": "^8.57.0",
+        "@crxjs/vite-plugin": "2.0.0-beta.28",
+        "@eslint/js": "^9.16.0",
+        "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+        "@types/react": "^18.3.14",
+        "@types/react-dom": "^18.3.2",
+        "@vitejs/plugin-react": "^4.3.4",
+        "chrome-types": "^0.1.323",
+        "eslint": "^9.16.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-react": "^7.34.1",
-        "eslint-plugin-simple-import-sort": "^12.1.0",
-        "prettier": "^3.2.5",
-        "typescript": "5.4.5",
-        "typescript-eslint": "^7.8.0",
-        "vite": "^5.2.11"
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.1.0",
+        "prettier": "^3.4.2",
+        "typescript": "5.7.2",
+        "typescript-eslint": "^8.17.0",
+        "vite": "^5.4.11"
     },
-    "packageManager": "yarn@4.2.2"
+    "packageManager": "yarn@4.5.3"
 }

prettier.config.js

@@ -0,0 +1,35 @@
+/** @typedef { import('prettier').Config } PrettierConfig */
+/** @typedef { import('@trivago/prettier-plugin-sort-imports').PluginConfig } SortImportsConfig */
+
+/**
+ * @type {PrettierConfig & SortImportsConfig}
+ */
+const prettierConfig = {
+    plugins: ['@trivago/prettier-plugin-sort-imports'],
+    // Code style
+    semi: true,
+    tabWidth: 4,
+    printWidth: 100,
+    endOfLine: 'lf',
+    singleQuote: true,
+    jsxSingleQuote: false,
+    trailingComma: 'none',
+    arrowParens: 'avoid',
+    bracketSameLine: false,
+    // Import sort
+    importOrder: [
+        '^react$',
+        '^[A-z]',
+        '^@[^/]',
+        '^@/',
+        '^\\../',
+        '^\\./',
+        '^.+.s?css$',
+        '^\\u0000.+'
+    ],
+    importOrderSeparation: true,
+    importOrderSortSpecifiers: true,
+    importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy']
+};
+
+export default prettierConfig;

src/common/chrome-api-wrapper.ts

@@ -35,7 +35,7 @@ export class ChromeApiWrapper {
                 return currentTab;
             }
 
-            await new Promise((r) => setTimeout(r, 50));
+            await new Promise(r => setTimeout(r, 50));
         }
 
         return null;

src/content/index.ts

@@ -14,7 +14,7 @@ chrome.runtime.onMessage.addListener((message: ChromeMessage<ScraperMessage>) =>
     }
 
     if (message.payload.command === ScraperCommand.SCRAPE) {
-        handleScrapeCommand().catch((error) => console.error(error));
+        handleScrapeCommand().catch(error => console.error(error));
     }
 
     return false;

src/popup/App.tsx

@@ -1,4 +1,5 @@
-import { lazy, Suspense } from 'react';
+import { Suspense, lazy } from 'react';
+
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 
 import AppShell from './AppShell/AppShell';

src/popup/AppShell/AppShell.tsx

@@ -1,14 +1,15 @@
-import './AppShell.css';
-
 import { ReactElement, ReactNode, useEffect } from 'react';
+
 import { useNavigate } from 'react-router-dom';
 
+import './AppShell.css';
+
 export default function AppShell(props: { children?: ReactNode }): ReactElement {
     const navigate = useNavigate();
 
     useEffect(() => {
         navigate('/home-page');
     }, []);
 
     return <div className="App">{props.children}</div>;
 }

src/popup/components/PopupContent/PopupContent.tsx

@@ -1,7 +1,8 @@
-import './PopupContent.css';
+import { ReactElement, ReactNode } from 'react';
 
 import Box from '@mui/material/Box';
-import { ReactElement, ReactNode } from 'react';
+
+import './PopupContent.css';
 
 export default function PopupContent(props: { children?: ReactNode }): ReactElement {
     return (

src/popup/components/PopupHeader/PopupHeader.tsx

@@ -1,8 +1,9 @@
-import './PopupHeader.css';
+import { ReactElement, ReactNode } from 'react';
 
 import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded';
 import { Toolbar } from '@mui/material';
-import { ReactElement, ReactNode } from 'react';
+
+import './PopupHeader.css';
 
 export default function PopupHeader(props: { children?: ReactNode }): ReactElement {
     return (

src/popup/features/HomePage/HomePage.tsx

@@ -1,8 +1,7 @@
-import './HomePage.css';
+import { ReactElement, useEffect, useState } from 'react';
 
 import { Alert, Button, Snackbar, Stack } from '@mui/material';
 import Box from '@mui/material/Box';
-import { ReactElement, useEffect, useState } from 'react';
 
 import {
     ChromeApiWrapper,
@@ -13,6 +12,8 @@ import { ScraperCommand, ScraperMessage } from '../../../common/types/scraper';
 import PopupContent from '../../components/PopupContent/PopupContent';
 import PopupHeader from '../../components/PopupHeader/PopupHeader';
 
+import './HomePage.css';
+
 const CACHE_KEY = 'scrapedPageTitle';
 
 export default function HomePage(): ReactElement {
@@ -45,7 +46,7 @@ export default function HomePage(): ReactElement {
     }
 
     useEffect(() => {
-        chrome.storage.session.get(CACHE_KEY).then((items) => {
+        chrome.storage.session.get(CACHE_KEY).then(items => {
             const cachedTitle = items[CACHE_KEY];
             setScrapedPageTitle(cachedTitle ?? '');
         });

src/popup/index.tsx

@@ -1,4 +1,5 @@
 import { StrictMode } from 'react';
+
 import { createRoot } from 'react-dom/client';
 
 import App from './App';

vite.config.ts

@@ -1,18 +1,22 @@
+import { defineConfig } from 'vite';
+
 import { crx } from '@crxjs/vite-plugin';
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
 
 import manifest from './manifest.json';
 import packageJson from './package.json';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react(), crx({
-        manifest: {
-            ...manifest,
-            version: packageJson.version
-        }
-    })],
+    plugins: [
+        react(),
+        crx({
+            manifest: {
+                ...manifest,
+                version: packageJson.version
+            }
+        })
+    ],
     build: {
         outDir: 'dist',
         emptyOutDir: true