怎么实现自动执行JavaScript代码检查和格式化
这篇文章主要介绍了怎么实现自动执行JavaScript代码检查和格式化的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么实现自动执行JavaScript代码检查和格式化文章都会有所收获，下面我们一起来看看吧。
什么是 Git 挂钩（Hook）？
Git 挂钩基本上是在重要操作发生之前触发的脚本，例如：在进行提交之前，在提交后将代码推送到存储库之前等。你可以前往此处了解有关 Git 挂钩和不同类型挂钩的更多 信息
预提交挂钩(pre-commit hook) 是你在进行提交之前运行的挂钩。
TLDR
安装 Mocha 和 Chai 进行测试
为 Linting 安装 Eslint
安装 Pretty 和 Pretty-quick 进行格式化
安装 Husky 以设置预提交挂钩
测试预提交挂钩
当前项目设置
我有两个文件，第一个文件名为"utils.js"。它有 4 个基本的算术函数。
const add = (a, b) => a + bconst subtract = (a, b) => a - bconst multiply = (a, b) => a * bconst divide = (a, b) => a / bmodule.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代码检查和格式化"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
