Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to automatically perform JavaScript code checking and formatting related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to automatically implement JavaScript code checking and formatting articles will have a harvest, let's take a look at it.

What is a Git Hook?

Git hooks are basically scripts that are triggered before important actions occur, such as before committing, before code is pushed to the repository after committing, and so on. You can go here to learn more about Git hooks and different types of hooks.

Pre-commit hooks (pre-commit hook) are hooks that you run before committing.

TLDR

Install Mocha and Chai for testing

Install Eslint for Linting

Install Pretty and Pretty-quick for formatting

Install Husky to set the pre-commit hook

Test pre-commit hook

Current project settings

I have two files. The first file is called "utils.js". It has four basic arithmetic functions.

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}

As you can see, it has a strange format and lacks a semicolon. Obviously, it was done on purpose.

The second file is index.js. It just imports functions from utils.js and exports them.

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

This is also deliberately formatted in a strange way.

The project also has a basic package.json file npm init that uses the generated

Step 1 set up the test

We will use mocha and chai for testing. We will write a test case for each function.

Npm install-save-dev mocha

Next, let's install chai

Npm install-save-dev chai

Now we will create a file "tester.js" and add some tests to it.

/ * 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);});})

I didn't include the entire test program file, and there were several test cases for multiplication and division.

In package.json, add the following under the script

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

If you don't have a "script" in your package.json, please create one. It's supposed to be like this.

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

Now you can go to the terminal and run the following command

Npm test step 2 set up Linter

We will use the package eslint. First, let's install the package

Npm install eslint-save-dev

Now we need to initialize our linter

. / node_modules/.bin/eslint-- init

You will receive a bunch of questions and answer them according to your project. Finally, we will add a new command to the 'package.json'' scripts'. You can add it under the 'test' command we added in the previous section.

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

This will run linter on all your javascript files and fix linting errors as much as possible. You can also disable some es-lint checks by adding comments at the top of the file or above some lines. For example, I disabled several checks in the "tester.js" file

/ * eslint-disable import/no-extraneous-dependencies * / / * eslint-disable no-undef * / step 3 set Prettier

We will have to install several prettier and faster packages to format the code.

Install prettier using the following command

Npm install prettier-save-dev

Use the following command to quickly install

Npm install pretty-quick-save-dev

Now we will add another command to the "scripts" section of "package.json"

"pretty-quick": "pretty-quick"

Do not run the command now. Let's set up the pre-commit hook and run the command automatically.

Step 4 set up husky

We will use husky to set up our pre-commit hooks. Installation package

Npm install husky@4-save-dev

If you install V5 for husky, you may need to do some extra work to set up the pre-commit hook.

Add the following to "package.json" after installation

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

Basically, we tell husky to run the above command (very fast, lint, and test) before submitting the file.

Will-- staged will only run in the prepared file format.

Step 5 Test the pre-submission hook

Now we can finally test our pre-submission hook. First, add your files

Git add.

Enter the following command to submit the file

Git commit-m "Test commit"

You should see husky running prettier, linter, and test scripts.

This is the end of the article on "how to automate JavaScript code checking and formatting". Thank you for reading! I believe you all have a certain understanding of "how to automatically perform JavaScript code checking and formatting". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.