最终实现效果说明:
用 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-commit\src\test.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:\fe\pre-commit\src\test.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)的更多相关文章

  1. 利用Git钩子实现代码发布

    目录 1.什么是git钩子 2.安装一个钩子 3.常用的钩子脚本类型 3.1 客户端钩子 3.1.1 pre-commit 3.1.2 prepare-commit-msg 3.1.3 commit- ...

  2. maven项目配置findbugs插件 使用git钩子控制代码的提交

    maven项目配置findbugs插件对代码进行静态检测 当发现代码有bug时,就不让用户commit代码到远程仓库里 没有bug时才可以commit到远程仓库中 (1)新建maven项目 ,配置fi ...

  3. 使用 Eslint & standard 规范前端代码

    前言 JavaScript的动态语言类型,给它带来了独特的魅力,产生了风格多样的开发范式,同时也带来了一些问题,从运行时常见的 undefined .null 报错,到代码随意的加减分号.换行.空格, ...

  4. Vue+ESLint+Git钩子函数pre-commit配置教程

    一.创建Vue项目eslint-standard vue create eslint-standard 二.创建.eslintrc.* 删除package.json中的eslintConfig配置 我 ...

  5. 一款检测代码中TODO的eslint插件

    一款检测代码中TODO的eslint插件 前言 看了我标题进来的同学应该也知道我做的是个啥东西 没错是一个eslint插件,前端魔法师们日常所使用的工具之一 什么?你不知道eslint是干嘛的--吃鲸 ...

  6. Git 钩子

    1. 概念概述 1.1. 安装钩子 1.2. 脚本语言 1.3. 钩子的作用域 2. 本地钩子 2.1. 预提交钩子 Pre-Commit 2.2. 准备提交信息钩子 Prepare Commit M ...

  7. 关于执行findbugs,checkstyle,jacoco插件检测代码,GitHook的脚本编写

    Git钩子的作用: (pre-commit ) 在用户执行 git commit -m "xxx" 命令之前,先执行pre-commit文件中的脚本命令 在pre-commit文件 ...

  8. Git钩子:自定义你的工作流

    Git钩子是在Git仓库中特定事件发生时自动运行的脚本.它可以让你自定义Git内部的行为,在开发周期中的关键点触发自定义的行为. Git钩子最常见的使用场景包括推行提交规范,根据仓库状态改变项目环境, ...

  9. 通过Gradle Plugin实现Git Hooks检测机制

    背景 项目组多人协作进行项目开发时,经常遇到如下情况:如Git Commit信息混乱,又如提交者信息用了自己非公司的私人邮箱等等.因此,有必要在Git操作过程中的适当时间点上,进行必要的如统一规范.安 ...

随机推荐

  1. 二十、linux文件系统讲解

    1.分区和文件系统的关系: 为什么需要格式化呢?这是因为分区文件系统在没有格式化前,操作系统是无法识别系统分区的格式的,就没办法组织文件目录属性和权限等内容,把分区格式化成操作系统支持的某个文件系统后 ...

  2. python版本不同,修改cmd下的默认版本

    原文出处 https://blog.csdn.net/zyx_ly/article/details/93137014  感谢博主分享 即修改系统环境变量的位置,把想设置成为默认的上移即可

  3. php获取mysql大小

      查看指定数据库大小:  SELECT sum(DATA_LENGTH)+sum(INDEX_LENGTH) FROM information_schema.TABLES where    TABL ...

  4. XRichText

    XRichText是一个可以显示Html富文本的TextView.可以用于显示新闻.商品详情等场景.欢迎star.fork,提出意见. 使用 Gradle : compile 'cn.droidlov ...

  5. 吴裕雄--天生自然 HADOOP大数据分布式处理:修改CenterOS 7 IP设置

  6. Jenkins+ant+jmeter搭建接口自动化测试环境

    一.jmeter 1.下载jdk并安装配置 2.下载jmeter,并解包 下载地址:http://jmeter.apache.org/download_jmeter.cgi 二.ant 1.下载解包并 ...

  7. deeplearning.ai 改善深层神经网络 week1 深度学习的实用层面

    1. 应用机器学习是高度依赖迭代尝试的,不要指望一蹴而就,必须不断调参数看结果,根据结果再继续调参数. 2. 数据集分成训练集(training set).验证集(validation/develop ...

  8. fedoar29配置漏洞平台webgoat

    fedoar29配置漏洞平台webgoat 该环境基于java环境,故需要配置相应的java版本 查看java版本 1 java -version 结果如下: 123 openjdk version ...

  9. 关于(int argc char **argv)

    演示使用opencv显示一幅图片: #include <iostream> #include <core/core.hpp> #include <highgui/high ...

  10. [LC] 79. Word Search

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...