Foreword: good code behavior norm, let the development efficiency be higher, let a person feel more happy

First: Vue component name – prefix

Try to use whole words (not too specific, not too abstract), 2-3 words, readable

<! Recommend -- -- -- >
<app-header></app-header>
<user-list></user-list>
<range-slider></range-slider>

<! - avoid -- -- >
<btn-group></btn-group> <! Short but not very readable. Use 'button-group' instead -->
<ui-slider></ui-slider> <! -- UI prefix is too broad, meaning is not clear here -->
<slider></slider> <! -- incompatible with custom element specifications -->
Copy the code

Second: function naming rules

Uppercase constants avoid single-letter naming. Naming should be descriptive
// Error code:
function q() {
  / /... stuff...
}
// Correct code example:
function query() {
  / /.. stuff..
}
Copy the code
Use camel case naming of objects, functions, and instances.
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
Copy the code
Use PASCAL names for constructors or classes

PASCAL naming

// bad
function user(options) {
  this.name = options.name;
}

const bad = new user({
  name: 'nope'});// good
class User {
  constructor(options) {
    this.name = options.name; }}const good = new User({
  name: 'yup'});Copy the code

Third: function annotation specification

  • Function descriptions use description
  • Parameter using param
  • Specify the type and value returned
<! Recommend -- -- -- >/ * * *@description  Post requests do not result filtering *@param {string} Url Indicates the requested URL *@param {string} Body Request body *@param {boolean} IsUserId Whether userID * returns RXJS stream */ is requiredpostRxNormal(url? : string,body: any = {}, isUserId: Boolean = true ): Observable<any> {
    if (isUserId) {
      body['user_id'] = this.storage.getStorage('user_id');
    }
    return this.httpClient.post(url, body); } -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --/ * * *@description Set the localStorage *@param Value Specifies the value to be saved *@param Key Requires the key name */
  setStorage(value: any, key: string) {
    try {
      // Convert the values inside to json objects
      value = JSON.stringify(value);
    } catch (e) {
      // Throw an error
      value = value;
    }

    this.store.setItem(key, value);

  }
Copy the code

Fourth: variable naming

  • Const for all references; Don’t use var.
  • If you absolutely need mutable references, use let instead of var.

Fifth: Objects

  • Create objects using literals.
// bad
const item = new Object(a);// good
const item = {};
Copy the code
  • Use shorthand for object methods.
// bad
const atom = {
  value: 1.addValue: function (value) {
    return atom.value + value
  }
};

// good
const atom = {
  value: 1.addValue(value) {
    return atom.value + value
  },
}
Copy the code
  • Use shorthand for object values
const lukeSkywalker = 'Luke Skywalker'

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
}

// good
const obj = {
  lukeSkywalker
}
Copy the code

No. 6: Strings

  • String concatenation uses template strings
// bad
function sayHi(name) {
  return 'How are you, ' + name + '? ';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '? '].join();
}

// good
function sayHi(name) {
  return `How are you, ${name}? `;
}
Copy the code

Seventh: constructor

  • Always use class. Avoid manipulating Prototype directly
  // bad
function Queue(contents = []) {
  this._queue = [...contents]
}
Queue.prototype.pop = function() {
  const value = this._queue[0]
  this._queue.splice(0.1)
  return value
}
// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents]
  }
  pop() {
    const value = this._queue[0]
    this._queue.splice(0.1)
    return value
  }
}
Copy the code

Eslint rules

