前端項(xiàng)目開(kāi)發(fā)過(guò)程中，由于團(tuán)隊(duì)成員每個(gè)人的開(kāi)發(fā)習(xí)慣和代碼風(fēng)格不同从铲，最終提交到git倉(cāng)庫(kù)的代碼格式不統(tǒng)一對(duì)團(tuán)隊(duì)間的協(xié)作產(chǎn)生阻礙冠王，因此使用工具來(lái)自動(dòng)和強(qiáng)制統(tǒng)一代碼格式是一個(gè)好的選擇蚕甥。

Git Hooks

為了保證提交到git倉(cāng)庫(kù)的代碼是整潔、格式統(tǒng)一的炕舵，通常需要使用Git Hooks何之。Git Hooks是在git操作的某些時(shí)機(jī)自動(dòng)執(zhí)行的一些腳本，常見(jiàn)的Git Hooks如 pre-commit咽筋、post-merge溶推、pre-push等。詳情見(jiàn)Git Hooks官方學(xué)習(xí)文檔。

Git Hooks存儲(chǔ)在git目錄下的hooks子目錄中悼潭，即絕大部分項(xiàng)目中的 .git/hooks庇忌。如下：

Git Hooks

如果直接去該目錄下編寫(xiě)腳本舞箍，對(duì)于大部分開(kāi)發(fā)人員來(lái)說(shuō)不太友好舰褪，因此在前端項(xiàng)目中可以使用husky這個(gè)npm庫(kù)來(lái)簡(jiǎn)化Git Hooks腳本的編寫(xiě)，見(jiàn)https://www.npmjs.com/package/husky疏橄。

husky簡(jiǎn)單介紹

1. 安裝依賴(lài)

yarn add -D husky

2. 在package.json里添加要執(zhí)行的git hooks命令占拍，如：

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm test",
      "post-merge": "sh test.sh",
      "pre-push": "node test.js",
      "...": "..."
    }
  }
}

這里的hooks對(duì)應(yīng).git/hooks下的hooks腳本，里面可以放一些npm命令或者其他自定義的命令捎迫。

lint-staged簡(jiǎn)單介紹

如果要在pre-commit時(shí)自動(dòng)執(zhí)行代碼格式校驗(yàn)晃酒，對(duì)于整個(gè)項(xiàng)目文件執(zhí)行校驗(yàn)命令通常是不合適的，因?yàn)榇a庫(kù)的代碼通常是整潔的窄绒，且每個(gè)提交改動(dòng)的文件一般比較少贝次，因此可以使用lint-staged工具，只對(duì)git暫存區(qū)的文件執(zhí)行腳本彰导。見(jiàn)https://www.npmjs.com/package/lint-staged蛔翅。

1. 安裝依賴(lài)

yarn add -D lint-staged

2. 結(jié)合husky，在提交代碼前只對(duì)暫存區(qū)的代碼執(zhí)行命令位谋，配置如下：

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js}": [
      "sh test.sh"
    ]
  },
}

lint-staged會(huì)自動(dòng)將暫存區(qū)的文件當(dāng)作參數(shù)拼接在要執(zhí)行的命令后面山析，以上命令相當(dāng)于執(zhí)行sh test.js ${files}，對(duì)于v10.x之后的版本掏父，還會(huì)在執(zhí)行命令后自動(dòng)執(zhí)行git add命令笋轨。

eslint

見(jiàn)https://eslint.org/docs/user-guide/getting-started

prettier

見(jiàn)https://prettier.io/docs/en/install.html

與eslint集成見(jiàn)https://prettier.io/docs/en/integrating-with-linters.html

stylelint

見(jiàn)https://stylelint.io/user-guide/get-started

editorconfig

見(jiàn)https://editorconfig.org/，需配合編輯器插件生效

vscode支持eslint和stylelint的配置

vscode插件安裝

• ESLint
• stylelint
• EditorConfig for VS Code

配置settings.json

{
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
   "stylelint.validate": [
        "css",
        "less",
        "postcss",
        "sass",
        "scss"
    ]
}

常用基礎(chǔ)配置（方便拷貝）

文件清單

• .eslintrc
• .prettierrc
• .stylelintrc.json
• package.json
• .editorconfig

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "warn"
  }
}

// .prettierrc
{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 100,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

// .stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-no-invalid-hex": true,
    "block-no-empty": true,
    "selector-pseudo-class-no-unknown": [ true, {
      "ignorePseudoClasses": ["global"]
    } ]
  }
}

// package.json
// scripts里的命令用于手動(dòng)校驗(yàn)
{
  "scripts": {
    "lint": "eslint src/**/*.{js,jsx} --fix",
    "lint:style": "stylelint src/**/*.{css,less} --fix"
  },
  "devDependencies": {
    "eslint": "^5.4.0",
    "eslint-config-prettier": "^6.11.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.2",
    "stylelint": "^13.3.3",
    "stylelint-config-standard": "^20.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix --max-warnings 0"
    ],
    "*.{css,less}": [
      "stylelint --fix --max-warnings 0"
    ]
  }
}

# .editorconfig
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

umi項(xiàng)目的eslint配置和插件列表

// .eslintrc
{
  "extends": ["eslint-config-umi", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "warn",
    "react-hooks/exhaustive-deps": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "eqeqeq": "off"
  }
}

{
  "devDependencies": {
    "babel-eslint": "^9.0.0",
    "eslint": "^5.4.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-config-umi": "^1.4.0",
    "eslint-plugin-flowtype": "^2.50.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.11.1",
  }
}