国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

pre-commit鉤子,代碼質量檢查

Prasanta / 1390人閱讀

摘要:目前基本使用三款代碼質量檢查工具。使用腳本檢查,可以參考里面如何使用文件名是在之前啟用的鉤子函數,利用查看當前有哪些文件修改過,只對指定文件夾中修改的文件使用進行代碼檢查,漸進式對整個項目實現代碼規范。

目前基本使用三款js代碼質量檢查工具: jslint, jshint, eslint。許多IDE里面也有對應的檢查插件,在每次ctrl + s 保存文件的時候,檢查當前文件是否符合規范,保證代碼質量。
許多團隊都會指定一套代碼規范code review,更加嚴格的檢查每次代碼修改。 也可以在git commit之前,檢查代碼,保證所有提交到版本庫中的代碼都是符合規范的,

在看vue源碼時,不免修改代碼,就會觸發里面配置好的鉤子函數。于是,仔細研究了一下vue配置方法,可以發現配置非常簡單。

git 鉤子文檔上介紹非常詳細,git init后,在.git/hooks文件中,有一些.simple結尾的鉤子示例腳本,如果想啟用對應的鉤子函數,只需手動刪除后綴。所以,列出兩種配置方法:

1. 手動修改鉤子文件

按照文檔上,配置鉤子腳本,修改hooks中文件名對應的鉤子文件,啟用鉤子。使用shell腳本檢查,可以參考vue1.x 里面如何使用

    !/usr/bin/env bash
    
     # get files to be linted
    FILES=$(git diff --cached --name-only | grep -E "^src|^test/unit/specs|^test/e2e")
    
     # lint them if any
    if [[ $FILES ]]; then
      ./node_modules/.bin/eslint $FILES
    fi

文件名是pre-commit,在commit 之前啟用的鉤子函數, 利用 git diff查看當前有哪些文件修改過,只對指定文件夾中修改的文件使用eslint進行代碼檢查,漸進式對整個項目實現代碼規范。

腳本寫好后,不用每次都手動復制到.git/hooks目錄下,只需對當前文件創建軟連接,到指定目錄,在package.json中配置腳本命令,

"scripts": {
   "install-hook": "ln -s ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
}

在項目初始化后, 執行npm run install-hook,很方便地配置好了pre-commit 鉤子

2. 利用yorkie or husky + lint-staged 構建鉤子

在 vue最新的版本中,已經使用尤大改寫的youkie, youkie實際是fork husky,然后做了一些定制化的改動, 使得鉤子能從package.json的 "gitHooks"屬性中讀取,

{
  "gitHooks": {
    "pre-commit": "foo"
  }
}

使用方法跟husky 類似,可以查看husky 文檔,介紹非常詳細。

 npm install husky --save-dev
 # or npm install yorkie --save-dev

安裝完成后,可以發現已經改寫了hooks 目錄中的文件,只需在package.json 中配置對應鉤子要執行的腳本。
husky 配置:

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

回頭看看,vue中如何配置

// package.json
 "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
  }
 "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  }

前面提到,利用git diff,只lint當前改動的文件,lint-staged就非常準確的解決了這一問題,從這個包名,就可以看出,Run linters on git staged files,只針對改動的文件進行處理。
結合husky一起使用,安裝依賴:

npm install --save-dev lint-staged husky

修改package.json 文件

{
+ "husky": {
+   "hooks": {  
+     "pre-commit": "lint-staged"
+   }
+ },
+ "lint-staged": {
+   "*.js": ["eslint --fix", "git add"]
+ }
}

使用了eslint,需要配置.eslintrc, lint-staged還有一個好處,可以在lint后,更加靈活,執行其他腳本,嘗試進行修改錯誤,比如 eslint --fix 檢查后并修復錯誤。

上面列出的vue 文件使用了類似的配置,另外增加了 commit-msg 鉤子,對提交說明進行檢查,在 scripts/verify-commit-msg.js文件中可以找到檢查腳本,

const chalk = require("chalk")
const msgPath = process.env.GIT_PARAMS
const msg = require("fs").readFileSync(msgPath, "utf-8").trim()

const commitRE = /^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)((.+))?: .{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    `  ${chalk.bgRed.white(" ERROR ")} ${chalk.red(`invalid commit message format.`)}

` +
    chalk.red(`  Proper commit message format is required for automated changelog generation. Examples:

`) +
    `    ${chalk.green(`feat(compiler): add "comments" option`)}
` +
    `    ${chalk.green(`fix(v-model): handle events on blur (close #28)`)}

` +
    chalk.red(`  See .github/COMMIT_CONVENTION.md for more details.
`) +
    chalk.red(`  You can also use ${chalk.cyan(`npm run commit`)} to interactively generate a commit message.
`)
  )
  process.exit(1)
}

利用process.env.GIT_PARAMS 找到目錄,讀取msg 說明,進行檢查。

使用 husky 要注意,對應屬性名已經改為HUSKY_GIT_PARAMS , 而不是原始的 GIT_PARAMS 環境變量。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98516.html

相關文章

  • pre-commit鉤子代碼質量檢查

    摘要:目前基本使用三款代碼質量檢查工具。使用腳本檢查,可以參考里面如何使用文件名是在之前啟用的鉤子函數,利用查看當前有哪些文件修改過,只對指定文件夾中修改的文件使用進行代碼檢查,漸進式對整個項目實現代碼規范。 目前基本使用三款js代碼質量檢查工具: jslint, jshint, eslint。許多IDE里面也有對應的檢查插件,在每次ctrl + s 保存文件的時候,檢查當前文件是否符合規范...

    stefanieliang 評論0 收藏0
  • tslint pre-commit 配置教程

    摘要:而解決的需求既是拒絕向倉庫提交錯誤代碼。的配置就在項目文件夾下面的文件夾中。而存在報錯的話,會終止提交。而只是單獨鉤子,因此還需要在這個鉤子下去做相同的配置。 tslint 配合pre-commit的意義 為什么用pre-commit 加 tslint(jshint,eslint原理都類似),因為在項目中我們會經常忘記主動的去做代碼檢查,雖然結合webpack各種構建工具下,存在*sl...

    bang590 評論0 收藏0
  • 前端自動化工作流中的hooks

    摘要:例如提供的用于修改的鉤子就需要在的同時從遠程服務器下載到本地來替換,代碼如下這當然是一種好方式。安裝簡單到看完配置就懂了吧,直接在中增加這一項,并直接把想執行的語句寫在里面即可。在前端的日常工作中,經常會出現當執行一種操作之前(之后)需要同時執行另一種操作的情況,比如我們希望在每次git commit之前都運行eslint代碼檢查、npm install之前檢查項目依賴等。作為經典的情況,各...

    marek 評論0 收藏0

發表評論

0條評論

Prasanta

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<