preface

For code monitoring streams, there are two main types: server-side validation and local commit validation. Here’s a brief description of the advantages and disadvantages. Server-side validation does lint through CI continuous integration. Local commit verification can be performed during commit code to reduce the feedback link waiting time (the risk of human intervention in local verification). In this article, local commit verification is performed during commit code

The installation

npm install eslint husky lint-staged @commitlint/config-conventional @commitlint/cli  -D
Copy the code

• Eslint – Code specification
• Husky – Provides git hooks
• Lint-staged – Get staged files
• @commitlint/config-conventional @commitlint/ clieslint-commit Commit specification

configuration

project

• Eslint configuration

{
 "root": true."env": {
   "browser": true."es6": true
 },
 "extends": ["eslint:recommended"."plugin:vue/strongly-recommended"]."parserOptions": {
   "ecmaVersion": 2018
 },
 "globals": {
   // [writable] can override the read-only property of [readonly]
   "Swiper": "readonly"."ZIROOMCommon": "readonly"."$": "readonly"
 },
 "rules": {
   "no-mixed-spaces-and-tabs": "off".// Disallow the combination of space and TAB indentation
   "no-dupe-keys": "error".Disallow duplicate keys in object literals
   "no-undef": "error".// Disable undeclared variables
   "no-empty": "error".// Disallow empty statement blocks
   "no-unused-vars": "warn".// Disallow unused variables
   "no-console": "warn"./ / disable the console,
   "no-useless-escape": "error".// Disable unnecessary escape characters
   "no-prototype-builtins": "off".// Enforces a maximum number of attributes per row
   "vue/max-attributes-per-line": [
     "warn",
     {
       "singleline": 2."multiline": {
         "max": 1."allowFirstLine": true}}]."vue/require-v-for-key": "error".// Use v-bind:key with v-for
   "vue/no-use-v-if-with-v-for": [
     "error",
     {
       "allowUsingIterationVar": true}].// Disallow the use of v-if on the same element as v-for
   "vue/no-unused-components": "warn".// Disable unused components
   "vue/require-valid-default-prop": "error".// Force the default value of props to be valid
   "vue/valid-v-for": "error".// Check whether each v-for instruction is valid.
   "vue/no-side-effects-in-computed-properties": "error".// Disallow directly modifying properties in data in calculated properties (you can call method writing logic)
   "vue/return-in-computed-property": "error".// Enforces the presence of a return statement in the evaluated property
   "indent": ["error".2]."no-multiple-empty-lines": ["warn", { "max": 1}}}]Copy the code

PS: Our custom specification can exist in the form of a package, and the extends reference in the project avoids developer action as much as possible

portal

• Husky

// package.json
"husky": {"hooks": {
     "pre-commit": "lint-staged"."commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}}Copy the code

portal

• lint-staged

// package.json
"lint-staged": {
   "*.{js,vue}": ["eslint"]}Copy the code

PS: Verify the portal against the temporary storage files

• commitlint

// package.json
"commitlint": {
   "extends": ["@commitlint/config-conventional"]}Copy the code

portal

IDE

VScode installs the Eslint plugin and configures the editor settings. json as follows

  // setting.json
  // Display esLint in the bottom status bar
  "eslint.alwaysShowStatus": true./ / save
  "editor.codeActionsOnSave": { 
    // ESLint automatically fixes
    "source.fixAll.eslint": true 
  },
  // ESLint validates file types
  "eslint.validate": [ 
    "html"."javascript"."typescript"."vue"
  ]
Copy the code

run

• Eslint validation for the staging area

• A commit message check

Resolve husky ineffectiveness situation

• process

Git /hooks/** and the existence of corresponding hook files (e.g., pre-commit, commit-msg..) If it doesn’t exist it will create a hook file, if it does exist it will check for the word “#husky” to make sure it was created by husky and if it does exist and doesn’t contain “#husky” it will skip the creation step and say “hook (existing user hook)”

• To solve

Delete.git/hooks and reinstall husky.

Author: Liu Ziyi, Research and development Center of Free Big front End

Recruitment information

Free big front end R&D center recruiting new students!

FE/IOS/Android engineers look over

Company benefits include:

• Five insurances and one housing fund in full, plus commercial insurance
• Free gym + annual physical examination
• 10 percent discount for rent near the company
• 2 promotions per year

Office location: Beijing Jiuxianqiao Putian Industrial Science and Technology Park welcome you to join us! Please send your resume to [email protected]!