Writing in the front

Husky is a tool that adds hooks to Git clients. Once installed, it automatically adds hooks to the.git/ directory in your repository. For example, a pre-commit hook will trigger when you perform a Git commit.

You can implement things like Lint checking, unit testing, and code beautification in pre-commit. Of course, make sure that the commands executed in the pre-commit phase are not too slow, and waiting too long for each commit is not a good experience.

Lint-staged, a tool that simply filters out Git code staging files (files added by Git); This is useful because if we do a review of the entire project code, it can take a long time, but if we do an older project, we have to do a code specification review and modify the previous code, which can be troublesome and lead to big changes in the project.

So this Lint-staged project is a great tool for team projects and open source projects, which act as a specification and discipline for the code that individuals must commit.

Understand githooks

Git Hooks are scripts that trigger when Git executes certain events (commit, push, receive, etc.). Similar to “hook functions”, Hooks that are not set to execute are ignored.

In the.git/hooks directory of your project, there are some sample hook scripts ending in.sample. If you want to enable the corresponding hooks, simply manually remove the suffix. (To enable the hook script, delete the suffix. Sample of a hook. By default, the hook script is disabled.)

However, we generally don’t change files in.git/hooks because we use husky to do this.

husky

  • Husky installation
npm i husky -D --registry=https://registry.npm.taobao.org
Copy the code

Husky generates a series of Git hook scripts in the.git/hooks folder during installation.

One caveat: Keep an eye out for Husky’s setup to see if you have git hooks installed for you.

If installed correctly, you can see that Husky prints the following message:

> node husky install
husky > setting up git hooks  
husky > done
Copy the code

But it’s also possible:

The Git hook installation was skipped because of the PC node version

OK, assuming your Husky installation is working, the hooks that Husky installed for you will take effect. This will trigger the pre-commit hook to huksy at git commit time.

Json file to configure the commands or actions that the Husky hooks need to perform.

"husky": {
  "hooks": {
    "pre-commit": "echo \"git commit trigger husky pre-commit hook\" "}}Copy the code

This way, you will see a pre-commit at Git commit time.

Starting with 1.0.0, husky can be configured using.huskyrc,.huskyrc.json,.huskyrc.js, or husky.config.js files

Execute multiple commands in a hook

  • According to the rules of NPM Script, use &&
"husky": {
  "hooks": {
    "pre-commit": "echo \"git commit trigger husky pre-commit hook\" && npm run test"}}Copy the code
  • If you prefer to use arrays, the suggested approach is in.huskyrc.jsDefine them in
const tasks = arr= > arr.join('&')

module.exports = {
  'hooks': {
    'pre-commit': tasks([
      'npm run lint'.'npm run test'])}}Copy the code

Hook to intercept

To prevent the commit, the pre-commit script must exit with a non-zero exit code.

If your submission is not blocked, check the script exit code.

Of course, Husky can validate not only commit, but also push and other operations. For example, see NPM Husky.

lint-staged

Lint-staged is a configured Linter (or other) task run on a Git staging file (that is, a file that git has added). Lint-staged always passes a list of all staged files to a task.

// package.json

"lint-staged": {
  "src/**/*.{js,vue}": [
    "prettier --write"."eslint --cache --fix"."git add"]}Copy the code

Lint-staged configuration here is that three commands will be executed for all.js. vue in the SRC directory in git’s commits. The first two will be covered in a moment, and the last one will add the processed code back to Git.

The combination of husky, which we introduced earlier, and Husky’s pre-commit hooks will form an automated tool chain.

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"}},"lint-staged": {
  "src/**/*.{js,vue}": ["prettier --write"."eslint --cache --fix"."git add"]}Copy the code

Before committing, do a code review and beautification of the contents of the staging area before adding them to the staging area; Then commit, perfect!!

Starting with V3.1, you can now configure Lint-staged in different ways:

  • Lint-staged in your object package.json
  • Lintstagedrc File in JSON or YML format
  • Lint-lanterns.config. js A file in JS format
  • Pass the configuration file using the –config or -c flag

mrm

MRM is an automation tool. recommended

It will install and configure Husky and Lint-staged code quality tools from the package.json dependency, so be sure to install and configure all code quality tools, such as Prettier and ESlint, before you do this

Install MRM and perform Lint-Staged tasks:

npm i mrm -D --registry=https://registry.npm.taobao.org
npx mrm lint-staged
Copy the code

At this point, dependency tools and configuration files will be automatically installed for you.

MRM documentation, MRM API Doc

The question about Prettier

Prettier is a good plug-in for formatting code, but not recommended for code that already has some iteration completion. When prettier is used, code that doesn’t already have PROBLEMS with ESLint gets more errors for no reason, so you have to go back to the code where prettier is used.

So this is why prettier is performed in Lint-staged versions.

Write in the last

My home page: neveryu. Making. IO/index. HTML

QQ group: 685486827, 832485817