Zenn
Open7

Vite, React, Tanstack Router, DaisyUIでSPAのテンプレを作る

React
Vite
daisyUI
TanStack Router
SgSg

Vite を選択すると、Viteのプロジェクトが作成されて、Tanstack router のサンプルコードが生成される。

  • src/routes/__root.tsx
  • src/routes/index.lazy.tsx
  • src/routes/about.lazy.tsx
  • src/main.tsx

.gitignore も生成されるが、IDEのディレクトリ全部 ignore される設定になっている。

.gitignore
# Local
.DS_Store
*.local
*.log*

# Dist
node_modules
dist/
.vinxi
.output
.vercel
.netlify
.wrangler

# IDE
.vscode/*
!.vscode/extensions.json
.idea

こちらに変更
https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore

SgSg

tailwindは自分で入れる必要があるみたいなので、入れる

こちらを参考に一通り設定
https://tailwindcss.com/docs/guides/vite

SgSg

設定に従うだけでは反映されないので、いくつかのファイルを修正

テンプレにデフォルトで入れられている Tailwind を削除

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TanStack Router</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style type="text/tailwindcss">
-      html {
-        color-scheme: light dark;
-      }
-      * {
-        @apply border-gray-200 dark:border-gray-800;
-      }
-      body {
-        @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
-      }
-    </style>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Root Component で tailwind の install 手順で作った、index.css を import

__root.tsx
import * as React from "react";
import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";

+ import "../index.css";
+
export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <>
      <div className="flex gap-2 p-2 text-lg">
        <Link
          to="/"
          activeProps={{
            className: "font-bold",
          }}
          activeOptions={{ exact: true }}
        >
          Home
        </Link>{" "}
        <Link
          to="/about"
          activeProps={{
            className: "font-bold",
          }}
        >
          About
        </Link>
      </div>
      <hr />
      <Outlet />
      <TanStackRouterDevtools position="bottom-right" />
    </>
  );
}

これで、daisy UIが利用できるようになる

SgSg

eslint とか prettier は入っていないみたいなので、自分で入れる

eslintを入れる

npm init @eslint/config@latest -- --config eslint-config-standard

eslint.config.js がプロジェクトルートにできて、勝手に設定してくれている。

prettierを入れる

(本体は、tailwindの設定手順に含まれていたので、ここでは eslint-config-prettier のみ入れる)

npm install --save-dev eslint-config-prettier

eslint の設定ファイルに、prettier との競合設定を入れる

eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import eslintConfigPrettier from "eslint-config-prettier";
import neostandard from "neostandard";

/** @type {import('eslint').Linter.Config[]} */
export default [
  ...neostandard({
    noStyle: true,
  }),
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    settings: {
      react: {
        version: "detect",
      },
    },
  },
  eslintConfigPrettier,  // ここを追加
];

JavaScript Standard Style を導入

Code Style は何でもいいので、以下に合わせることにする
https://standardjs.com/

eslint 版があったのでインストールしてみるも、失敗。。
現時点(2024年11月26日)での、eslintの最新(v9.15.0) に対応してないっぽい。

> npm install --save-dev eslint eslint-config-standard
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: spa-tsr@0.0.0
npm error Found: eslint@9.15.0
npm error node_modules/eslint
npm error   dev eslint@"^9.15.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer eslint@"^8.0.1" from eslint-config-standard@17.1.0
npm error node_modules/eslint-config-standard
npm error   dev eslint-config-standard@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\YutaSugiura\AppData\Local\npm-cache\_logs\2024-11-26T03_18_02_783Z-eresolve-report.txt

github の repository に Issue が立っているが、まだリリースできてない様子。
コメントで、このプロジェクトはほぼ死んでるので後継つくりました、みたいなこと言っているので、そっちを試してみる。
https://github.com/standard/eslint-config-standard/issues/410#issuecomment-2495647157

neostandard の導入

以下を参考にインストール
https://github.com/neostandard/neostandard

すんなりインストールできた

> npm install -D neostandard eslint

added 14 packages, and audited 396 packages in 5s

153 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

eslint.config.js に設定追加。
neostandard を import して、追加すればOKっぽい。
ただし、eslint-config-prettier があっても、Prettier と設定が競合するようなので、noStyle の option を追加

eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import eslintConfigPrettier from "eslint-config-prettier";
import neostandard from "neostandard";

/** @type {import('eslint').Linter.Config[]} */
export default [
  ...neostandard({
    noStyle: true,  // Prettier との競合回避
  }),
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    settings: {
      react: {
        version: "detect",
      },
    },
  },
  eslintConfigPrettier,
];
SgSg

次に、Vite の scafolding でプロジェクト作成してみる

> npm create vite@latest

√ Project name: ... spa-template
√ Select a framework: » React
√ Select a variant: » TypeScript + SWC

こちらは、SWCが利用できる、eslint が入っているなど、いくつか違いがある。

SgSg

まずは、Daisy UI を入れる。
Tanstack Router の時と一緒で、Tailwindから入れる。

eslint と prettier もいれる