litemall源码阅读2.04管理后台前端litemall-admin之husky与lint

在package.json中有如下两个对象：

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": [
    "eslint --fix",
    "git add"
  ]
}

同时在devDependencies对象中有：

"eslint": "5.15.3",
"eslint-plugin-vue": "5.2.2",
"html-webpack-plugin": "3.2.0",
"husky": "1.3.1",
"lint-staged": "8.1.5",

在scripts字段中有：

"lint": "eslint --ext .js,.vue src",

这几个对象和依赖项的作用是为项目增加代码检查。

先说husky，参照文章https://www.cnblogs.com/jiaoshou/p/12222665.html

就是一个钩子，或者说叫事件。当在执行git相关操作的时候，会在操作前或后让我们进行一些自定义的操作。

这里的

"hooks": {
  "pre-commit": "lint-staged"
}

指的就是在我们输入git commit命令后，在命令执行前执行lint-staged操作。

如果我们把代码改成

"hooks": {
  "pre-commit": ["echo 'litemall 提交前'","lint-staged"]
}

然后再执行git commit，就会得到如下的结果：

 

 

 我暂时是放弃那个中文乱码了。

既然我们已经知道了husky的作用，下面就来描述lint-staged了。

lint-staged运行的命令是

"src/**/*.{js,vue}": [
  "eslint --fix",
  "git add"
]

这边我没有找到详细的文档，这边的语义，应该是对于src下的所有.js .vue文件，进行格式修复。之后执行git add。

至于scripts字段中的lint，执行的时候会对代码进行代码检查。但我执行的时候无法通过。

原因可能是我没有安装相关的插件或者作者没有按照配置文件的标准进行编码。这里暂时不做细究。

与lint相关的配置文件为.eslintrc.js与.eslintignore。这两个文件是vue-cli自动生成的文件。

但这里不对这两个配置文件的详细内容做阅读了，因为我个人想把关注点放在vue本身上。如果以后有机会项目实战再去做详细了解。