通過 5 個(gè)簡單的步驟自動(dòng)執(zhí)行 JavaScript 代碼檢查和格式化

本篇文章將為大家介紹通過五個(gè)步驟，實(shí)現(xiàn)JavaScript代碼的檢查和格式化的自動(dòng)執(zhí)行。下面是為大家展示了詳細(xì)的過程，有興趣的小伙伴們可以一起來學(xué)習(xí)學(xué)習(xí)。

什么是 Git 掛鉤（Hook）？

Git 掛鉤基本上是在重要操作發(fā)生之前觸發(fā)的腳本，例如：在進(jìn)行提交之前，在提交后將代碼推送到存儲(chǔ)庫之前等。你可以前往此處了解有關(guān) Git 掛鉤和不同類型掛鉤的更多 信息

預(yù)提交掛鉤(pre-commit hook) 是你在進(jìn)行提交之前運(yùn)行的掛鉤。

TLDR

1. 安裝 Mocha 和 Chai 進(jìn)行測試
2. 為 Linting 安裝 Eslint
3. 安裝 Pretty 和 Pretty-quick 進(jìn)行格式化
4. 安裝 Husky 以設(shè)置預(yù)提交掛鉤
5. 測試預(yù)提交掛鉤

當(dāng)前項(xiàng)目設(shè)置

我有兩個(gè)文件，第一個(gè)文件名為“utils.js”。它有 4 個(gè)基本的算術(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
}

正如你所看到的，它的格式很奇怪，并且缺少分號。顯然，這是故意完成的。

第二個(gè)文件是 index.js. 它只是從 utils.js 導(dǎo)入函數(shù)并導(dǎo)出它們。

const {add, 
    subtract, 
    divide, 
    multiply} = require('./utils')
module.exports =  {add,subtract, divide, multiply}

這也是故意以奇怪的方式格式化的。

該項(xiàng)目還有一個(gè)使用生成的基本 ?package.json? 文件 ?npm init?

步驟 1 設(shè)置測試

我們將使用 mocha 和 chai 進(jìn)行測試。我們將為每個(gè)函數(shù)編寫一個(gè)測試用例。要深入了解 mocha 和 chai，請參閱 本文。

首先，讓我們安裝 mocha 和 chai

npm install --save-dev mocha

接下來，讓我們安裝chai

npm install --save-dev chai

現(xiàn)在，我們將創(chuàng)建一個(gè)文件“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);
    });
  });
});

我沒有包含整個(gè)測試程序文件，還有幾個(gè)用于乘法和除法的測試用例。

在 ?package.json? 中，在腳本下添加以下內(nèi)容

"test": "mocha --timeout 2000 tester.js"

如果你的 ?package.json? 中沒有“腳本”，請創(chuàng)建一個(gè)。它應(yīng)該是這樣的

"scripts": {
  "test": "mocha --timeout 2000 tester.js"
}

現(xiàn)在你就可以轉(zhuǎn)到終端并運(yùn)行以下命令

npm test

第 2 步設(shè)置 Linter

我們將使用包 eslint。首先，讓我們安裝包

npm install eslint --save-dev

現(xiàn)在我們需要初始化我們的 ?linter?

./node_modules/.bin/eslint --init

你會(huì)收到一堆問題，根據(jù)你的項(xiàng)目回答它們。最后，我們將在 '?package.json?' 的 '?scripts?' 中添加一個(gè)新命令。您可以在我們在上一節(jié)中添加的 '?test?' 命令下添加它。

"lint": "eslint --fix *.js"

這將在您的所有 javascript 文件上運(yùn)行 linter 并盡可能修復(fù) linting 錯(cuò)誤。您還可以通過在文件頂部或某些行上方添加注釋來禁用某些 es-lint 檢查。例如，我在“tester.js”文件中禁用了幾個(gè)檢查

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-undef */

第 3 步設(shè)置 Prettier

我們將不得不安裝幾個(gè)更漂亮 、 更快速的軟件包  來格式化代碼。

使用以下命令安裝 prettier

 npm install prettier -save-dev

使用以下命令快速安裝

npm install pretty-quick --save-dev

現(xiàn)在我們將在“package.json”中的“scripts”部分添加另一個(gè)命令

  "pretty-quick": "pretty-quick"

現(xiàn)在不要運(yùn)行命令。讓我們設(shè)置預(yù)提交掛鉤并自動(dòng)運(yùn)行命令。

第 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 在提交文件之前運(yùn)行上述命令（非?？焖佟int 和測試）。

將 --staged 只運(yùn)行在籌備的文件格式。

步驟 5 測試預(yù)提交掛鉤

現(xiàn)在我們終于可以測試我們的預(yù)提交掛鉤了。首先，添加你的文件

git add .

輸入以下命令以提交文件

git commit -m "Test commit"

你應(yīng)該會(huì)看到 husky 運(yùn)行 prettier、linter 和測試腳本。下面是終端的截圖。

如果 linter 返回錯(cuò)誤或其中一個(gè)測試用例失敗，則提交將失敗，你的文件將保留在暫存區(qū)中而不會(huì)提交。