React/Next.js, TypeScript, Scss, GitHub, VSCodeの環境用のテンプレート

プロジェクト作成

React + TypeScript

npm create vite@latest my-react-app --template react

Next.js + TypeScript

npx create-next-app@latest --ts

ESLint

npm install --save-dev eslint-plugin-react

.eslintrc.json, .eslintignoreを追加

Prettier

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

.prettierrc, .prettierignoreを追加

Scss

npm install --save-dev sass

ファイル名を.cssから.scssに変更

Stylelint

npm install --save-dev stylelint stylelint-config-standard stylelint-scss stylelint-config-recess-order

.stylelintrc.jsonを追加

• scssファイルのlint
• cssのプロパティの順番を自動で整列

Package.json

以下はNext.jsの場合

  "scripts": {
    "dev": "npm i && next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write ."
  },

devにnpn iを入れておくと、package関連に変更がある時でも気にせずに使用できる

VSCode

.vscode/settings.json, .vscode/extensions.jsonを追加

• セーブ時に自動でフォーマットするように設定
• おすすめの拡張機能を追加(拡張機能タブで@recommendedで検索)
• importの並び替えと自動追加・削除

GitHub

.github\PULL_REQUEST_TEMPLATE.mdを追加

Next.jsで静的エクスポートを使用する場合

next.config.tsに以下を追加

module.exports = {
  output: "export",
  trailingSlash: true,
}

npm run build