This is a Next.js project bootstrapped with create-next-app.

Install

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Coding Style & Repair tool

1. Eslint

yarn add -D eslint

設定

// package.json
"scripts": {
    "lint": "next lint", //找到錯誤
    "lint:save": "eslint . --ext .js,.jsx,.cjs,.mjs,.tsx,.ts --fix --ignore-path .gitignore", //找到錯誤並修正
},

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true
}

初始化並新增 eslint-config-next 套件

yarn lint

➜ yarn lint
yarn run v1.22.19
warning ..\..\..\package.json: No license field
$ next lint
? How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint

Installing devDependencies (yarn):
- eslint-config-next

產生.eslint.json

//.eslint.js
module.exports = {
  extends: [
    "next/core-web-vitals",
    "plugin:tailwindcss/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  plugins: ["tailwindcss", "simple-import-sort", "@typescript-eslint/eslint-plugin", "prettier"],
  rules: {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-array-constructor": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
  },
};

2. Prettier

yarn add -D prettier

格式化規定

// .prettierrc
{
  "semi": true,//語末結尾有分號
  "trailingComma": "all",//所有尾隨逗號
  "singleQuote": false,//true單引號false雙引號
  "tabWidth": 2,//幾個空格
  "useTabs": false,//使用tab
  "printWidth": 120//多少字換行
  "arrowParens": "avoid",//箭頭函數盡可能省略括號
  "endOfLine": "auto",//設定為 LF
}

3. eslint-config-prettier(用來解決 Prettier & Eslint Conflict)

prettier 一定要在最後，讓他去格式化

// .eslintrc.js
 "extends": [
	"others",
    "prettier"
  ]

4. eslint-plugin-tailwindcss

// .eslintrc.js
 "extends": [
	"others",
    "plugin:tailwindcss/recommended"
  ],
  plugins: ["tailwindcss"],

5. eslint-plugin-simple-import-sort

// .eslintrc.js
 "extends": [
	"others",
    "plugin:tailwindcss/recommended"
  ],
  plugins: ["tailwindcss"],

6. husky & lint-staged

• husky 🐶 : 可以讓我們在如 git commit、git push 執行前，預先處理我們指定的任務
• lint-staged 🚫 💩 : 集中檢查範圍，只針對有變動的檔案，而非整個專案，也可以依據檔案類型，分別設置不同指令。

yarn add husky lint-staged -D

• 專案最初設定一次即可，會在根目錄下產生一個 .husky 資料夾，存放 husky 的相關腳本

npm set-script prepare "husky install"
npm run prepare

• 增加 hook: 指定在 git commit 前先跑過 npx lint-staged 腳本，如果失敗的話，git commit 不會被執行。

npx husky add .husky/pre-commit "npx lint-staged"

• 在.husky 資料夾下產生 pre-commit 檔案

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

lint-staged 設定

// package.json
"lint-staged": {
    "*.{ts,js,jsx,tsx}": [
      "eslint --fix"
    ],
    "pages/**/*.**": "prettier --check --ignore-unknown --write"
  },

7. CommitLint

安裝 commitLint 使用 @commitlint/config-conventional 是 Commitlint 提供的規則包。

yarn add @commitlint/cli @commitlint/config-conventional -D

設定

// commitlint.config.js
module.exports = {
  extends: ["@commitlint/config-conventional"],
};

使用 Husky 為 Commitlint 註冊 Git Hooks

• 使用 husky add 將指令加入 Git hooks ：

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

• 修改完後，要重新註冊 Git hooks ：

yarn

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.