Specification purposes

As front-end projects become more complex, adding more and more people to the project and changing staff, the code style becomes more diverse and arbitrary (such as single and double quotation marks, semicolons, ‘==’, etc.), which creates problems for the robustness and maintainability of the program. Therefore, it is imperative to unify the coding specification of the project, and the consciousness of the team members is often unreliable, and the automatic formatting process when the code is submitted is reliable and time-saving.

Realize the function

  • Formatting rules are used by defaultprettier, and supports custom rules
  • git commitCode time automatically runs the formatting code
  • vscodeBased on theprettier/eslintSyntax error message
  • vscodeSave autoformat code locally (optional)

Use the library

  • eslint:javascriptCode review tool, use.eslintrcFile configuration
  • prettier: code formatting tool that provides common formatting styles, configuration files, with as little configuration as possible.prettierrc.jsonAnd ignore files.prettierignore(The version must be locked during installation in the project; otherwise, inconsistency of versions may occur in collaboration with multiple people, leading to inconsistency of rules)
  • eslint-plugin-vue: in order toeslintprovidevueSyntax support, such as<template>Label identification, etc
  • eslint-config-prettier: solveeslintandprettierRule conflict problem, mask the conflicteslintThe rules
  • eslint-plugin-prettierWill:prettierRule adaptation toeslintOn, the editor can rely onprettierRule generates warning
  • husky: Used in configuration modegitthehooks, mainlypre-commitandcommit-msgEtc.
  • lint-staged: to provide thegitIn a temporary filelintThe ability to effectively reduce the amount of code checked at commit time

Submit format

First installation

  • yarn add eslint babel-eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier lint-staged -D

  • Prettier locking installation: yarn add prettier -d -e

  • Husky: NPX husky-init && yarn (# yarn 1)

  • Modified. Husky /pre-commit replaced NPM test with NPX Lint-Staged

  • The. Prettierignore and. Prettierrc. json files are created in the root directory of the project

  • Edit the.eslintrc.js file and modify the configuration as follows (basic configuration) :

    module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 7, // latest
    sourceType: 'module',
  },
  extends: [
    'plugin:vue/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: [
    'vue'
  ],
  rules: {},
}
Copy the code

  • Modify the package.json file and add:

    {... "lint-staged": { "**/*.{js,vue}": [ "prettier --write --ignore-unknown", "eslint --fix" ] } }Copy the code

  • Git commit = NPX; Command not found, run echo $PATH to print environment variables, and add environment variables PATH=$PATH:Your PATH before the NPX command in the pre-commit file. For example: PATH=$PATH:/usr/local/bin:/usr/local/sbin

  • Modify the vue/js code file, submit the test format, and check whether the modification takes effect

Clone installation

  • cloneCode to local, fromproductionBranch Creates a development branch
  • $ yarn   # or npm i
Copy the code
  • performgit commitIf error:npx: command not found, the implementation ofecho $PATHPrint environment variables, modifypre-commitEnvironment variables in the filePATH=$PATH:Your pathSuch as:PATH=$PATH:/usr/local/bin:/usr/local/sbin
  • Modify thevue/jsCode file, submit test format, check whether the modification record is valid

Disable formatting

  • Modify thepre-commitFile, comment out:# npx lint-staged

Local Formatting (Optional)

Vscode configures the formatting plug-in

  • Version: 1.58.2 (Universal)

  • Install plugons: prettier-code Formatter and ESLint

  • Add/modify related formatting configuration in Vscode configuration file settings.json:

    { "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "Esbenp. Prettier -vscode"}, "esbenp. Prettier -vscode"}, "esbenp. Prettier -vscode"}, "esbenp. Prettier -vscode"}, "esbenp. Prettier -vscode"}, "esbenp. Prettier -vscode"}, "esbenp. "Editor.codeactionsonsave ": {" source.fixall. Eslint ": true}}Copy the code