本篇文章將為大家介紹通過五個步驟,實現(xiàn)JavaScript代碼的檢查和格式化的自動執(zhí)行。下面是為大家展示了詳細(xì)的過程,有興趣的小伙伴們可以一起來學(xué)習(xí)學(xué)習(xí)。
什么是 Git 掛鉤(Hook)?
Git 掛鉤基本上是在重要操作發(fā)生之前觸發(fā)的腳本,例如:在進(jìn)行提交之前,在提交后將代碼推送到存儲庫之前等。你可以前往此處了解有關(guān) Git 掛鉤和不同類型掛鉤的更多 信息
預(yù)提交掛鉤(pre-commit hook) 是你在進(jìn)行提交之前運行的掛鉤。
TLDR
- 安裝 Mocha 和 Chai 進(jìn)行測試
- 為 Linting 安裝 Eslint
- 安裝 Pretty 和 Pretty-quick 進(jìn)行格式化
- 安裝 Husky 以設(shè)置預(yù)提交掛鉤
- 測試預(yù)提交掛鉤
當(dāng)前項目設(shè)置
我有兩個文件,第一個文件名為“utils.js”。它有 4 個基本的算術(shù)函數(shù)。
const add =
(a, b) => a + b
const subtract =
(a, b) => a - b
const multiply =
(a, b) => a * b
const divide =
(a, b) => a / b
module.exports = {
add,subtract,multiply,divide
}
正如你所看到的,它的格式很奇怪,并且缺少分號。顯然,這是故意完成的。
第二個文件是 index.js. 它只是從 utils.js 導(dǎo)入函數(shù)并導(dǎo)出它們。
const {add,
subtract,
divide,
multiply} = require('./utils')
module.exports = {add,subtract, divide, multiply}
這也是故意以奇怪的方式格式化的。
該項目還有一個使用生成的基本 ?package.json
? 文件 ?npm init
?
步驟 1 設(shè)置測試
我們將使用 mocha 和 chai 進(jìn)行測試。我們將為每個函數(shù)編寫一個測試用例。要深入了解 mocha 和 chai,請參閱 本文。
首先,讓我們安裝 mocha 和 chai
npm install --save-dev mocha
接下來,讓我們安裝chai
npm install --save-dev chai
現(xiàn)在,我們將創(chuàng)建一個文件“tester.js”,并向其中添加一些測試。
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-undef */
const {
add, subtract, divide, multiply,
} = require('.');
assert = require('chai').assert;
describe('Sum', () => {
context('Adding 1 and 1', () => {
it('should return 2', () => {
assert(add(1, 1) === 2);
});
});
});
describe('Subtract', () => {
context('Subtracting 1 from 1', () => {
it('should return 0', () => {
assert(subtract(1, 1) === 0);
});
});
});
我沒有包含整個測試程序文件,還有幾個用于乘法和除法的測試用例。
在 ?package.json
? 中,在腳本下添加以下內(nèi)容
"test": "mocha --timeout 2000 tester.js"
如果你的 ?package.json
? 中沒有“腳本”,請創(chuàng)建一個。它應(yīng)該是這樣的
"scripts": {
"test": "mocha --timeout 2000 tester.js"
}
現(xiàn)在你就可以轉(zhuǎn)到終端并運行以下命令
npm test
第 2 步設(shè)置 Linter
我們將使用包 eslint。首先,讓我們安裝包
npm install eslint --save-dev
現(xiàn)在我們需要初始化我們的 ?linter
?
./node_modules/.bin/eslint --init
你會收到一堆問題,根據(jù)你的項目回答它們。最后,我們將在 '?package.json
?' 的 '?scripts
?' 中添加一個新命令。您可以在我們在上一節(jié)中添加的 '?test
?' 命令下添加它。
"lint": "eslint --fix *.js"
這將在您的所有 javascript 文件上運行 linter 并盡可能修復(fù) linting 錯誤。您還可以通過在文件頂部或某些行上方添加注釋來禁用某些 es-lint 檢查。例如,我在“tester.js”文件中禁用了幾個檢查
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-undef */
第 3 步設(shè)置 Prettier
我們將不得不安裝幾個更漂亮 、 更快速的軟件包 來格式化代碼。
使用以下命令安裝 prettier
npm install prettier -save-dev
使用以下命令快速安裝
npm install pretty-quick --save-dev
現(xiàn)在我們將在“package.json”中的“scripts”部分添加另一個命令
"pretty-quick": "pretty-quick"
現(xiàn)在不要運行命令。讓我們設(shè)置預(yù)提交掛鉤并自動運行命令。
第 4 步設(shè)置husky
我們將使用 husky 來設(shè)置我們的預(yù)提交鉤子。安裝包
npm install husky@4 --save-dev
如果您安裝 husky 的 V5,您可能需要做一些額外的工作來設(shè)置 pre-commit 鉤子。
安裝后在“package.json”中添加以下內(nèi)容
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged && npm run lint && npm test"
}
}
基本上,我們告訴 husky 在提交文件之前運行上述命令(非??焖佟int 和測試)。
將 --staged 只運行在籌備的文件格式。
步驟 5 測試預(yù)提交掛鉤
現(xiàn)在我們終于可以測試我們的預(yù)提交掛鉤了。首先,添加你的文件
git add .
輸入以下命令以提交文件
git commit -m "Test commit"
你應(yīng)該會看到 husky 運行 prettier、linter 和測試腳本。下面是終端的截圖。
如果 linter 返回錯誤或其中一個測試用例失敗,則提交將失敗,你的文件將保留在暫存區(qū)中而不會提交。