Use the Node build tool to constrain your Git operations, and you’ll never be happy with it.

One, foreword

Today, when I saw the git commit specification written by my friend, I couldn’t help but think of all the commit information I couldn’t bear to look at. Of course, I can’t blame myself. I’ve already covered some of the tools and specifications in the above article, but I’m going to add a few more operations to make this a simple tutorial.

Second, the ESLint

Since we want to standardize, of course, to start with the most basic JS code specification, here we choose ESLint as the code specification detection tool.

1. Install ESLint
    cnpm i -g eslint
Copy the code
2. Set the configuration file

Create.eslintrc.js file in the root directory, there are many configurations, for different environments configuration is not quite the same, you can check the official website documentation, here we simply configure the common JS file detection:

    module.exports = {
      extends: 'eslint:recommended'.env: {
        browser: true.node: true.commonjs: true.es6: true.mocha: true
      },
      root: true.rules: {
        'no-console': 'off'}}Copy the code
3. Verify code quality and specification

We can create an app.js file, enter something, and perform validation with the following command:

   eslint app.js 
Copy the code

If your code doesn’t meet the requirements, the console doesn’t tell you what’s wrong.

In fact, esLint is familiar with the fact that various project scaffolding tools have webPack integrated functionality, so when implementing NPM run Dev, if the code does not conform to esLint’s specification, you will not be able to complete the dev build.

Git add and save it. Now I know, this is not a good habit, so change.

Husky and Lint-staged

That’s right, you read that right, it’s a Husky. As stated in the Official Husky documentation,

Git hooks made easy

Compare the word hook to the life cycle in Vue and you’ll see what’s going on. So, all we need to do is go through this library and do something indescribable before git adds.

Not enough with this, we also need Lint-passage passage, which is clearly described in the documentation:

Run linters on git staged files

1. Install dependencies
    cnpm i -D husky@next lint-staged
Copy the code
2. Configure package.json
    "lint-staged": {
      "*.js": [
        "eslint"]},"husky": {
      "hooks": {
        "pre-commit": "lint-staged"}}Copy the code

Next, git’s add operations can no longer be performed arbitrarily.

Four, validate – commit – MSG

The use of this library is covered in detail in the previous articles, including some reference articles for the Angular Commit specification. Here we also need to configure husky:

    "husky": {
      "hooks": {
        "pre-commit": "lint-staged"."commit-msg": "validate-commit-msg"}}Copy the code

At this point, basically a small code normalization submission workflow is complete.

5. Generate logs

Of course, if you look at some open source projects, there is a chnagelog.md file in their projects, which is used to record the information of the updated iterations of the project. Here, we can use Conventional – Changelog to generate log files:

1. Install dependencies
    cnpm i -D conventional-changelog
    cnpm i -g conventional-changelog-cli
Copy the code
2. Configure package.json
    "scripts": {
      "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"."addChangelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
    }
Copy the code

You can then use NPM Run Changelog to generate a complete log, as long as your Commit complies with the Angular Commit standard.

Write at the end

Csslint can also be added to pre-commit. Of course, there are many more examples. You are welcome to share your own bad experiences.

If you like this article, please pay attention to my subscription number. I love typing code and check out more content.