通过 5 个简单的步骤自动执行 JavaScript 代码检查和格式化

2021-08-25 11:36:14 浏览数 (4)

本篇文章将为大家介绍通过五个步骤，实现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 进行测试。我们将为每个函数编写一个测试用例。要深入了解 mocha 和 chai，请参阅 本文。

首先，让我们安装 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 和测试脚本。下面是终端的截图。

屏幕截图 2021-08-18 at 12.59.18 AM

如果 linter 返回错误或其中一个测试用例失败，则提交将失败，你的文件将保留在暂存区中而不会提交。


JavaScript

0 人点赞