精华内容
下载资源
问答
  • 代码风格和性格一样,每个程序员都有自己的特点...本系列主要介绍目前主流的前端代码格式化的工具。 本篇主要介绍代码提交钩子Husky的用法,在代码被提交到Git仓库之前,我们可以在这里做一些预检查或者格式化,需要...

    代码风格和性格一样,每个程序员都有自己的特点,但对于大家协同开发的项目,还是需要力求代码风格的一致性,以减少Bug,方便互相修改,短时间内能上手,在这条路上诞生了许许多多的工具。本系列主要介绍目前主流的前端代码格式化的工具。

    本篇主要介绍代码提交钩子Husky的用法,在代码被提交到Git仓库之前,我们可以在这里做一些预检查或者格式化,需要做这些操作,我们需要一个Git的提交钩子,简单说就是使用Git命令会触发的函数。

    安装

    npm install husky --save-dev

    配置

    // package.json
    {
      "husky": {
        "hooks": {
          "pre-commit": "npm run test",
          "pre-push": "npm  run test",
          "...": "..."
        }
      }
    }

    1.0.0之后的版本支持了使用.huskyrc.huskyrc.json.huskyrc.js配置文件,可以不放在package.json中。

    Husky支持的Git hooks还是很全面的,如常用的pre-commitpre-push。这样我们就能再一些特定的时间点做一些事情。

    展开全文
  • husky其实就是哈士奇,搞笑的名字,二哈。作用就是在git执行一些操作的时候触发一些钩子,在钩子处执行一些自己需要的命令,比如代码的eslint校验等。最佳实践一般是校验两处,eslint(代码规范)及commit message规范...

    husky其实就是哈士奇,搞笑的名字,二哈。作用就是在git执行一些操作的时候触发一些钩子,在钩子处执行一些自己需要的命令,比如代码的eslint校验等。最佳实践一般是校验两处,eslint(代码规范)及commit message规范

    先安装husky:

    yarn add -D husky

    在项目根目录创建.huskyrc配置文件,内容如下:

    {
      "hooks": {
        "pre-commit": "lint-staged",
        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
      }
    }
    

    其中pre-commit是commit的钩子,会在commit之前执行下lint-staged命令。commit-msg是提交时message的检测钩子,commit前会执行 commitlint -E HUSKY_GIT_PARAMS命令。这里面的两种命令需要安装两个npm包

    一个是lint-staged:

    yarn add -D lint-staged

    一个是commitlint

    yarn add -D @commitlint/{cli,config-conventional}

    项目根目录添加lint-staged的配置文件.lintstagedrc,内容如下:

    {
      "*.{js,json,css,md}": [
        "prettier --write",
        "git add"
      ],
      "*.{ts,tsx}": [
        "eslint --fix",
        "prettier --write",
        "git add"
      ],
    }
    

    里面涉及到有prettier,eslint命令,对应的npm包也需要单独安装,建议安装到全局。

    然后项目根目录继续添加commitlint的配置文件commitlint.config.js,内容如下:

    module.exports = {
      extends: ['@commitlint/config-conventional']
    };

    这样,每次执行git commit -m "xxxx"的时候,就会自动检查代码规范,以及检查message格式了,不符合要求则提交失败。如果特殊情况下不需要检测则执行:

    git commit -m "xxxx" --no-verify

     

    展开全文
  • husky是一个git hook工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push 如何使用husky呢? 这里我们可以使用自动配置命令: npx husky-init && npm install 这里会做三件事: 1....

    我们希望保证代码仓库中的代码都是符合规范的,就需要执行 git commit 命令的时候对其进行校验

    husky是一个git hook工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push
    

    如何使用husky呢?
    这里我们可以使用自动配置命令:

    npx husky-init && npm install

    这里会做三件事:
    1.安装husky相关的依赖:
    在这里插入图片描述
    2.在项目目录下创建 .husky 文件夹:
    在这里插入图片描述
    3.在package.json中添加一个脚本:
    在这里插入图片描述
    接下来,我们需要去完成一个操作:在进行commit时,执行lint脚本:
    在这里插入图片描述
    这个时候我们执行git commit的时候会自动对代码进行lint校验。

    展开全文
  • ``` @commitlint/cli @commitlint/config-angular husky ``` 我安装了上面依赖,也都配置好了,通过...提交失败的,但是用sourceTree提交,随便写的message都是可以成功的,为什么sourceTree没有走husky的钩子啊
  • 这个问题很严重,必须得解决 幸运的是,我们可以通过工具来解决这个看似很棘手的问题: ESLint + Prettier + husky + lint-staged 这套代码自动化规范工具能很好的解决前端代码规范问题 先来说下每个工具都是干嘛的...

    每个开发者都有自己的习惯,代码的风格也不尽相同,比如缩进的格数,结尾加不加分号,定义函数有没有空格,这些看似好像不起眼的风格,但在多人开发的时候,代码commit提交,可能就会出现一大片冲突,或者过多修改过的情况,对项目管理和维护是极其不友好的,而且在review,阅读项目代码的时候,一个项目中出现几种,甚至10几种的代码风格,我相信没人受得了这事,人都有一种惯性思维,习惯看一种风格,切换到其他风格可能需要适应一下,更别说人手一套风格的项目了,这肯定是不能接受的

    代码规范一致性很重要,经历过多人协作项目开发的都知道,代码风格不一样,在commit提交代码的时候,代码可能是一样的,但每行多一个空格,少一个空格,都可能会出现大面积的差异,和冲突,diff比较冲突解决起来就这个环节就能自闭了,这个问题很严重,必须得解决

    幸运的是,我们可以通过工具来解决这个看似很棘手的问题:
    ESLint + Prettier + husky + lint-staged 这套代码自动化规范工具能很好的解决前端代码规范问题

    先来说下每个工具都是干嘛的,最后如何组合在一起在项目中去使用


    ESLint: 可参考

    ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量,维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。

    所有都是可拔插的:

    • 内置规则和自定义规则共用一套规则 API
    • 内置的格式化方法和自定义的格式化方法共用一套格式化 API
    • 额外的规则和格式化方法能够在运行时指定
    • 规则和对应的格式化方法并不强制捆绑使用

    每条规则:

    • 各自独立
    • 可以开启或关闭(没有什么可以被认为“太重要所以不能关闭”)
    • 可以将结果设置成警告或者错误

    如下等等,很多对应使用场景都有对应的规则。

    配置名作用
    array-bracket-newline在数组开括号后和闭括号前强制换行
    array-bracket-spacing强制数组方括号中使用一致的空格
    array-element-newline强制数组元素间出现换行
    block-spacing禁止或强制在代码块中开括号前和闭括号后有空格
    brace-style强制在代码块中使用一致的大括号风格

    更多规则,可参考官方文档
    这些规则都是通过一个.eslintrc.js文件和.eslintignore文件去管理的

    在这里插入图片描述
    .eslintrc.js配置的是代码检查时的代码风格
    .eslintignore配置的是对于哪些文件不做检查,和.gitignore的作用一样
    .eslintignore示例配置如下:

    node_modules/
    dist/
    .yarn/
    src/assets/
    

    .eslintrc.js示例配置如下

    module.exports = {
      "extends": ["airbnb-base"],
      "env": {
        "es6": true,
        "node": true
      },
      "rules": {
        "comma-dangle": ["error", "never"], // 要求或禁止末尾逗号:不允许逗号
        "indent": ["error", 2], // JavaScript代码强制使用一致的缩进:2格缩进
        "semi": ["error", "never"], // 不使用分号
        "arrow-parens": ["error", "as-needed"], // 箭头函数的参数可以不使用圆括号
        "linebreak-style": "off", // 取消换行符\n或\r\n的验证
        "object-curly-newline": ["error", { "consistent": true }], // 花括号内的换行符不一定要格式一致
        "function-paren-newline": "off", // 不验证函数括号内的换行
        "import/extensions": "off", // 取消对文件扩展名的验证
        "no-param-reassign": "off", // 允许对函数参数进行再赋值
        "no-underscore-dangle": "off", // 允许在标识符中使用下划线
        "no-use-before-define": "off", // 允许变量和函数在定义前使用
        "no-unused-expressions": "off", // 允许使用未使用过的表达式,以此来支持a && a()的代码形式
        "no-console": "off", // 启用console控制台
        "consistent-return": "off", // 关闭函数中return的检测
        "no-shadow": "off", // 可以使用同名变量,
        "newline-per-chained-call": "off", //取消方法链调用中的换行符的检测
        "import/newline-after-import": "off"
      }
    }
    

    Prettier

    Prettier是很火的一个代码美化工具,其中文意思是“漂亮的、机灵的”,它能够解析代码,使用你自己设定的规则来对代码的风格进行自动格式化处理,例如 缩进使用4个空格。

    他的整个圈子很强大,有基于各种编辑器的插件(vs code,atom),有脚本类的,有插件类的(eslint的插件eslint-plugin-prettier)

    Prettier 是一个前端的代码格式化工具,支持列表如下:

    • JavaScript,包括 ES2017
    • JSX
    • Flow
    • TypeScript
    • CSS, LESS, and SCSS
    • JSON
    • GraphQL

    简而言之,这个工具能够使输出代码保持风格一致。

    和eslint的关系: eslint能检查出代码的错误,风格不合规则的问题,然后给我们报错,告诉我们在哪里错了,需要我们手动一行一行去改,而Prettier能帮我们去格式化不规范代码,变成规范的,不再需要自己手动去改了,所以在实际项目中eslint和Prettier往往是配合使用的,eslint检查出错误,Prettier格式化不规范代码,这也就需要eslint的检查规则和Prettier的格式化规则需要保持一致

    配合使用方式:把Prettier当作eslint的插件去使用
    安装:

    npm  i -D prettier eslint-plugin-prettier
    

    在eslint的配置文件中添加配置
    .eslintrc 或者 .eslintrc.json 或者 .eslintrc.js文件中

    {
      "plugins": ["prettier"],
      "rules": {
        "prettier/prettier": "error"
      }
    }
    

    Husky:可参考

    如同其他许多的版本控制系统一样,Git 也具有在特定事件发生之前或之后执行特定脚本代码功能(从概念上类比,就与监听事件、触发器之类的东西类似)。Git Hooks 就是那些在Git执行特定事件(如commit、push、receive等)后触发运行的脚本。

    简单的说就是husky这个工具能在一些git的命令上埋下钩子,当我们使用这些命令的时候就会触发之前埋下的脚本,比如常用的pre-commitcommit-msg钩子,能在我们git commit之前调用一下,和提交commit message时再调用一下

    场景: 可用于commit提交代码时,检查代码规范和格式化,也可用于检查commit message是否符合message规范


    lint-staged

    解决的痛点: 每次修改一个文件就给所有文件执行一次lint检查

    在代码提交之前,进行代码规则检查能够确保进入git库的代码都是符合代码规则的。但是整个项目上运行lint速度会很慢,lint-staged能够让lint只检测暂存区的文件,所以速度很快。

    npm i husky lint-staged -D
    
    在这里插入代码片{
      "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
      "lint-staged": {
        "*.js": "eslint --fix"
      }
    }
    

    原理: git commit时触发pre-commit钩子,运行lint-staged命令,对*.js执行eslint命令。eslint要提前配置好。

    npm链接



    在项目中的实际组合应用:

    目标: 保证项目中的每个开发者,推送到远程仓库时,代码的风格是一致的

    思路:

    通过lint工具检查代码规范,通过Prettier工具格式化不规范的代码
    我们可以在 package.json中设置配置lint命令,来帮助开发者开发完后通过npm run lint 命令检查代码规范,同时配置lint:fix命令,在检查完代码后,不规范的代码通过Prettier格式化
    但开发者可能没有代码写完后npm run lint 或者 npm run lint:fix 的习惯怎么办,那就需要通过husky埋下pre-commit脚本,commit之前自动调用npm run lint:fix检查并且格式化代码

    配置过程:

    .eslintrc.js的配置如下:

    module.exports = {
      env: {
        browser: true,
        webextensions: true,
        jquery: true
      },
      plugins: ['prettier'],
      extends: [
        'standard',  //使用standard做代码规范
        'plugin:prettier/recommended',
        'prettier/standard',
      ],
      rules: {
        'prettier/prettier': [
          'error',
          {
            endOfLine: 'auto'
          }
        ],
        // 继承于standard规则,还包含了import,node,promise,具体规则请看 https://standardjs.com/rules-zhcn.html#javascript-standard-style
        'no-useless-escape': 'off', // 禁用不必要的转义,但由于`\$\{${key}\}` 这样的他识别错误,所以关掉它
        'prefer-promise-reject-errors': 'off', // 可以使用非error对象作为promise reject的原因 有时直接 reject 一个字符串还是比较方便的
        'no-mixed-operators': 'warn', // 混合使用不同的操作符最好用括号括起来明确意图  例如 a && b || c 这样写其实虽然挺直接的,但最好写成 (a && b) || c ,因为standard里是错误,此处改为警告就行
        'no-prototype-builtins': 'warn', // 禁止直接使用 Object.prototypes 的内置属性,建议使用 Object.prototype.hasOwnProperty.call(foo, "bar") 这种方式
        'max-depth': ['error', 5], // 函数嵌套过深,提醒重构
        'max-params': ['error', 7], // 函数参数过多, 注意可以使用对象传参,这里应该调整为5好一点,不过考虑项目有历史代码,先调整为7
        'max-nested-callbacks': ['error', 3], // 最大回调深度 为3层
        'prefer-rest-params': 'warn', // 建议使用解构 ...args 来代替 arguments , arguments 没有 Array.prototype 方法,所以有点不方便
        'no-var': 'error', // 禁止使用 var,必须用 let 或 const
        'for-direction': 'error', // 如果一个 for 循环的停止条件永远无法到达,比如,计数器在错误的方向上移动,将陷入无限循环。
        'getter-return': 'error', // 每个 getter 都期望有返回值
        complexity: ['warn', 5], // 所有代码的独立现行路径条数 例如多个 if else
        'no-empty': 'error', // 禁止空块语句
        'no-inner-declarations': 'error', // 禁止在嵌套的语句块中出现function 声明
        'default-case': 'error', // 要求 Switch 语句中有 Default 分支,如果的确没有 可在最后注释 // No Default
        'guard-for-in': 'warn', // 在使用 for in 遍历对象时,会把从原型链继承来的属性也包括进来,最好增加if判断,比如foo.hasOwnProperty(key),不过注意不要违反 no-prototype-builtins
        'max-classes-per-file': ['warn', 1], // 每个文件中建议只包含1个类 单一责任原则
        'no-alert': 'error', // alert、confirm 和 prompt 被广泛认为是突兀的 UI 元素,应该被一个更合适的自定义的 UI 界面代替。
        'no-empty-function': 'error', // 禁止出现空函数,尤其是箭头函数的空语句块,可以在空函数里写一条注释
        'node/handle-callback-err': 'warn' // 当你使用回调模式时,遇到error最好处理
      }
    }
    

    prettier.config.js配置如下: 格式化的风格,和eslint的风格保持一致

    module.exports = {
      printWidth: 120, // 每行代码最大长度
      tabWidth: 2, // 一个tab代表几个空格数,默认为80
      useTabs: false, // 是否使用tab进行缩进,默认为false,表示用空格进行缩减
      semi: false, // 声明后带分号
      singleQuote: true, // 使用单引号
      jsxSingleQuote: true, // 使用单引号
      jsxBracketSameLine: true, // 启用jsx语法,> 放在末尾
      trailingComma: 'none',
      bracketSpacing: true // 对象,数组加空格
    }
    

    package.json文件如下:

    {
      "name": "xxxx",
      "version": "1.0.0",
      "description": "xxxx",
      "private": false,
      "main": "src/index.js",
      "repository": "xxxxx",
      "author": "xxxx",
      "license": "None",
      "engines": {
        "node": ">=10",
        "yarn": ">= 1.0.0"
      },
      "scripts": {
      	"lint": "eslint .",
        "lint:fix": "eslint . --fix"
      },
      "dependencies": {},
      "devDependencies": {
        "autoprefixer": "^9.7.4",
        "husky": "^4.3.0",
        "lint-staged": "^10.5.0",
        "prettier": "^2.1.2",
        "eslint": "^7.11.0",
        //通过使用eslint-config-prettier配置:
        //能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次
        "eslint-config-prettier": "^6.15.0",
        "eslint-config-standard": "^15.0.0",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-prettier": "^3.1.4",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-standard": "^4.0.2",
        "eslint-plugin-vue": "^7.1.0",
      },
      "peerDependencies": {},
      "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
      "lint-staged": {
        "*.{ts,vue,js}": "eslint --fix"
      }
    }
    
    

    配置完后,当我们执行npm run lint 或者 npm run lint:fix后,工具会自动检查或修复代码
    在这里插入图片描述
    或者我们直接git add .git commit 提交时,也会触发husky埋下的钩子,调用lint去检查代码
    在这里插入图片描述
    因为我在代码中加了个debuggereslint --fix是做不到自动修复,他只会针对格式修复,对于console.log,和一些debugger测试的代码,还是需要自己手动删除的

    这样我们就能保证推送到远程仓库中的代码风格都是一致的

    值得一提的就是,代码规范和commit规范,在项目中往往都是同时使用的,我个人认为他们都是项目管理和项目维护的第一道防线,极其重要

    展开全文
  • Nuxjs 以及 前端工程化基础套件.
  • 应用开发成员大部分由于之前是开发后端,对前端开发经验不足以及许多前端知识体系都是在开发过程中现学现用慢慢积累的,另外,痛定思痛总在想对于前端应用代码质量是否也存在诸如Java开发规约扫描插件,类...
  • 1、使用husky添加git hooks(基于husky新版6.0.0进行git hooks) 1、npm install -D husky 2、创建.husky/目录并指定该目录为git hooks所在的目录 3、在package.json中添加prepare脚本 4、执行npm run prepare,...
  • 作用 tslint:代码规范扫描检测 prettier:代码格式化 husky:增加git hook ...husky:npm i --save-dev husky@4.3.0(该版本会在.git/hook中添加hook) lint-staged:npm i lint-staged --save-dev
  • 1.npm install husky 2.pakage.json配置 { "husky": { "hooks": { "pre-commit": "npm run test", // 在commit之前先执行npm run test命令 "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" // 校验commit时...
  • 前言 基于最新的一些库来规范项目, ...-write", "*.{js,css,json,md}": ["prettier --write"] } 总结 其实总体的配置还是挺清晰的,各个工具的都相对独立, 也有自己的专属配置文件~~ 前端的工程化也越来越直观了
  • husky实现git commit规范

    2021-08-24 14:47:52
    本文首发于个人博客网址:https://www.kelen.cc/posts/husky-commit-rule 开发中如何统一git commit规范,对项目的开发和维护以及问题的回溯都很有效果,接下来看看如何实现commit信息规则的校验 commitlint校验...
  • husky

    2021-02-02 18:53:50
    安装(必须先创建仓库再安装husky) git init & npm i husky -D 配置package.json //在仓库中进行提交时;必须得等lint:f对应的npm脚本顺利执行成功之后才会提交代码进仓库 { "pre-commit":"npm run lint:f" } ...
  • husky不生效

    千次阅读 2021-03-05 16:14:22
    husky在升级到v5版本之后变化较大,其配置方式和v4完全不兼容。而且如果在安装完v5之后在退回v4也会导致v4的配置方式不起作用,大概是因为v5会对.git/hooks中的一些文件做出修改,但重新安装v4后没有恢复修改。 解决...
  • husky自定义目录钩子的正确使用

    千次阅读 2021-03-25 13:12:58
    目前有很多Vue+Prettier+Husky钩子的整合应用,基本都是基于.git与所需钩子的项目在同一目录下使用的,husky钩子会自动根据当前目录的.huskyrc的配置自动执行,而当碰到.git与所需提交目录不在同一层级下,就会出现...
  • 用上面这个命令老是不成功,跳出usage 遇到这个问题的小伙伴可以用下面这个命令 node_modules/.bin/husky add .husky/commit-msg 'npx --no-install commitlint --edit $1' 我已经成功了
  • 作为前端工程化中一个不可或缺的的工具,它可以向我们的项目中添加git hooks。同时配合lint-staged可以方便的在代码提交前进行lint。 最近要对一个老项目添加commit-msg校验,同时要在commit前进行eslint校验。之前...
  • husky升级v6版本配置

    千次阅读 2021-03-29 22:07:08
    husky 升级到 v6 配置 官网文档:https://typicode.github.io/husky/#/?id=usage 第 1 步: npx husky-init && yarn 第 2 步: 修改已自动生成的 ./husky/pre-commit 钩子 #!/bin/sh . "$(dirname "$0")/_/...
  • 原文地址:How to Add Commit Hooks to Git with Husky to Automate Code Tasks 如何通过 Git 和 Husky 添加提交钩子并实现代码任务自动化 ???? 原文作者:Colby Fayock 译者:@nsuedu 校对者: 有很多工具可以使...
  • 我们说的 husky 旧版本指的就是 v4 系列的 husky,这一版本被使用的最广,但是如果你现在去安装 husky,默认安装的是最新 v6 版本的,两者差异很大。 先看下 v4 旧版本 husky 的配置文件 .huskyrc.json ( husky v4 ...
  • 1. husky 是什么 husky 是一个 Git Hook 工具。本文主要实现提交前 eslint 校验和 commit 信息的规范校验 简单说就是,当我们运行 git commmit -m ‘xxx’ 时,用来检查 xxx 是否满足固定格式的工具 使用这个工具要...
  • 使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量、统一项目代码风格 Eslint 代码检查,编辑器启用 Eslint 之后,不符合规范的会自动进行提示。 Prettier 让代码变得更 pretty,会更改不符合检测...
  • husky 更新版本的问题

    2021-07-22 14:19:21
    在做前端工程化时husky可以说是一个必不可少的工具。husky可以让我们向项目中方便添加git hooks。通常情况下我只需要如下两步就可在项目中引入并设置好husky: 将husky添加到项目的开发依赖中 npm install -D husky...
  • 前端应用开发架构图谱

    千次阅读 多人点赞 2020-02-11 17:52:50
    个人整理的前端架构图谱,之后会根据这个图谱不断的完善内容。希望这个图谱可以对开发同学的知识脉络有个梳理的作用。 项目创建 脚手架 IDE脚手架 IDE或社区提供的脚手架 业务型脚手架 根据业务特点通过Node写的...
  • `husky` 是一个为 git 客户端增加 hook 的工具。安装后,它会自动在仓库中的 `.git/` 目录下增加相应的钩子;比如 `pre-commit` 钩子就会在你执行 `git commit` 的触发。 那么我们可以在 `pre-commit` 中实现一些...
  • 使用husky和lint-staged实现代码上传自动格式化 在团队开发中,不一定所有人的代码都是符合规范的,为了统一代码格式的一致性,可借鉴的方法就是在提交代码库时进行eslint的校验和自动格式化…… 借助第三方插件进行...
  • 1. 什么是gitHooks? Git Hooks 就是那些在Git执行特定事件...1) 安装husky npm i husky -save-dev 2) 安装list-staged npm i lint-staged husky -save-dev 3) package.json文件如下 "husky": { "hooks": { "pre
  • module.exports = {extends: ['@commitlint/config-conventional']} 第三步:安装Husky Husky 支持所有 Git 钩子,可以在合适的钩子中运行测试、格式化代码、验证commit信息是否符合规范 安装Husky npx husky-init ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,064
精华内容 425
关键字:

前端husky