The code needs to be formatted and validated in the project. Git hooks can be used to verify and format files in the ==git staging area at commit time. If the verification fails, the commit is not allowed.

You can set the validation rules to a lower level at the beginning of the project and make the validation harder later.

Git hooks

Git hooks are stored in the.git/hooks folder, which contains executable scripts. When building a project, some files with sample will be generated, which can be executed without sample.

Client-side hook

A commonly used hook

  • Pre-commit: Scripts are executed before commit messages
  • Prepare-commit-msg: you can execute the template of the commit information, merge the commit, and compress the commit
  • Commit-msg: verifies the submitted information
Server-side hook
  • Pre-receive: executed when the push operation from the client is processed
Husky and vue – cli

Husky provides various hooks, including pre-commit, commit-msg, and so on.

Vue-cli has git-hooks Yorkie built in. Yorkie was forked out of the Husky project two years ago.

Husky use

Lint-staged hooks use Lint-staged hooks only to validate files in git staging.

Install dependencies
npm install --save-dev husky lint-staged npm i -D prettier npm i -D eslint-plugin-prettier npm i -D eslint-config-prettier npm i -D eslint npm i -D eslint-plugin-standard npm i -D eslint-plugin-vue npm i -D stylelint npm  i -D stylelint-scss npm i -D stylelint-config-standard npm i -D stylelint-config-recess-orderCopy the code
Husky is configured accordingly

Copy the following configuration to package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.{html,vue,css,scss}": [
    "prettier --write",
    "stylelint --fix",
    "git add"
  ],
  "*.{js,vue}": [
    "prettier --write",
    "eslint --fix",
    "git add -A"
  ]
},
Copy the code
Prettierconfiguration

Format code to use a common format in a project by configuring.prettierrc. Can be used in conjunction with ESLint.

Create the. Prettierrc file.

{
    "arrowParens": "always",
    "bracketSpacing": true,
    "endOfLine": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": true,
    "jsxSingleQuote": false,
    "printWidth": 120,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false
}
Copy the code

Create a. Prettierignore file and fill it with files or folders that do not need verification.

EsLintconfiguration

Writing custom ESLint rules ESLint configuration documentation

The rules of the road,
  • Rules recommended by EsLint:eslint:recommended, by using"extends": "eslint:recommended"To enable the recommended rules.
  • Vue file verification rules:plugin:vue/essential, by installing the officialeslint-plugin-vueSupport, it supports checking templates and scripts in your.vue files at the same time, adding validation for v-if, V-for, etc.
  • Prettier check: plugin: prettier/it, according to the configuration rules of prettier for calibration.

Create a new.eslintrc.js file in the project.

module.exports = { root: true, env: { browser: true, node: true, es6: true, }, extends: ["eslint:recommended", "plugin:vue/essential", "plugin:prettier/recommended"], parserOptions: { parser: "Babel - eslint"}, / / eslint: / / https://eslint.org/docs/user-guide/configuring "rule name:" [rule, rule configuration] / / close the rules: "Off" or 0 // use the open rule as a warning (does not affect exit code) : "warn" or 1 // Use the rule as an error (exit code is triggered by 1) : "error" or 2 rules: {"prettier/prettier": "warn", "arrow-parens": 0, // 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "no-unused-vars": [ "off", { ignorePattern: "^_", }, ], avoidEscape: 0, "space-before-function-paren": 0, "generator-star-spacing": 0, semi: [0], indent: ["off", 2], "no-multi-spaces": "warn", "no-prototype-builtins": "warn", "no-undef": "warn", "prefer-const": 0, "key-spacing": [ 0, { singleLine: { beforeColon: false, afterColon: true, }, multiLine: { beforeColon: true, afterColon: true, align: "colon", }, }, ], }, };Copy the code

Create a.eslintignore file and fill it with files or folders that do not need verification.

node_modules
/dist
Copy the code
StyleLintconfiguration
  • StyleLint Configuration document
  • StyleLint Rule list
  • stylelint-config-standard extends stylelint-config-recommendedTo enable additional rule verification and enforce the ruleCommon CSS style guides(e.g. : Common CSS principles, Google’s CSS Style Guide, Airbnb’s style Guide).
  • stylelint-order: Sorting rules of the CSS,stylelint-config-recess-orderIs a configurationstylelint-orderThe sample.

New. Stylelintrc. Js.

module.exports = { extends: ["stylelint-config-standard", "stylelint-config-recess-order"], plugins: [" stylelint-SCSS "], defaultSeverity: "Warning ", rules: {// Check rules omitted},};Copy the code

Create a. Stylelintignore file filled with files or folders that do not need validation.

The effect

Formatting tool
  • Vscode vue-format does not support files containing JSX syntax. It cannot be verified with git hooks. Other good, it can support formatting according to the number of tag attributes.
  • vscode prettier

Use vetur vscode vue template, a template in the setting options, vetur. Validation. The template to true will automatically use eslint – plugin – vue calibration.

reference
  • Eslint with Git hooks
  • The most complete Eslint configuration template to unify team programming habits
  • Vue eslint configuration
  • Use ESLint+Prettier to unify front-end code styles
  • VSCode + ESLint + Prettier code syntax check and formatting