我是靠谱客的博主 难过芒果,最近开发中收集的这篇文章主要介绍 用 git 钩子,检测代码规范性(eslint、standard),觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

最终实现效果说明:
用 git commit 提交代码之前,利用 pre-commit git 钩子,实现代码规范检测(eslint、standard 规范),符合规范之后才可以提交到 git 仓库。这样在团队合作开发时,可以统一代码风格,如果某些同志代码不符合规范,是无法进行提交代码的。

我的demo地址:
demo地址

规范doc:
standard规范
eslint规范

git 钩子
git 钩子

那么问题来了,这种验证是如何实现的呢?!

请确保已经安装了: node | npm | git
安装传送门:node | npm | git

先说一下我的目录结构:


|——node_modules
# 项目资源依赖(npm install 之后出现改文件夹)
|
pre-commit ——— |——src —— test.js
# 项目代码(项目业务逻辑)
|
|——package.json
# 本地安装 npm 包 (npm init 之后出现该文件)

一、步骤如下(下面是 standard 规范验证):

  • 先按照鄙人的目录先创建目录,然后先后执行如下命令:

    
    git init
    // 将本地项目设置为 git 项目
    git remote add origin url
    // url 为自己的 git 仓库地址
    npm init
    // 将 pre-commit 项目设置为 npm 项目
    npm install --save-dev standard
    // 安装 standard 规范
    npm install --save-dev husky@next
    // 安装 husky git 钩子
    npm install --save-dev snazzy
    // 安装 snazzy ,美化 standard 报错提示,eslint 规范不需要安装
  • 安装好依赖资源后,更改 package.json 文件

    // package.json
    {
    "husky": {
    "hooks": {
    "pre-commit": "standard "src/**/*.{js,vue,wpy}" | snazzy",
    }
    }
    }
    注:检测 src 目录下的所有文件后缀为 .js || .vue || .wpy 的文件编码,是否符合规范。
    若不符合,git 钩子将会阻止 git 继续 commit, 并且会报出错误信息;
    若符合代码规范,git commit 就会成功提交到本地仓库。

当然你可以绕过代码检测强制提交:

git add . && git commit --no-verify -m "代码规范强制提交测试"

standard 规范错误提示如下:

// standard 规范默认错误提示:
D:pre-commitsrctest.js:2:19: Extra semicolon.
------------------------------------------------
// 利用 snazzy 美化后的错误提示:
2:19
error
Extra semicolon
✖ 1 problem

二、步骤如下(下面是 eslint 规范验证):

  • 先按照鄙人的目录先创建目录,然后先后执行如下命令:

    
    git init
    // 将本地项目设置为 git 项目
    git remote add origin url
    // url 为自己的 git 仓库地址
    npm init
    // 将 pre-commit 项目设置为 npm 项目
    npm install --save-dev eslint
    // 安装 eslint 规范
    npm install --save-dev husky@next
    // 安装 husky git 钩子
    注意,执行命令:
    $ ./node_modules/.bin/eslint --init
    // 生成 .eslintrc.js 文件,可自定义代码风格

    注:eslint 自定义代码规范详情 传送门;.eslintrc.js配置详解传送门

  • 安装好依赖资源后,更改 package.json 文件

    // package.json
    {
    "husky": {
    "hooks": {
    "pre-commit": "eslint "src/**/*.{js,vue,wpy}"",
    }
    }
    }

当然你可以绕过代码检测强制提交:

git add . && git commit --no-verify -m "代码规范强制提交测试"

eslint 规范错误提示如下:

// eslint 规范错误提示
D:fepre-commitsrctest.js
1:13
error
Strings must use doublequote
quotes
1:28
error
Expected linebreaks to be 'LF' but found 'CRLF'
linebreak-style
1:28
error
Missing semicolon
semi
2:1
error
Unexpected console statement
no-console
2:20
error
Expected linebreaks to be 'LF' but found 'CRLF'
linebreak-style
✖ 5 problems (5 errors, 0 warnings)
✖ 1 problem

按照相应的错提示,更改代码,符合规范后,即可提交到 git 仓库。

声明:有任何问题欢迎留言!未经作者同意禁止转载!谢谢!

欢迎访问我的 git 博客:传送门

最后

以上就是难过芒果为你收集整理的 用 git 钩子,检测代码规范性(eslint、standard)的全部内容,希望文章能够帮你解决 用 git 钩子,检测代码规范性(eslint、standard)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(54)

评论列表共有 0 条评论

立即
投稿
返回
顶部