環境構築

npm create @quick-start/electron@latest

✔ Project name: … electron-app
✔ Select a framework: › react
✔ Add TypeScript? … Yes
✔ Add Electron updater plugin? … Yes
✔ Enable Electron download mirror proxy? … No

ESLintとPrettierをBiomeに変更

package.jsonからESLintとPrettierを削除、設定ファイル系も削除。

npm i -D @biomejs/biome
npx @biomejs/biome init

biome.json

{
    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
    "vcs": {
        "enabled": true,
        "clientKind": "git",
        "useIgnoreFile": true
    },
    "files": {
        "ignoreUnknown": false,
        "ignore": []
    },
    "formatter": {
        "enabled": true,
        "indentStyle": "space",
        "indentWidth": 4
    },
    "organizeImports": {
        "enabled": true
    },
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true
        }
    },
    "javascript": {
        "formatter": {
            "quoteStyle": "double"
        }
    }
}

package.json

"scripts": {
+   "check": "biome check --write .",
}

とりあえず一回実行してみてエラーが出たところを直す。

立ち上げて見る

npm run dev

ホットリロードもできて普段のフロントエンド開発と同じような感じでいけそう。

Tailwind CSSの導入

npm install tailwindcss @tailwindcss/vite

electron.vite.config.ts

import { resolve } from "node:path";
import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
import { defineConfig, externalizeDepsPlugin } from "electron-vite";

export default defineConfig({
    main: {
        plugins: [externalizeDepsPlugin()],
    },
    preload: {
        plugins: [externalizeDepsPlugin()],
    },
    renderer: {
        resolve: {
            alias: {
                "@renderer": resolve("src/renderer/src"),
            },
        },
+       plugins: [react(), tailwindcss()],
    },
});

この時点で出たエラー

モジュール '@tailwindcss/vite' またはそれに対応する型宣言が見つかりません。
'/node_modules/@tailwindcss/vite/dist/index.d.mts' に型がありますが、現在の 'moduleResolution' 設定ではこの結果を解決できませんでした。'node16'、'nodenext'、または 'bundler' への更新を検討してください。ts(2307)

解消法

tsconfig.node.json

{
    "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
    "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
    "compilerOptions": {
        "composite": true,
        "types": ["electron-vite/node"],
+       "moduleResolution": "bundler"
    }
}

tsconfig.web.jsonに記載 → ❌
tsconfig.jsonに記載 → ❌
tsconfig.node.jsonに記載 → ⭕️

スタイルを変更してみる

base.css

+@import "tailwindcss";

App.tsx

return (
    <>
        <img alt="logo" className="logo" src={electronLogo} />
        <div className="creator">Powered by electron-vite</div>
        <div className="text">
+           Build an <span className="text-[#9feaf9]">Electron</span> app
            with <span className="react">React</span>
            &nbsp;and <span className="ts">TypeScript</span>
        </div>

font-boldはつけても効かなかったけど今のスタイルは全部消して作り直すから問題なし。

Playwrightの導入

npm init playwright@latest

package.json

scripts: {
+   "test": "playwright test",
}

アプリを立ち上げてタイトルを出力して閉じるだけ。
jsじゃないとエラーになるようなのでビルドされたファイルを指定。

launch.spec.ts

import { _electron as electron } from 'playwright';
import { test } from '@playwright/test';

test('launch app', async () => {
    const electronApp = await electron.launch({ args: ['out/main/index.js'] });
    const window = await electronApp.firstWindow();
    console.log(await window.title());
    await electronApp.close();
});

npm run test

> electron-app@1.0.0 test
> playwright test


Running 1 test using 1 worker
[chromium] › tests/launch.spec.ts:4:5 › launch app
えれくとろん
  1 passed (698ms)

To open last HTML report run:

  npx playwright show-report