歡迎來到本系列文章，這些內容都是從我的開源項目 C-Shopping 衍生而來的。在這個系列中，我們將深入探討 Next.js 和其他技術的各個方面，分享我在開發 C-Shopping 時積累的見解和最佳實踐。如果你發現這些文章有幫助，請考慮在 GitHub 上為項目點亮一顆星星。你的支持對我來説意義重大，也會激勵我進行更多的開發！

項目在線演示地址：

• docker 部署地址：http://shop.huanghanlian.com/
• vercel 部署地址：https://c-shopping-three.vercel.app/

項目傳送門：https://github.com/huanghanzhilian/c-shopping

本篇文章圍繞C-Shopping 電商項目的代碼實戰，研究如何整合 ESLint、Prettier、Husky、Lint-staged 和 Commitlint 等工程化利器，提高代碼質量和開發效率。

ESLint —— 代碼質量的守護神（工具層）

什麼是 ESLint？

ESLint 是一款強大的靜態代碼分析工具，有助於發現和修復代碼中的問題，並確保整個團隊遵循一致的代碼規範。

如何整合 ESLint 到你的 C-Shopping 項目？

nextjs 已經提供了一個開箱即用的集成ESLint體驗。將next lint作為腳本添加到package.json中

提提供了兩種使用模式：
Strict：嚴格模式（本項目中使用）；
Base：基礎模式。

在nextjs項目中創建.eslintrc.json

• 安裝 ESLint 及相關依賴

  npm install --save-dev eslint eslint-config-next

• 配置 .eslintrc 文件

  {
    "extends": "next/core-web-vitals"
  }

• ESLint 檢查

  npm run lint

如果你的編輯器是vscode，可以配合ESLint插件一起使用

Prettier —— 代碼格式化的魔法師（工具層）

什麼是 Prettier？

Prettier 是一款自動化代碼格式化工具，可以確保整個 C-Shopping 項目的代碼風格保持一致，讓你的代碼更美觀。

與 ESLint 的完美協同

• 安裝

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

• 更新.eslintrc.js文件

  {
    "extends": [
      "next/core-web-vitals",
      "plugin:prettier/recommended",
      "prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code.
    ]
  }

• 添加 NPM 腳本並使用

  "scripts": {
      "format": "prettier --write './**/*.+(js|ts|jsx|tsx)'"
  },

  npm run format

如果你的編輯器是vscode，可以配合ESLint插件和prettier插件一起使用

vscode編輯器，如果想保存執行eslint，prettier

在根目錄新建.vscode文件夾，新建settings.json文件

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

在vscode，安裝eslint、prettier兩插件，保存項目代碼就會執行eslint和prettier配置

個性化 Prettier 配置

我們將詳細討論如何根據 C-Shopping 項目的需求調整 Prettier 的配置，讓格式化符合你團隊的規範。

Husky —— Git Hooks 的得力助手（流程層）

什麼是 Husky？

husky是一個git hook工具，用於你在提交代碼的時候進行自定義的操作。

在 C-Shopping 項目中使用 Husky

在 C-Shopping 項目中集成 Husky，讓其在關鍵的 Git Hooks 上執行我們指定的任務，確保代碼提交符合標準。

• 在git commit 之前執行自定義命令，檢查代碼

  npm install husky --save-dev
  npm pkg set scripts.prepare="husky install"
  npm run prepare
  
  npx husky add .husky/pre-commit "npm run lint"
  npx husky add .husky/pre-commit "npm run format"
  npx husky add .husky/pre-commit "git add ."

• commit lint 代碼提交時，限制代碼提交規範
  限制代碼提交規範https://github.com/conventional-changelog/commitlint
  安裝

  # Install commitlint cli and conventional config
  npm install --save-dev @commitlint/{config-conventional,cli}
  # For Windows:
  npm install --save-dev @commitlint/config-conventional @commitlint/cli
  
  # Configure commitlint to use conventional config
  echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

  Add hook

  npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

  如果提交不安裝規範來會報錯

  

Lint-staged —— 精準 Linting，高效開發（流程層）

什麼是 Lint-staged？

lint-staged 是一個工具，可以在 Git 暫存區的文件上運行指定的 lint 工具，以便於僅在需要時執行 lint 檢查。它通常與 Husky 配合使用，以在提交代碼前運行 lint-staged。使用 lint-staged 可以大大提高 lint 檢查的效率，因為只需要針對本次提交的文件執行 lint 檢查，而不是所有的文件。

在 C-Shopping 項目中應用 Lint-staged

在根目錄新建.lintstagedrc.js

module.exports = {
  // Lint then format TypeScript and JavaScript files
  '/**/*.(ts|tsx|js)': filenames => [
    `eslint --fix ${filenames.join(' ')}`,
    `prettier --write ${filenames.join(' ')}`,
  ],

  // Format MarkDown and JSON
  '/**/*.(md|json)': filenames => `prettier --write ${filenames.join(' ')}`,
}

修改pre-commit文件

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

# npm run lint
# npm run format
npx lint-staged

git add .

結語

通過這一系列的實戰指南，你將全面掌握如何運用 ESLint、Prettier、Husky、Lint-staged 和 Commitlint 等工程化工具，打造一個更出色的項目！

最後

希望你在本文中找到了對你的項目實用的見解。如果你對 C-Shopping ：https://github.com/your-username/C-Shopping 及其相關技術感興趣，歡迎在 GitHub 上查看項目。如果你喜歡這些內容並期望看到更多類似的文章，請別忘了給倉庫點亮一顆星星。