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 很容易发现低级的、显而易见的错误;

  • 更高的可读性,代码可读性的首要因子是“表面文章”,表面上看起来乱糟糟的代码通常更难读懂;

可以毫不客气的说,如果你不做 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'
 ],
 ...
}

更多详情请参见 https://eslint.org/docs/user-guide/configuring/


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-msg         commit-msg.sample          post-checkout  post-receive  post-update.sample     pre-auto-gc        pre-push         pre-rebase.sample   prepare-commit-msg         sendemail-validate
applypatch-msg.sample  fsmonitor-watchman.sample  post-commit    post-rewrite  pre-applypatch         pre-commit         pre-push.sample  pre-receive         prepare-commit-msg.sample  update
commit-msg             post-applypatch            post-merge     post-update   pre-applypatch.sample  pre-commit.sample  pre-rebase       pre-receive.sample  push-to-checkout           update.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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352