Pettier

Prettier

Prettier is an opinionated code formatter

Install

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

prettier格式化 忽略文件

# Ignore artifacts:
build
coverage

format all files with Prettier:

npx prettier --write .

** If you use ESLin,**

npm install eslint-config-prettier -D

add “prettier” to the “extends” array in your .eslintrc. file.*

{
  "extends": [
    "xxx....",
    "prettier"
  ]
}

or

{
  "extends": [
    "xxx....",
    "prettier"
  ]
}

eslint

npm install eslint --save-dev
 ./node_modules/.bin/eslint --init

Pre-commit Hook

lint-staged

npm i npx -g
npm i mrm -g 
npx mrm lint-staged

husky

Husky improves your commits and more 🐶 woof!

You can use it to lint your commit messages, run tests, lint code, etc… when you commit or push. Husky supports all Git hooks.

老版

npm install -D husky

{  "husky": {    "hooks": {      "pre-commit": "npm run test", // 在commit之前先执行npm run test命令      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时添加的备注信息是否符合我们要求的规范    }  }}

根据官方的说法，之前husky的工作方式是这样的，为了能够让用户设置任何类型的git hooks都能正常工作，husky不得不创建所有类型的git hooks。这样在git 工作的每个阶段都会调用husky所设置的脚本，在这个脚本中husky会检查用户是否配置该hook，如果有就运行用户配置的命令，如果没有就继续往下执行。

这样做的好处就是无论用户设置什么类型的git hook husky都能确保其正常运行。但是缺点也是显而易见的，即使用户没有设置任何git hook，husky也向git中添加了所有类型的git hook。

那有没有可能让husky只添加我们需要的git hook呢？作者尝试过解决这个问题，但是失败了。究其失败的根本原因，就是因为husky需要在两个地方进行配置才能完成一个完整的git hook功能。一个是在package.json中配置git hook所要执行的真正命令，一个是在.git/hooks/中配置相对应的git hook。也就是说无论是添加还是删除git hook就要保证在这两个地方同步执行对应的操作。作者无法找到一个可靠的方法来同步这两个地方的配置，因此失败了。

作者认为这个问题是由husky工作模型的自身缺陷导致的，如果想要解决就不得不另辟蹊径采用一种新的工作模型。因此新版husky做了破坏性的变更。

husky(6.0)

工作原理

新版的husky使用了从git 2.9开始引入的一个新功能core.hooksPath。core.hooksPath可以让你指定git hooks所在的目录而不是使用默认的.git/hooks/。这样husky可以使用husky install将git hooks的目录指定为.husky/，然后使用husky add命令向.husky/中添加hook。通过这种方式我们就可以只添加我们需要的git hook，而且所有的脚本都保存在了一个地方（.husky/目录下）因此也就不存在同步文件的问题了。

npm install -D husky

{  "scripts": {      "prepare": "husky install"  }}

prepare脚本会在npm install（不带参数）之后自动执行。也就是说当我们执行npm install安装完项目依赖后会执行 husky install命令，该命令会创建.husky/目录并指定该目录为git hooks所在的目录。

添加git hooks，运行一下命令创建git hooks

npx husky add .husky/pre-commit "npm run test"

运行完该命令后我们会看到.husky/目录下新增了一个名为pre-commit的shell脚本。也就是说在在执行git commit命令时会先执行pre-commit这个脚本。pre-commit脚本内容如下：

#!/bin/sh. "$(dirname "$0")/_/husky.sh"npm run  test

配合commitlint

老版

{  "husky": {    "hooks": {      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时添加的备注信息是否符合我们要求的规范    }  }}

在husky(6.00)中$HUSKY_GIT_PARAMS这个变量不再使用了，取而代之的是$1。在新版husky中我们的commit-msg脚本内容如下：

#!/bin/sh. "$(dirname "$0")/_/husky.sh"#--no-install 参数表示强制npx使用项目中node_modules目录中的commitlint包npx --no-install commitlint --edit $1

commitlint

commitlint helps your team adhering to a commit convention. By supporting npm-installed configurations it makes sharing of commit conventions easy.

install

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

To lint commits before they are created you can use Husky’s commit-msg hook:

# Install Husky v6npm install husky --save-dev# oryarn add husky --dev# Activate hooksnpx husky install# oryarn husky install# Add hooknpx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"

创建commitlint.config.js

module.exports = {  extends: ["@commitlint/config-conventional"],  rules: {    "type-enum": [      2,      "always",      [        "build",        "ci",        "chore",        "docs",        "feat",        "fix",        "perf",        "refactor",        "revert",        "style",        "test",      ],    ],    // 'subject-full-stop': [0, 'never'],    // 'subject-case': [0, 'never']  },};//   build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交//   ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交//   docs：文档更新//   feat：新增功能//   fix：bug 修复//   perf：性能优化//   refactor：重构代码(既没有新增功能，也没有修复 bug)//   style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)//   test：新增测试用例或是更新现有测试//   revert：回滚某个更早之前的提交//   chore：不属于以上类型的其他类型