A project is often developed by more than one person, and multi-person collaboration naturally requires version control to properly manage code, such as Git, SVN, etc. Personally, I like Git and github for straight men. Git can also be used in NPM scripts in addition to managing code versions, otherwise I wouldn’t be so verbose about this. The use of NPM script in Git involves the use of pre and Post hooks, also known as Git hooks, which help us do things like commit and push code.

Tell me something about the scene

  • Local Warehouse configurationpre-commit 和 pre-push, it is to giveThe code to commitDo check;
  • Remote warehouse configurationpre-receive, it is to givePull off the codeCheck to ensure compliance with native code specifications. If this step is not available, native developers are lazy to use it--no-verify(or-n) can circumvent native code checks;

Note: Some lazy can steal, some can’t. Some laziness, although temporarily convenient for themselves, but in the long run, not only pit themselves, but also pit the whole team.

Overall check

A full check is a full traversal of the matching files.

The NPM script in the front-end community has been written in tandem with Git-hooks, and I like husky because it’s easy to use, and supports many Git hooks, such as Lint-staged. What are you waiting for =>

Installing dependency packages

npm install husky -D
/ / or
yarn add husky -D
Copy the code

write

{   
    "scripts": {
        "lint:js": "# check js \n eslint. / SRC /**/*.js"."test": N cross-env NODE_ENV=test mocha tests/"
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint:js"."pre-push": "npm run test"}}},Copy the code

Analyze the

Git /hooks: husky hooks

perform

1. The code is developed and ready to be submitted to the local repository

git commit -am "Use of Git hooks"
Copy the code

Pre-commit is called and an error is found:

2. Solved the wrong request.js problem, submitted it to the remote branch, and found that there was a problem in the unit test:

3. Resolve unit test errors and commit to the remote branch repository

carryinglint-stagedLet you fly

This is basically what we need, but… The reality is that there are some scenarios where we take on other people’s projects, and if we follow the steps above, every time we submit code, we check all the code (the example above only checks the JS code) and we find n files with warnings or errors (hundreds of them), and are on the verge of breaking down, trying to refactor, or running away from the rhythm.

Lint-staged scenarios are, of course, what helped us solve such things, adding Prettier to things like this.

Installing dependency packages

npm install lint-staged prettier -D
/ / or
yarn add lint-staged prettier -D
Copy the code

write

{
    "scripts": {
        "lint:js": "# check js \n eslint. / SRC /**/*.js"."test": N cross-env NODE_ENV=test mocha tests/"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"."pre-push": "npm run test"}},"lint-staged": {
        "linters": {
            "src/**/*.js": [
                "prettier --tab-width 4 --write"."eslint --fix"."git add"]."src/**/*.{css, less}": [
                "prettier --tab-width 4 --write"."stylelint --fix"."git add"]},"ignore": [
            "**/dist/*.min.js"]}}Copy the code

Analyze the

  • lint-stagedIs a front-end file filtering tool, will not format anything, no code rules configuration file, need to configure their own;
  • lint-stagedIt is used to check the file that is currently changed (or that was submitted to the local repository as a secondary file);
  • pre-commitHook activation will executelint-stagedCommand, and then all of the files in commited.js 和 .{less, css}filesexlint --fix 、 stylelint --fix 和 git add;
  • prettierCode format optimization, it can optimizejs, jsx, ts, css, less, scss, json, md, ...Ensuring that the team’s code style is quite useful.

If you don’t like lint-passage written in package.json, you can extract it and put it in.lintStageDRC:

{
    "linters": {
      "src/**/*.js": [
        "prettier --tab-width 4 --write"."eslint --fix"."git add"]."src/**/*.{css, less}": [
        "prettier --tab-width 4 --write"."stylelint --fix"."git add"]},"ignore": [
      "**/dist/*.min.js"]}Copy the code

perform

git commit -am "Explanation of this submission"
Copy the code

SRC /utils contains two files: request.js and index.js, both of which have error code, but index.js was written by someone else and belongs to the historical version. In fact, only the request.js file was changed this time. If we follow the previous steps, we will check that there are problems with both files, which is not what we want, because the index.js file was not written by me, and the code inside is not easy to change (business logic and functional logic do not understand). At this time, Lint-staged value was drawn out by simply reporting errors in the Request.js file (know me) :

More than a few words of mouth

Now you can use it in your project, what are you waiting for!!

You can…

NPM Script complex scene application

Next: NPM Script in practice

Directory: NPM Script small book