約束團(tuán)隊代碼規(guī)范(eslint、prettier、husky)

今天帶來一個創(chuàng)建項目團(tuán)隊合作開發(fā)的規(guī)范。跟上我的步伐，從0-1開始吧！

eslint

ESLint 是一個可配置的 JavaScript 檢查器。它可以幫助你發(fā)現(xiàn)并修復(fù) JavaScript 代碼中的問題。問題可以指潛在的運(yùn)行時漏洞、未使用最佳實踐、風(fēng)格問題等。

安裝
```
npm install eslint  --save-dev 
```
配置

在項目根目錄下創(chuàng)建 .eslintrc 文件，配置規(guī)則。
忽略配置

在項目根目錄下創(chuàng)建.eslintrcignore文件，配置忽略檢查的文件

測試

https://zh-hans.eslint.org/docs/latest/use/command-line-interface

// 語法
npx eslint [options] [file|dir|glob]*

//檢查兩個文件
npx eslint file1.js file2.js
//檢查多個文件
npx eslint src/**
//檢查多個文件
npx eslint --ext .js,.vue src

//修復(fù)部分規(guī)則
npx eslint --fix --ext .js,.vue src

?

prettier

prettier 的作用是對代碼進(jìn)行風(fēng)格檢查，針對的文件類型更加全面，例如js、ts、css、html、json、md等。這些可以通過配置進(jìn)行檢測。

安裝
```
npm install prettier --save-dev
```
配置

在項目根目錄下創(chuàng)建.prettierrc文件，配置規(guī)則
忽略配置

再羨慕根目錄下創(chuàng)建.prettierignore文件，配置忽略檢查的文件
測試
- 格式化某個文件
  npx prettier --write XX.js
- 格式化全部文件
  npx prettier --write .
- 檢查文件是否已格式化
  npx prettier --check .

eslint-config-prettier

Turns off all rules that are unnecessary or might conflict with Prettier.

This lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier.

Note that this config only turns rules off, so it only makes sense using it together with some other config.

安裝

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

配置

eslintrc: Add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.
```
{
  "extends": [
    "prettier"
  ]
}
```

husky

husky git 鉤子啟動

安裝
```
npm husky-init && npm install	
```

配置


npx husky add .husky/pre-commit

npx husky add .husky/commit-msg

.pre-commit文件

利用lint-staged提交前對緩存區(qū)的文件通過配置規(guī)則進(jìn)行格式驗證

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

npx --no-install lint-staged

.commit-msg 文件

對提交說明是否規(guī)范進(jìn)行校驗

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

npx --no -- commitlint --edit ""

lint-staged

Run linters against staged git files and don't let ?? slip into your code base!

安裝
```
npm install --save-dev lint-staged
```

配置

package.json

{
	...
	"lint-staged": {
    "*.vue": [
      "eslint --fix",
      "prettier --write"
    ]
  },
  ...
}

commitizen

對提交說明是否規(guī)范進(jìn)行校驗

安裝

npm install --save-dev commitizen

npm install --save-dev @commitlint/config-conventional @commitlint/cli

配置

執(zhí)行如下命令配置config文件：

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

standard-version

自動升級版本、打 tag 和生成 changelog

安裝

npm install --save-dev standard version

配置