约束团队代码规范(eslint、prettier、husky)

今天带来一个创建项目团队合作开发的规范。跟上我的步伐，从0-1开始吧！

eslint

ESLint 是一个可配置的 JavaScript 检查器。它可以帮助你发现并修复 JavaScript 代码中的问题。问题可以指潜在的运行时漏洞、未使用最佳实践、风格问题等。

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

在项目根目录下创建 .eslintrc 文件，配置规则。
忽略配置

在项目根目录下创建.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

//修复部分规则
npx eslint --fix --ext .js,.vue src

prettier

prettier 的作用是对代码进行风格检查，针对的文件类型更加全面，例如js、ts、css、html、json、md等。这些可以通过配置进行检测。

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

在项目根目录下创建.prettierrc文件，配置规则
忽略配置

再羡慕根目录下创建.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提交前对缓存区的文件通过配置规则进行格式验证

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

npx --no-install lint-staged

.commit-msg 文件

对提交说明是否规范进行校验

#!/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

对提交说明是否规范进行校验

安装

npm install --save-dev commitizen

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

配置

执行如下命令配置config文件：

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

standard-version

自动升级版本、打 tag 和生成 changelog

安装

npm install --save-dev standard version

配置