"no-alert": 0.// Disable alert Confirm prompt
"no-array-constructor": 2.// Disallow array constructors
"no-bitwise": 0.// Disallow bitwise operators
"no-caller": 1.// Disallow arguments. Caller or arguments.callee
"no-catch-shadow": 2.// Disallow catch clause arguments with the same name as external scope variables
"no-class-assign": 2.// Disallow class assignment
"no-cond-assign": 2.// Disallow assignment statements in conditional expressions
"no-console": 2.// Disable console
"no-const-assign": 2.// Disallow modifying variables declared by const
"no-constant-condition": 2.// Disallow constant expression if(true) if(1)
"no-continue": 0.// Disallow continue
"no-control-regex": 2.// Disallow control characters in regular expressions
"no-debugger": 2.// Disable the debugger
"no-delete-var": 2.// The delete operator cannot be used on variables declared by var
"no-div-regex": 1.// Can't use regular expressions that look like division /=foo/
"no-dupe-keys": 2.{a:1,a:1}
"no-dupe-args": 2.// Function arguments cannot be repeated
"no-duplicate-case": 2.// The case tag in the switch cannot be repeated
"no-else-return": 2.If there is a return in an if statement, it cannot be followed by an else statement
"no-empty": 2.// Block statements cannot be empty
"no-empty-character-class": 2.// The [] content in the regular expression cannot be empty
"no-empty-label": 2.// Disallow empty label
"no-eq-null": 2.// Disallow null with == or! = operator.
"no-eval": 1.// Disallow eval
"no-ex-assign": 2.// Disallow assignment of exception parameters in catch statements
"no-extend-native": 2.// Forbid extending native objects
"no-extra-bind": 2.// Disallow unnecessary function binding
"no-extra-boolean-cast": 2.// Disallow unnecessary bool conversions
"no-extra-parens": 2.// Disallow unnecessary parentheses
"no-extra-semi": 2.// Disallow extra colons
"no-fallthrough": 1.// Disable switch penetration
"no-floating-decimal": 2.// Disallow omitting 0.5 3 in floating point numbers.
"no-func-assign": 2.// Disallow duplicate function declarations
"no-implicit-coercion": 1.// Disable implicit conversions
"no-implied-eval": 2.// Disallow implicit eval
"no-inline-comments": 0.// Forbid line remarks
"no-inner-declarations": [2."functions"].Disallow declarations (variables or functions) in block statements
"no-invalid-regexp": 2.// Disallow invalid regular expressions
"no-invalid-this": 2.// Disallow invalid this only for constructors, classes, and object literals
"no-irregular-whitespace": 2.// There can be no irregular Spaces
"no-iterator": 2.// Disallow the __iterator__ attribute
"no-label-var": 2.// The label name cannot be the same as the variable name declared by var
"no-labels": 2.// Disallow label declarations
"no-lone-blocks": 2.// Disallow unnecessary nesting blocks
"no-lonely-if": 2.// Disallow only if statements in else statements
"no-loop-func": 1.// Disallow functions in loops (if no external variables are referenced and no closure is formed)
"no-mixed-requires": [0.false].// Do not mix declaration types
"no-mixed-spaces-and-tabs": [2.false].// Do not mix TAB and space
"linebreak-style": [0."windows"].// newline style
"no-multi-spaces": 1.// Do not use extra Spaces
"no-multi-str": 2.// String cannot be wrapped with \ line
"no-multiple-empty-lines": [1, {"max": 2}].// No more than 2 blank lines
"no-native-reassign": 2.// Native objects cannot be overwritten
"no-negated-in-lhs": 2.// The left side of the in operator cannot have!
"no-nested-ternary": 0.// Disallow nested ternary operations
"no-new": 1.// Disallow the use of new to construct an instance without assigning
"no-new-func": 1.// Disallow new Function
"no-new-object": 2.// Disallow new Object()
"no-new-require": 2.// Disable new require
"no-new-wrappers": 2.// Disallow creating wrapper instances with new, new String new Boolean new Number
"no-obj-calls": 2.// Cannot call built-in global objects such as Math() JSON()
"no-octal": 2.// Disallow octal digits
"no-octal-escape": 2.// Disallow octal escape sequences
"no-param-reassign": 2.// Disallow parameter reassignment
"no-path-concat": 0.// Node cannot use __dirname or __filename for path concatenation
"no-plusplus": 0.// Disallow ++, --
"no-process-env": 0.Process. env is disabled
"no-process-exit": 0.// Disallow process.exit()
"no-proto": 2.// Disallow the __proto__ attribute
"no-redeclare": 2.// Disallow variable declarations repeatedly
"no-regex-spaces": 2.// Disallow multiple Spaces /foo bar/ in regular expression literals
"no-restricted-modules": 0.// If the specified module is disabled, an error will be reported
"no-return-assign": 1.// Return statements cannot have assignment expressions
"no-script-url": 0.// Disable javascript:void(0)
"no-self-compare": 2.// Cannot compare itself
"no-sequences": 0.// Disallow the comma operator
"no-shadow": 2.// A variable in an outer scope cannot have the same name as a variable or parameter in the scope it contains
"no-shadow-restricted-names": 2.// Restricted identifiers specified in strict mode cannot be used as variable names for declaration
"no-spaced-func": 2.// Function calls cannot have Spaces between function names and ()
"no-sparse-arrays": 2.// Disable sparse array, [1, 2]
"no-sync": 0.//nodejs disallows synchronized methods
"no-ternary": 0.// Disallow the use of ternary operators
"no-trailing-spaces": 1.// No Spaces after the end of a line
"no-this-before-super": 0.This or super cannot be used before super() is called
"no-throw-literal": 2.// Disallow throwing "error";
"no-undef": 1.// There cannot be undefined variables
"no-undef-init": 2.// A variable cannot be initialized with undefined
"no-undefined": 2.// Undefined cannot be used
"no-unexpected-multiline": 2.// Avoid multi-line expressions
"no-underscore-dangle": 1.// Identifiers cannot start or end with an _
"no-unneeded-ternary": 2.// disable unnecessary nesting var isYes = answer === 1? true : false;
"no-unreachable": 2.// There can be no code that cannot be executed
"no-unused-expressions": 2.// Disallow useless expressions
"no-unused-vars": [2, {"vars": "all"."args": "after-used"}].// Can't make out unused variables or parameters
"no-use-before-define": 2.// Cannot be used before definition
"no-useless-call": 2.// Disable unnecessary call and apply
"no-void": 2.// Disable the void operator
"no-var": 0.// Disable var and use let and const instead
"no-warning-comments": [1, { "terms": ["todo"."fixme"."xxx"]."location": "start"}].// There can be no warning remarks
"no-with": 2./ / disable the with

