Taro (VUE style) 项目增加lint以及git hooks

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Taro (VUE style) 项目增加lint以及git hooks相关的知识,希望对你有一定的参考价值。

参考技术A

探讨怎么做之前,我们很有必要给 Lint 来个清晰、准确的定义,wikipedia 的定义如下:

简单来说,Lint 就是对代码做静态分析,并试图找出潜在问题的工具,实战中我们也用 Lint 来指使用工具的过程。

使用 Lint 会有什么好处呢?在我看来至少具有如下 3 点:

可以毫不客气的说,如果你不做 Lint,就是在浪费自己的时间,浪费团队的资源。

通常来说在一个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本身的配置。

需要安装的npm 依赖如下:

以上规则的安装,一般情况下就已经满足我们对于taro生成的vue项目进行代码检测了。接下来如果我们需要对eslint规则的应用进行特殊的配置,请修改项目根目录下的.eslintrc.js 文件。

由于我们需要对vue文件进行代码规则检测,因此需要在 .eslintrc.js 文件中新增extends属性:

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

这里首先要介绍一下尤大在vue中使用的yorkie这个库。

执行 vue create 命令的时候,会安装一个包,叫:yorkie,这个包是尤大 fork 自 husky 的,它俩功能是一样的,都是生成一些 git hooks 文件,读取项目中package.json的相关配置项去执行一些命令,区别是尤大做了一些逻辑和配置上的改动。

安装完这个包以后,会自动执行 yorkie 包里面的一个脚本:bin/install.js

安装完成yorkie这个包之后,会在你项目下的.git/hooks目录中生成很多 git hooks 文件:

此时,当你执行一些 git 命令的时候,比如:git push, git commit等,git 就会执行相应的 hook。

这之后,执行git commit这个命令的时候,git 会去执行 pre-commit 这个 hook。

hook执行的内容,可以看到在package.json 中一般已经进行了配置,我们看下在rivendell项目中是如何进行配置的:

lint-staged

现在如果我们执行git commit 命令时,git hooks 会去自动执行对应的命令,但此时你可能会得到一个错误提示 (如果是vue项目,则作为依赖已经安装),告诉你需要安装lint-staged,接下来我们看看lint-staged 是做什么用的。

如果每次提交代码之前,都会执行eslint去检测所有文件里的代码规则问题,如果代码中触发了规则不允许的代码风格,就会输出所有的问题:

可以看到如果项目还未进行过代码风格检测,因此一下检测出来了一万多个lint错误

即便是经过代码规范修正的项目,有时候其他同学的代码中出现了lint问题,在你提交代码的时候报了出来,导致你没法提交代码也是一件很烦人的事情。因此加上lint-staged的能力,在每个人有新的提交时,仅对于有修改的代码进行代码检测,就解决了这样的问题。

Feedly 的工程师 Andrey Okonetchnikov 开发的 lint-staged 就是基于这个想法,其中 staged 是 Git 里面的概念,指待提交区,使用 git commit -a,或者先 git add 然后 git commit 的时候,你的修改代码都会经过待提交区。

lint-staged 用法如下:

首先,安装依赖:

然后,修改 package.json 配置,增加如下入口:

对于初期从0到1的项目开发,我们可能没有精力去注意代码风格以及良好的格式。但是不好的代码风格可能隐藏着很多不容易发现的BUG,并且给后来接手修改的同学带来很大的麻烦。

一个不规范的代码文件,让阅读者摸不着头脑,也让修改的人肝到凌晨也搞不清楚其中千丝万缕的逻辑关系。

而这个接手的人可能就是几个月之后的你自己。

所以对于代码规范和格式的精进,不是在浪费时间,反而是为了未来更好节省你的生命。

save your life and save others\' too

将 VSCode linting 与 vue-cli linting 同步

【中文标题】将 VSCode linting 与 vue-cli linting 同步【英文标题】:Synchronising VSCode linting with vue-cli linting 【发布时间】:2019-04-15 17:54:03 【问题描述】:

我已经使用 Vue CLI 创建了一个新项目,其中启用了 Typescript 和 Airbnb linter 等选项,它本身工作正常,但现在我希望这个 linting 显示在 VSCode 编辑器中,而不仅仅是在项目运行时出现执行错误服务。这似乎让我陷入了安装不同扩展的兔子洞,这些扩展都有不同的配置文件,都有自己的特殊性,直到由于单引号或双引号等问题,我无法满足 linter它想在使用之间来回反弹。

我的印象是,没有一种好的方法可以让 Vue 服务器的 linter 规则与 VSCode 扩展使用的规则并发(来自相同的规则集)。我正在尝试使用 Airbnb linting 规则,即使我单独为 VSCode 和通过 NPM 安装规则集,它们仍然无法对齐。

有什么建议可以解决这个问题/让 VSCode 复制服务 linter 的规则集?

【问题讨论】:

【参考方案1】:

事实证明,除了 ESLint 之外,我的所有 VSCode 扩展都需要卸载(尽管我尝试使用 Typescript [有 TSLint] 和 Vue 组件[有自己的,又是单独的 linter])

只需要这个用户/工作区配置:

"eslint.validate": [
    
        "language": "vue",
        "autoFix": true
    ,
    
        "language": "html",
        "autoFix": true
    ,
    
        "language": "javascript",
        "autoFix": true
    ,
    
        "language": "typescript",
        "autoFix": true
    
]

【讨论】:

以上是关于Taro (VUE style) 项目增加lint以及git hooks的主要内容,如果未能解决你的问题,请参考以下文章

Taro3 + Vue3 + NutUi 校验配置

Vue/TypeScript/Linting 排除 .vue 文件

使用 vue-cli serve 时如何禁用 linting?

Vue CLI 3 - 构建不会因 lint 错误而失败

代码库增加eslint自动进行检查代码并且美化代码

使用vue3+ typeScript 开发小程序