As front-end engineering becomes more and more mature, code standardization plays a great role in improving development efficiency, including late maintenance. Unified specification can save the time cost of handover, and the specification includes directory structure, code quality (naming, annotation, JS specification, CSS specification, indentation, etc.).

1.eslint

A plug-in javascript code detection tool, which can be used to check common javascript code errors, as well as code style checking

Use two extension packs (Airbnb specification & ESlint-plugin-vue)

  • Eslint-plugin-vue (the official ESlint plugin for vue that checks vue syntax) the official documentation link is 🚀

  • Airbnb specification standard: official documentation link 🚀

1.1 How To Install ESLint

 npm install -g eslint 
Copy the code

1.2 How do I integrate ESLint into a project

  • Method 1: Configure eslintConfig in packjson

The rules mentioned above have been adapted from the extension pack, with two specifications modified to suit your specification rules

  • Method 2: Manually create.eslintrc.js

    Copy the eslintconfig contents from method 1 to the.eslintrc.js file

  • Mode 3: Use the eslint command line tool to initialize and then modify eslintrc

1.3 How to Use it

1.3.1 Adding script commands to packjson scripts
  • Vue-cli 3
"lint":"vue-cli-service lint"
Copy the code
  • The other way
"lint":"eslint --ext .js,.vue src" 
Copy the code

🙆 Check the correct prompt🙅 Error message

1.3.2 How can I Shield unnecessary tests, such as unit tests and local mocks?

Create eslintignore.

1.4 How to integrate into CI/CD

The code scan that integrates into the deployment process fails if the specification is not passed

Add to Jenkinsfile

1.5 Common ESLint rules

1.5.1 Common JS Rules

Eslint can officially visit me at 🚀

Rules :{"no-unused-vars": "warn", // Whether the unused variable 'no-debugger': process.env.node_env === 'production' is supported? 'error': 'off', // Disable debugger 'no-console': process.env.node_env === 'production'? 'error:' off ', / / whether to ban the console. The log "no - var" : "warn", "no - eval" : "warn", / / it is prohibited to use eval}Copy the code
1.5.2 Vue Related (ESlint-plugin-vue)

For Vue’s official style guide, go to 🚀

rules:{ "vue/prop-name-casing": ["error", "camelCase"],// Casing name case: When declaring a prop it should always be named using camelCase" vue/name-property-casing": ["error", "PascalCase"], // component names in JS/JSX should always be "vue/require-prop-types" of PascalCase: "Error ", // props: "vue/require v-for-key": "error", // v-for: // vue/no-use-v-if-with-v-for": ["error", {"allowUsingIterationVar": false}], // Do not use v-if and v-for on the same element "vue/max-attributes-per-line": ["error", {" singLeline ": 1, "multiline": {" Max ": 1, "allowFirstLine": false}}], // Multiple feature elements should be written in multiple lines, one for each feature}Copy the code
1.5.3 Enabling Disable
  • “Off” or 0 – turns off the rule
  • “Warn” or 1 – Turn on the rule, using a warning level error: WARN (will not cause the program to exit)
  • “Error” or 2 – Turn on the rule, using error level errors: error (when triggered, the program will exit)

2. Prettier

Prettier is a formatting code tool. Used to keep the team’s project style consistent

2.1 Configuration

  • Prettierrc: Create in the root directory

  • Method 2: Create the prettier property in package.json.

Module. exports = {"printWidth": 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 "SingleQuote ": false," useEditorConfig ": // "singleQuote": false, "useEditorConfig ": False, // Whether to use the. Editorconfig file in the project "semi": true, // Whether to use semicolons for line bits, default to true "bracketSpacing": {foo: bar}} {foo: bar}}Copy the code

2.2 How to Use it

Use the eslint-plugin-prettier plug-in to add prettier as a rule configuration for ESLint to run prettier in ESLint

2.2.1 installation

Install eslint – plugin – prettier

npm install --save-dev eslint-plugin-prettier
Copy the code
2.2.2 configuration eslint
// packjson
"eslintConfig": {
    "extends": [
      "plugin:vue/essential",
      "@vue/airbnb",
      "prettier"
    ],
    "plugins": [
      "prettier"
    ],
    "rules": {
      "prettier/prettier": "error",
     }
 }
Copy the code

Ps 🏆: Prettier is added to extends and plugins to prevent esLint’s rules from colliding with Prettier’s rules

3. Document constraints

Document-class constraints can be referenced to some existing team specifications

  • Jingdong concave laboratory code specification
  • clean-code-javascript
  • Someone whose team
  • Baidu FEX team

To be continued…