[備忘録]vite React 環境構築

npm create vite@latest

npm i -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-environment-jsdom

npm i -D prettier

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "useTabs": false
}

import '@testing-library/jest-dom'

{
  "roots": ["<rootDir>/"],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  "testEnvironment": "jest-environment-jsdom",
  "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"],
  "moduleNameMapper": {
    "@src/(.*)$": ["<rootDir>/src/$1"]
  }
}

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"]
    }
  },
  "include": ["src", "jest.setup.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

npm i -D tailwindcss autoprefixer postcss clsx prettier-plugin-tailwindcss tailwind-merge

const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  }
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

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

module.exports = {
  ...
  // 追加
  plugins: [require('prettier-plugin-tailwindcss')]
}