[Front-end persuasion guide] Front-end engineering - constraint specification

preface

In front-end engineering, constraint specification is a very important link, not ten engineers, ten code styles, which will undoubtedly increase the team’s maintenance burden and psychological pressure on the code, especially the students with obsessive-compulsive disorder, a look is different from my style, directly change all, leaving other students in the wind chaos.

The outline

The constraint specifications involved in this paper mainly include:

ESLint
IDE
Git Hooks
conclusion
Package. The json file

ESLint

ESLint is no stranger to finding and fixing problems in JavaScript code

Feature 1: Find problems

ESLint statically analyzes your code to find problems.

Feature two: automatic repair

Many problems found by ESLint can be fixed automatically. ESLint fixes are syntactically aware, so you won’t encounter errors introduced by traditional find and replace algorithms.

Feature three: customization

Preprocessing code, using custom parsers, and writing your own rules that work with ESLint’s built-in rules. You can customize ESLint to work exactly the way your project needs.

How to configure

npm install eslint --save-dev
Copy the code

Rules need to be configured centrally. ESLint by default reads configuration file.eslintrc for parsing, while rule sets are configured in rules

{
    "rules": {
        // Function parentheses are preceded by no Spaces
        'space-before-function-paren': ['error', 'never'],
        // Close requires require() in the top-level module scope
        'global-require': 0.// close Close class methods must use this
        'class-methods-use-this': 0,}}Copy the code

The rules configuration reference documentation and best practices can be found below: ESlint-Rules

So esLint has so many rules that we need to study them one by one and then configure them one by one?

Of course not. A github god has come up with an elegant set of rules

Part One — CTRL C + CTRL V

A simple and useful configuration provided officially: eslint-recommended

Part two – extends

The good team at Airbnb has created a particularly restrictive set of specifications: Airbnb /javascript

When configuring.eslintrc, the config.extends extends extends the existing.eslintrc configuration file by omiting the eslint-config- prefix

For example, with airbnb-base, we’ll add our own configuration file based on the esLint-config-airbnb-base esLint configuration file

{
  "extends": ["airbnb-base"]."rules": {
    // Function parentheses are preceded by no Spaces
    'space-before-function-paren': ['error', 'never'],
    // Close requires require() in the top-level module scope
    'global-require': 0.// close Close class methods must use this
    'class-methods-use-this': 0,}}Copy the code

The following rule can be used for vue projects: NPM install –save-dev eslint-config-vue

{
    "extends": "vue"
}
Copy the code

For umi projects, umi- Fabric configuration files containing prettier, ESLint, stylelint, etc

npm i @umijs/fabric --save-dev

{
    "extends": [require.resolve('@umijs/fabric/dist/eslint')]
}
Copy the code

IDE

The editor uses vscode as an example

We need to install a plugin: esLint

Open the configuration

Switch to JSON configuration information

For configuration information, see the following link: Microsoft-vscode-eslint

You are advised to enable the following two configurations:

