怎么實現自動執行JavaScript代碼檢查和格式化

這篇文章主要介紹了怎么實現自動執行JavaScript代碼檢查和格式化的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么實現自動執行JavaScript代碼檢查和格式化文章都會有所收獲，下面我們一起來看看吧。

什么是 Git 掛鉤（Hook）？

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

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

TLDR

1. 安裝 Mocha 和 Chai 進行測試

2. 為 Linting 安裝 Eslint

3. 安裝 Pretty 和 Pretty-quick 進行格式化

4. 安裝 Husky 以設置預提交掛鉤

5. 測試預提交掛鉤

當前項目設置

我有兩個文件，第一個文件名為“utils.js”。它有 4 個基本的算術函數。

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 導入函數并導出它們。

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

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

該項目還有一個使用生成的基本 package.json 文件 npm init

步驟 1 設置測試

我們將使用 mocha 和 chai 進行測試。我們將為每個函數編寫一個測試用例。

npm install --save-dev mocha

接下來，讓我們安裝chai

npm install --save-dev chai

現在，我們將創建一個文件“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 中，在腳本下添加以下內容

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

如果你的 package.json 中沒有“腳本”，請創建一個。它應該是這樣的

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

現在你就可以轉到終端并運行以下命令

npm test

第 2 步設置 Linter

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

npm install eslint --save-dev

現在我們需要初始化我們的 linter

./node_modules/.bin/eslint --init

你會收到一堆問題，根據你的項目回答它們。最后，我們將在 'package.json' 的 'scripts' 中添加一個新命令。您可以在我們在上一節中添加的 'test' 命令下添加它。

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

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

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

第 3 步設置 Prettier

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

使用以下命令安裝 prettier

 npm install prettier -save-dev

使用以下命令快速安裝

npm install pretty-quick --save-dev

現在我們將在“package.json”中的“scripts”部分添加另一個命令

  "pretty-quick": "pretty-quick"

現在不要運行命令。讓我們設置預提交掛鉤并自動運行命令。

第 4 步設置husky

我們將使用 husky 來設置我們的預提交鉤子。安裝包

npm install husky@4 --save-dev

如果您安裝 husky 的 V5，您可能需要做一些額外的工作來設置 pre-commit 鉤子。

安裝后在“package.json”中添加以下內容

"husky": {
    "hooks": {
       "pre-commit": "pretty-quick --staged && npm run lint && npm test"
    }
  }

基本上，我們告訴 husky 在提交文件之前運行上述命令（非常快速、lint 和測試）。

將 --staged 只運行在籌備的文件格式。

步驟 5 測試預提交掛鉤

現在我們終于可以測試我們的預提交掛鉤了。首先，添加你的文件

git add .

輸入以下命令以提交文件

git commit -m "Test commit"

你應該會看到 husky 運行 prettier、linter 和測試腳本。

關于“怎么實現自動執行JavaScript代碼檢查和格式化”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么實現自動執行JavaScript代碼檢查和格式化”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。