Taro|Taro (VUE style) 项目增加lint以及git hooks
Lint 是什么？
探讨怎么做之前，我们很有必要给 Lint 来个清晰、准确的定义，wikipedia 的定义如下：
In computer programming, lint is a Unix utility that flags some suspicious and non-portable constructs (likely to be bugs) in C language source code; generically, lint or a linter is any tool that flags suspicious usage in software written in any computer language. The term lint-like behavior is sometimes applied to the process of flagging suspicious language usage. Lint-like tools generally perform static analysis of source code.简单来说，Lint 就是对代码做静态分析，并试图找出潜在问题的工具，实战中我们也用 Lint 来指使用工具的过程。
为什么要 Lint？ 使用 Lint 会有什么好处呢？在我看来至少具有如下 3 点：
- 更少的 Bug，剑桥大学的研究发现，全世界每年因为软 Bug 造成的经济损失约 3120 亿美金；
- 更高的开发效率，工程师平均会花掉 50% 的工作时间定位和解决各种 Bug，其中不乏那些显而易见的低级错误，而 Lint 很容易发现低级的、显而易见的错误；
- 更高的可读性，代码可读性的首要因子是“表面文章”，表面上看起来乱糟糟的代码通常更难读懂；
为Taro脚手架生成的项目添加eslint支持 通常来说在一个VUE项目中，通过@vue/cli 生成的项目，会自动安装所需的npm 依赖，并且在package.json 中生成相关的eslint命令
但对于一个 Taro based VUE style 项目，我们也希望在开发同学提交代码 (git commit) 之前就进行代码规范的检测，这样可以避免后期再不断修改代码异味之类的麻烦出现。
但是@tarojs/cli 生成项目时并没有像@vue/cli 创建项目时自动安装所需的npm lib，也没有在package.json 中生成相应的命令。
那么我们要如何在taro 项目中配置eslint 以及git工作流的检测触发呢？
安装ESLINT相关依赖 首先我们进行eslint本身的配置。
需要安装的npm 依赖如下：
npm install --save-dev eslint eslint-plugin-vue // 用于安装 eslint 以及 适用于vue文件的template部分代码的lint规则
npm i @vue/eslint-config-standard --save-dev // 为了使用更为严格 vue template 代码规则需要安装这个规则
npm install eslint@7.11 // 由于 eslint-config-standard 依赖于eslint > 7.11 因此需要确认本地的eslint版本是否满足要求以上规则的安装，一般情况下就已经满足我们对于taro生成的vue项目进行代码检测了。接下来如果我们需要对eslint规则的应用进行特殊的配置，请修改项目根目录下的.eslintrc.js 文件。
由于我们需要对vue文件进行代码规则检测，因此需要在 .eslintrc.js 文件中新增extends属性：
module.exports = {
...,
extends: [
'plugin:vue/recommended',
'@vue/standard'
],
...
}【Taro|Taro (VUE style) 项目增加lint以及git hooks】更多详情请参见 https://eslint.org/docs/user-...
git hooks 配置 这里首先要介绍一下尤大在vue中使用的yorkie这个库。
yorkie 包 执行
vue create 命令的时候，会安装一个包，叫：yorkie，这个包是尤大 fork 自 husky 的，它俩功能是一样的，都是生成一些 git hooks 文件，读取项目中package.json的相关配置项去执行一些命令，区别是尤大做了一些逻辑和配置上的改动。安装完这个包以后，会自动执行 yorkie 包里面的一个脚本：
bin/install.js安装完成yorkie这个包之后，会在你项目下的
.git/hooks目录中生成很多 git hooks 文件：?project git:(dev) ? ls .git/hooks
applypatch-msgcommit-msg.samplepost-checkoutpost-receivepost-update.samplepre-auto-gcpre-pushpre-rebase.sampleprepare-commit-msgsendemail-validate
applypatch-msg.samplefsmonitor-watchman.samplepost-commitpost-rewritepre-applypatchpre-commitpre-push.samplepre-receiveprepare-commit-msg.sampleupdate
commit-msgpost-applypatchpost-mergepost-updatepre-applypatch.samplepre-commit.samplepre-rebasepre-receive.samplepush-to-checkoutupdate.sample此时，当你执行一些 git 命令的时候，比如：
git push, git commit等，git 就会执行相应的 hook。package.json
这之后，执行git commit 这个命令的时候，git 会去执行 pre-commit 这个 hook。hook执行的内容，可以看到在package.json 中一般已经进行了配置，我们看下在rivendell项目中是如何进行配置的：
"gitHooks": {
"pre-commit": "lint-staged"
}lint-staged
现在如果我们执行git commit 命令时，git hooks 会去自动执行对应的命令，但此时你可能会得到一个错误提示 （如果是vue项目，则作为依赖已经安装），告诉你需要安装lint-staged，接下来我们看看lint-staged 是做什么用的。
如果每次提交代码之前，都会执行eslint去检测所有文件里的代码规则问题，如果代码中触发了规则不允许的代码风格，就会输出所有的问题：
warning: Prop 'isAddOrEdit' requires default value to be set (vue/require-default-prop) at src/view/split/setting/templateEditDialog.vue:112:5:
110 | export default {
111 |props: {
> 112 |isAddOrEdit: {
|^
113 |type: String
114 |}
115 |},error: 'webpack' is assigned a value but never used (no-unused-vars) at vue.config.js:2:7:
1 | const path = require('path')
> 2 | const webpack = require('webpack')
|^
3 | const fs = require('fs')
4 | const SentryWebpackPlugin = require('@sentry/webpack-plugin')
5 | const os = require('os')error: 'SentryWebpackPlugin' is assigned a value but never used (no-unused-vars) at vue.config.js:4:7:
2 | const webpack = require('webpack')
3 | const fs = require('fs')
> 4 | const SentryWebpackPlugin = require('@sentry/webpack-plugin')
|^
5 | const os = require('os')
6 | const resolve = dir => {
7 |return path.join(__dirname, dir)error: 'os' is assigned a value but never used (no-unused-vars) at vue.config.js:5:7:
3 | const fs = require('fs')
4 | const SentryWebpackPlugin = require('@sentry/webpack-plugin')
> 5 | const os = require('os')
|^
6 | const resolve = dir => {
7 |return path.join(__dirname, dir)
8 | }27 errors and 223 warnings found.
30 warnings potentially fixable with the `--fix` option.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! member-admin-site@1.0.0 lint: `vue-cli-service lint`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the member-admin-site@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.可以看到如果项目还未进行过代码风格检测，因此一下检测出来了一万多个lint错误
即便是经过代码规范修正的项目，有时候其他同学的代码中出现了lint问题，在你提交代码的时候报了出来，导致你没法提交代码也是一件很烦人的事情。因此加上lint-staged的能力，在每个人有新的提交时，仅对于有修改的代码进行代码检测，就解决了这样的问题。
Feedly 的工程师 Andrey Okonetchnikov 开发的 lint-staged 就是基于这个想法，其中 staged 是 Git 里面的概念，指待提交区，使用
git commit -a，或者先 git add 然后 git commit 的时候，你的修改代码都会经过待提交区。lint-staged 用法如下：
首先，安装依赖：
npm install -D lint-staged然后，修改 package.json 配置，增加如下入口：
"lint-staged": {
"*.{js,jsx,vue}": [
"eslint --fix", // --fix 模式可选，如果希望lint检测之后自动修复就增加这个模式参数，如果仍然希望开发人员手动修复，则不加这个参数即可
"git add"
]
}总结 对于初期从0到1的项目开发，我们可能没有精力去注意代码风格以及良好的格式。但是不好的代码风格可能隐藏着很多不容易发现的BUG，并且给后来接手修改的同学带来很大的麻烦。
一个不规范的代码文件，让阅读者摸不着头脑，也让修改的人肝到凌晨也搞不清楚其中千丝万缕的逻辑关系。
而这个接手的人可能就是几个月之后的你自己。
所以对于代码规范和格式的精进，不是在浪费时间，反而是为了未来更好节省你的生命。
save your life and save others' too
推荐阅读
- Vue|Vue 响应式原理
- vue前端路由以及vue-router两种模式实例详解
- vue项目中实现el-dialog组件可拖拽效果
- vue项目实现图形验证码
- electron打包vue项目的方法|electron打包vue项目的方法 步骤
- vue项目的创建的步骤(图文教程)
- vue3面试知识点十大问
- bmaplib|bmaplib vue 调用_vue引入百度地图BMapGL，以及辅助工具BMapGLLib 的引入，BMapGL鼠标绘制功能。...
- electron打包vue项目
- vue3项目中配置vite.config.ts时使用path模块报错