【React / Next.js】ESLintとTailwindCSS、importのフォーマッタの設定

🔧 はじめに

ReactやNext.jsでESLintやTailwindCSS，モジュールインポートなどの割と面倒な初期設定を忘備録としてここに記録します．そのまま使っていただいてもいいですし，好きにカスタマイズしていただいても大丈夫です．

🔧 自己紹介

初めまして．趣味でweb開発を勉強している273*(ﾂﾅｻﾝﾄﾞ) / Kei.と申します．関西の大学生です．最近はフルスタック開発やツール制作を行なっています．まだまだ初心者です．

🔧 本題

• Tailwindcssとモジュールのimportの定義の自動フォーマットを導入します．さらに，shadcn/uiの設定とDocker x Reactのホットリロード設定を行います．

必要なパッケージのインストール

TaildwindCSSをインストール

npm install -D tailwindcss postcss autoprefixer

設定ファイルの作成

npx tailwindcss init -p

tailwind.config.jsに記述(書き換え)

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

src/index.cssの先頭に記述

@tailwind base;
@tailwind components;
@tailwind utilities;

ESLintとTailwindCSSの自動整形関連をインストール

npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-tailwindcss eslint-config-prettier

importの自動整形関連をインストール

npm i eslint-plugin-import eslint-plugin-unused-imports

eslint.config.jsに記述(なければ作成)
eslintとモジュールimpoertの設定をしています．

import js from "@eslint/js";
import tsParser from "@typescript-eslint/parser";
import importPlugin from "eslint-plugin-import";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tailwind from "eslint-plugin-tailwindcss";
import unusedImports from "eslint-plugin-unused-imports";
import globals from "globals";
import tseslint from "typescript-eslint";

export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended,
      ...tailwind.configs["flat/recommended"],
      importPlugin.flatConfigs.recommended,
    ],
    files: ["**/*.{js,jsx,ts,tsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parser: tsParser,
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      "unused-imports": unusedImports,
      // import: importPlugin,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],
      "tailwindcss/classnames-order": "warn",
      "tailwindcss/enforces-negative-arbitrary-values": "warn",
      "tailwindcss/enforces-shorthand": "warn",
      "tailwindcss/migration-from-tailwind-2": "warn",
      "tailwindcss/no-arbitrary-value": "off",
      "tailwindcss/no-contradicting-classname": "error",
      "tailwindcss/no-custom-classname": "off",
      "tailwindcss/no-unnecessary-arbitrary-value": "warn",

      "no-unused-vars": "off",
      "import/no-dynamic-require": "warn",
      "import/no-nodejs-modules": "warn",

      "@typescript-eslint/no-unused-vars": "off",

      "import/no-unused-modules": "warn",
      "import/no-unresolved": "off", // エラーを警告に下げる

      "unused-imports/no-unused-imports": "error",
      "unused-imports/no-unused-vars": [
        "warn",
        {
          vars: "all",
          varsIgnorePattern: "^_",
          args: "after-used",
          argsIgnorePattern: "^_",
        },
      ],

      "import/order": [
        "error",
        {
          groups: [
            ["builtin", "external"],
            "internal", // 絶対パス
            ["parent", "sibling", "index"], // 相対パス（同階層以外、同階層）
          ],
          pathGroups: [
            {
              pattern: "react**",
              group: "external",
              position: "before",
            },
            {
              pattern: "@/components/ui/**",
              group: "external",
              position: "after",
            },
          ],
          pathGroupsExcludedImportTypes: ["react"],
          "newlines-between": "always",
          alphabetize: {
            order: "asc",
            caseInsensitive: true,
          },
        },
      ],
    },
  }
);

以下を参考にshadcn/uiのインストール

lucide-icon，tailwind-animationを使うのでdefault，zincを指定する．

ホットリロードの設定

vite.config.jsに以下を追加

export default {
  server: {
    host: "0.0.0.0", // 必須: 外部アクセスを許可
    port: 3000,
  },
};

おまけ

コンテナの設定

FROM node:22-slim

WORKDIR /usr/src/app

COPY package.json package-lock.json ./

COPY . .

RUN npm install

CMD ["npm", "run", "dev"]

version: "3.9"
services:
  app:
    container_name: コンテナ名
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - type: bind
        source: ./
        target: /usr/src/app
    command: sh -c "npm run dev"
    ports:
      - 3000:3000
    stdin_open: true

🔧 最後に

環境構築や初期設定などはいつもほとんど同じですが，よく忘れるので記録しておいた方がいいですね．誰かの参考になったら幸いです．最後まで読んでいただきありがとうございました．それでは！