프로젝트 시작

pnpm dlx husky-init && pnpm install

pnpm add -D @commitlint/cli @commitlint/config-conventional
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
npx husky add .husky/commit-msg 'npx commitlint --edit $1'

pnpm add -D prettier@2.8.8 pretty-quick @trivago/prettier-plugin-sort-imports
touch .prettierrc
npx husky add .husky/pre-commit 'npx pretty-quick --staged'

{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 80,
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^components/(.*)$",
    "^services/(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

{
  "scripts": {
    "format": "prettier --check . --write **/*.{js,cjs,ts,tsx,json}"
  }
}

npx eslint --init
pnpm add -D lint-staged @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks

{
  "lint-staged": {
    "**/*.{ts,tsx,js,json}": ["eslint ."]
  }
}

pnpm add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event @testing-library/dom @types/jest jest jest-environment-jsdom jest-svg-transformer @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript
npx husky add .husky/pre-push 'pnpm test'

module.exports = {
  transform: {
    '^.+\\.[jt]sx?$': ['babel-jest']
  },
  moduleDirectories: ['node_modules', 'src'],
  setupFilesAfterEnv: ['./jest.setup.js'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '\\.svg': 'jest-svg-transformer'
  },
  testEnvironment: 'jsdom',
  testTimeout: 10000
}

import '@testing-library/jest-dom'

{
  "scripts": {
    "test": "jest"
  }
}

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

pnpm add -D tailwindcss autoprefixer postcss postcss-nesting prettier-plugin-tailwindcss
npx tailwindcss init -p

module.exports = {
  plugins: {
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {}
  }
}

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