共计 4751 个字符,预计需要花费 12 分钟才能阅读完成。
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-…
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