在開發Node.js後端項目時，保持一致的代碼風格和自動檢測潛在問題是提升團隊協作效率的關鍵。本文將詳細介紹如何在node-express-boilerplate項目中配置和使用ESLint與Prettier，實現代碼質量與格式的自動化管理。

項目代碼規範現狀分析

node-express-boilerplate已集成ESLint與Prettier作為基礎代碼規範工具鏈。通過檢查package.json可知，項目已安裝以下核心依賴：

  • ESLint相關：eslint、eslint-config-airbnb-base、eslint-plugin-prettier
  • Prettier相關：prettier、eslint-config-prettier

項目同時提供了便捷的npm腳本命令：

"lint": "eslint .",
"lint:fix": "eslint . --fix",
"prettier": "prettier --check **/*.js",
"prettier:fix": "prettier --write **/*.js"

ESLint配置詳解

項目ESLint配置文件為.eslintrc.json，採用了"extends+plugins"的擴展式配置方案：

{
  "env": {
    "node": true,
    "jest": true
  },
  "extends": ["airbnb-base", "plugin:jest/recommended", "plugin:security/recommended", "plugin:prettier/recommended"],
  "plugins": ["jest", "security", "prettier"],
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-console": "error",
    "func-names": "off",
    "no-underscore-dangle": "off",
    "consistent-return": "off",
    "jest/expect-expect": "off",
    "security/detect-object-injection": "off"
  }
}

核心配置説明：

  • 環境配置：啓用Node.js和Jest測試環境
  • 規則集擴展：
  • airbnb-base：採用Airbnb基礎JavaScript風格指南
  • plugin:jest/recommended：Jest測試規範
  • plugin:security/recommended：安全代碼檢測規則
  • plugin:prettier/recommended：整合Prettier格式化規則
  • 自定義規則：關閉了部分嚴格規則（如允許下劃線命名），增加了安全檢測

Prettier配置詳解

項目Prettier配置文件為.prettierrc.json，包含基礎格式化規則：

{
  "singleQuote": true,
  "printWidth": 125
}

關鍵配置説明：

  • singleQuote: true：使用單引號而非雙引號
  • printWidth: 125：每行代碼最大長度為125字符（大於默認的80字符）

實際使用指南

手動執行代碼檢查與格式化

檢查代碼問題：

npm run lint
npm run prettier

自動修復問題：

npm run lint:fix
npm run prettier:fix

配置編輯器自動格式化

  1. 安裝VS Code插件：
  • ESLint
  • Prettier - Code formatter
  1. 添加工作區設置（.vscode/settings.json）：
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

常見問題解決方案

  1. ESLint與Prettier規則衝突
    已通過eslint-config-prettier禁用所有與Prettier衝突的ESLint規則，衝突自動以Prettier規則為準。
  2. 忽略特定文件檢查
    創建.eslintignore和.prettierignore文件，添加需要忽略的路徑：
node_modules/
dist/
*.config.js
  1. 自定義規則覆蓋
    如需修改規則，直接在.eslintrc.json的rules字段中添加配置，例如：
"rules": {
  "no-console": ["warn", { "allow": ["warn", "error"] }],
  "linebreak-style": "off"
}

規範執行流程建議

為確保代碼規範落地，建議在開發流程中集成：

  1. 提交前檢查：配置husky實現pre-commit鈎子
npm install husky --save-dev
npx husky install
npx husky add .husky/pre-commit "npm run lint:fix && npm run prettier:fix"
  1. CI流程集成：在GitHub Actions或Jenkins中添加檢查步驟
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run lint

通過以上配置，node-express-boilerplate項目可實現代碼質量自動檢測、風格統一格式化，大幅減少團隊協作中的代碼規範爭議，提升代碼維護性。完整配置文件可參考項目倉庫中的.eslintrc.json和.prettierrc.json。