"array-bracket-spacing": [2."never"].// Allow extra Spaces in non-empty arrays
"arrow-parens": 0.// The arrow functions are enclosed in parentheses
"arrow-spacing": 0.//=> before/after parentheses
"accessor-pairs": 0.// Use getters/setters in objects
"block-scoped-var": 0.// Block statements using var
"brace-style": [1."1tbs"].// Braces style
"callback-return": 1.// Avoid multiple callbacks
"camelcase": 2.// Enforce hump naming
"comma-dangle": [2."never"].Object literals cannot end with commas
"comma-spacing": 0.// Spaces before and after commas
"comma-style": [2."last"].// comma-style, start or end of a line break
"complexity": [0.11].// Cyclic complexity
"computed-property-spacing": [0."never"].// Are computed key names allowed
"consistent-return": 0.// Whether to omit after return
"consistent-this": [2."that"]./ / this alias
"constructor-super": 0.// Non-derived classes cannot call super. Derived classes must call super
"curly": [2."all"].// You must use {} in if(){}
"default-case": 2.// Switch statements must end with default
"dot-location": 0.// The position of the accessor, at the beginning or end of a line break
"dot-notation": [0, { "allowKeywords": true}].// Avoid unnecessary square brackets
"eol-last": 0.// The file ends with a single line break
"eqeqeq": 2.// Must use congruence
"func-names": 0.// Function expressions must have names
"func-style": [0."declaration"].// Function style, specifying that only function declarations/function expressions can be used
"generator-star-spacing": 0.// Spaces before and after the generator function *
"guard-for-in": 0.// For in loops are filtered with if statements
"handle-callback-err": 0.// Nodejs processing error
"id-length": 0.// Variable name length
"indent": [2.4].// Indent style
"init-declarations": 0.// The initial value must be assigned
"key-spacing": [0, { "beforeColon": false."afterColon": true}].// Spaces before and after colons in object literals
"lines-around-comment": 0.// Remarks before/after the line
"max-depth": [0.4].// Nested block depth
"max-len": [0.80.4].// Maximum length of a string
"max-nested-callbacks": [0.2].// Call back the nesting depth
"max-params": [0.3].// A function can take a maximum of 3 arguments
"max-statements": [0.10].// There are at most a few declarations in a function
"new-cap": 2.Function names with uppercase must be called with new, and lowercase must be called without new
"new-parens": 2.// New must be enclosed in parentheses
"newline-after-var": 2.// Whether the variable declaration should be followed by a blank line
"object-curly-spacing": [0."never"].// Whether unnecessary Spaces are allowed in braces
"object-shorthand": 0.// Enforces the object literal abbreviation syntax
"one-var": 1.// continuous declaration
"operator-assignment": [0."always"].// Assignment operator += -= what
"operator-linebreak": [2."after"].// The end of the line or the beginning of the line
"padded-blocks": 0.// Whether the first and last lines of block statements should be blank
"prefer-const": 0./ / the preferred const
"prefer-spread": 0.// Preferred expansion operation
"prefer-reflect": 0.// Reflect's preferred method
"quotes": [1."single"].// Quote type '' "" '"
"quote-props": [2."always"].// Whether double quotes are mandatory for attribute names in object literals
"radix": 2.//parseInt must specify a second argument
"id-match": 0.// Name detection
"require-yield": 0.// Generator functions must yield
"semi": [2."always"].// The statement enforces a semicolon ending
"semi-spacing": [0, {"before": false."after": true}].// Space before and after the semicolon
"sort-vars": 0.// Sort when declaring variables
"space-after-keywords": [0."always"].// Whether to leave a space after the keyword
"space-before-blocks": [0."always"].// blocks that do not start with a new line {with or without Spaces before them
"space-before-function-paren": [0."always"].// Do you want Spaces before parentheses when defining functions
"space-in-parens": [0."never"].// Do you want Spaces in the parentheses
"space-infix-ops": 0.// Do you want Spaces around infix operators
"space-return-throw-case": 2.//return throw case should not be followed by a space
"space-unary-ops": [0, { "words": true."nonwords": false}].// Do you want Spaces before or after unary operators
"spaced-comment": 0.// Comment style should have Spaces or something
"strict": 2.// Use strict mode
"use-isnan": 2.// Disallow NaN for comparison, only isNaN()
"valid-jsdoc": 0./ / jsdoc rules
"valid-typeof": 2.// Must use valid Typeof values
"vars-on-top": 2.//var must be placed at the top of scope
"wrap-iife": [2."inside"].// Execute function expressions immediately in parenthesis style
"wrap-regex": 0.// Regular expression literals are wrapped in parentheses
"yoda": [2."never"]// Disable yoda conditions

Copy the code