{
    "eslint.format.enable": true.// Use case formatting code
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // It will be fixed automatically when the code is saved}},Copy the code

Git Hooks

Some of you are going to look at this and say, this is too complicated, I don’t want to do it, can I make it a little bit simpler, the way I type the code a little bit simpler, I’m just going to submit the code instead of all the bells and whistles.

But then he was blindsided. He couldn’t submit it. It was intercepted.

The big brothers who intercepted him were:

pre-commit

This is the hook that Git runs before you type the commit information. It is used to check incoming snapshots, for example, to see if anything is missing, to make sure tests are running, and to check code.

In the project directory, you can see all of Git’s hooks

The big brother is not enough, too thin, and the left dragon protection – Husky

Husky (Not Doggie husky 🐶)

You can use it to commit messages, run tests, lint code, etc when you commit or push (all hooks)

// Tip: After we've already configured ESLint, do the following

// Download husky 4.x
npm install husky@4.2. 5 --save-dev

/ / configuration package. Json
/ / add scripts
"scripts": {
    "lint": "eslint . --cache"
},
// Add husky configuration
"husky": {
    "hooks": {
      "pre-commit": "npm run lint"}},Copy the code

Now create a demo.js and write the following

// TODO
const a = 3
Copy the code

If your previous ESLint setup was successful, you will see the following prompt

Git commit -m ‘test’

🎉🎉🎉 esLint verification was successful before committing the code using the pre-commit hook

There is a problem with this, however, if we somehow bypass git hooks checks (which we’ll get to later) and commit code that has errors, the next time we do that esLint will scan everything and it will be slower

This time we must get our right white tiger protection method — Lint-staged

lint-staged

This project contains a script that will run any shell task, taking as an argument a list of temporary files, filtered by the specified glob pattern.

npm i lint-staged --save-dev
Copy the code

The configuration is similar to the following:

"scripts": {
    "lint": "eslint . --cache".// delete
    "lint-staged:js": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx "
},
"husky": {
    "hooks": {
      "pre-commit": "lint-staged" // Git hook changed to lint-staged}},"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js"
  }
Copy the code

We submit the code again to try it out, and you can see that the error is now only in the staging area

More elegant

Commit-msg check — commitlint

Git commit -m ‘XXX’ message

// Install @commitlint/cli @commitlint/config-conventional
npm install @commitlint/cli @commitlint/config-conventional -D

// Adopt vuE-CLI3-based code commitLint specification VUE-CLI-plugin-commitLint
npm install vue-cli-plugin-commitlint -D
Copy the code

The configuration can be defined in.commitlintrc.js

module.exports = {
  extends: ['./node_modules/vue-cli-plugin-commitlint/lib/lint'],
}
Copy the code

Use with Husky

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"."commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"}}Copy the code

Git commit -m ‘test

The correct posture is as follows (specific specification, please refer to: what is – commitlint)

A little more elegant

Gracefully generate message — commitizen

When submitting using Commitizen, you will be prompted to fill in all the required submission fields when submitting. For example, with commitLint, you are prompted to add the corresponding canonical hook only after the commitlint is committed.

Using Commitizen no longer requires waiting for git commit hooks to run and reject your commit. CONTRIBUTING. Md is no longer necessary to find the preferred format. Gets immediate feedback on the submission message format and prompts for required fields.

npm install -g commitizen

// package.json
"scripts": {
    "cz": "git add . && git cz"
}
"config": {
    "commitizen": {
      "path": "./node_modules/vue-cli-plugin-commitlint/lib/cz"}}Copy the code

After a successful installation, Commitizen generates the git cz command to replace the Git commit

After NPM run cz is executed, the following information is displayed

To resolve this error, we need to install another right-pad

npm install right-pad -D
Copy the code

Ok, run NPM run Cz again and you should have a very friendly message

A little bit more elegant

Gracefully generate change log — commit version records

npm install conventional-changelog-cli -D

// package.json
"scripts": {
    "cz": "npm run log && git add . && git cz"
}
Copy the code

NPM run cz again generates a Changelog.md file to be submitted along with the code commit

// CHANGELOG.md
# 1.0. 0 (2021- 12- 05) # # # 🌟 new scope description | | commitId - | -- - | -- - | test | [4ffaad2](https://gitee.com/HY0606/git-hook-demo/commits/4ffaad2)Scope description | | commitId - | -- - | -- - | test | [05ef22a](https://gitee.com/HY0606/git-hook-demo/commits/05ef22a)
 - | test | [0191aec](https://gitee.com/HY0606/git-hook-demo/commits/0191aec)
 - | Initial commit | [56ff86a](https://gitee.com/HY0606/git-hook-demo/commits/56ff86a)
Copy the code

Vscode can download the Markdown Preview Enhanced plug-in to view the md file Preview mode

conclusion

At this point, a set of submitted code specifications, and the configuration of the generation of CHANGELOG even completed, which can greatly help us unify the code specifications, reduce the cost of communication, so that everyone can leave work early 🐶

Hope to help you, if there is a mistake, please point out more.

package.json

// package.json
{
  "name": "git-hook-demo"."version": "1.0.0"."description": "#### Description experiment husky management Git hook"."main": "demo.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."lint-staged:js": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx "."commit": "git cz"."log": "conventional-changelog --config ./node_modules/vue-cli-plugin-commitlint/lib/log -i CHANGELOG.md -s -r 0"."cz": "npm run log && git add . && git cz"
  },
  "repository": {
    "type": "git"."url": "https://gitee.com/HY0606/git-hook-demo.git"
  },
  "author": ""."license": "ISC"."husky": {
    "hooks": {
      "pre-commit": "lint-staged"."commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"}},"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js"
  },
  "dependencies": {
    "eslint": "^ 8.3.0"."husky": "^ 4.2.5." "
  },
  "devDependencies": {
    "@commitlint/cli": "^ 15.0.0"."@commitlint/config-conventional": "^ 15.0.0"."commitizen": "^ 4.2.4"."conventional-changelog-cli": "^ 2.1.1"."lint-staged": "^ 12.1.2." "."right-pad": "^" 1.0.1."vue-cli-plugin-commitlint": "^ 1.0.12"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/vue-cli-plugin-commitlint/lib/cz"}}}Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

[Front-end persuasion guide] Front-end engineering — constraint specification

preface

The outline

ESLint

Feature 1: Find problems

Feature two: automatic repair

Feature three: customization

How to configure

Part One — CTRL C + CTRL V

Part two – extends

IDE

Git Hooks

pre-commit

Husky (Not Doggie husky 🐶)

lint-staged

More elegant

Commit-msg check — commitlint

A little more elegant

Gracefully generate message — commitizen

A little bit more elegant

Gracefully generate change log — commit version records

conclusion

package.json

[Front-end persuasion guide] Front-end engineering — constraint specification

preface

The outline

ESLint

Feature 1: Find problems

Feature two: automatic repair

Feature three: customization

How to configure

Part One — CTRL C + CTRL V

Part two – extends

IDE

Git Hooks

pre-commit

Husky (Not Doggie husky 🐶)

lint-staged

More elegant

Commit-msg check — commitlint

A little more elegant

Gracefully generate message — commitizen

A little bit more elegant

Gracefully generate change log — commit version records

conclusion

package.json

Related Posts

【ES6 basics 】 New methods of Object

JS – reduce usage

Vue 3.0 hundred lines of code to achieve a simple wechat voice file player