Front-end Code Specification (I)

Due to time reasons, there is not much sorting, the follow-up will continue to update ~~~, please pay attention to.

I. Standard use of JavaScriptjs-standard-stylestandard

The key rules

Do not define unused variables.

eslint: no-unused-vars

let title:sting = ' '
let name:string = ' '  / / ✗ get

function myFunction (prop:string) :void {
   this.title = prop
}
Copy the code

Use small hump nomenclature for variable and function names.

eslint: camelCase

  var myVar = 'hello'            / / ✓ ok
  function myFunction () {}/ / ✓ ok

  function my_function () {}/ / ✗ get
  var my_var = 'hello'           / / ✗ get
Copy the code

Before obtaining object attributes, check whether the object exists to avoid code exceptions caused by errors, for example.

import { get } from 'lodash'

let position = this.userInfo.position            / / ✗ get
let position = this.userInfo && this.userInfo.position / / ✓ ok
let position = get(this.userInfo,'position'.' ') / / ✓ ok
Copy the code

Always use === instead of ==. Exception: obj = = null can be used to check the null | | is undefined. eslint: eqeqeq

let title:sting = ' '

function myFunction (prop:string) :void {
   if(this.title === prop){
     // do something ...}}Copy the code

Errors in exception handling must be handled.

eslint: handle-callback-err

import { getUserInfo } from '@/api/common'
getUserInfo().then((res) = >{
    // Processing returns normal
  }).catch(e= >{           / / ✓ ok
    // Handle an exception return
  })
Copy the code

Constructors begin with a capital letter.

eslint: new-cap


function Animal () {}
var dog = new Animal()    / / ✓ ok
Copy the code

Do not extend native objects.

eslint: no-extend-native

Object.prototype.age = 21     / / ✗ get
Copy the code

Avoid unnecessary Boolean conversions.

eslint: no-extra-boolean-cast

const result = true
if(!!!!! result) {/ / ✗ get
  // ...
}

const result = true
if (result) {     / / ✓ ok
  // ...
}
Copy the code

Switch must use break to break the conditional branch properly.

eslint: no-fallthrough

switch (filter) {
  case 1:
    doSomething()
    break           / / ✓ ok
  case 2:
    doSomethingElse()
}

Copy the code

Redefinition of functions is prohibited in nested code blocks.

eslint: no-inner-declarations

if (authenticated) {
  function setAuthUser () {}    / / ✗ get
}
Copy the code

Do not use undefined to initialize a variable.

eslint: no-undef-init

let name = undefined    / / ✗ get

let name
name = 'value'          / / ✓ ok
Copy the code

If you can, try to use | |, &&, ternary expression.

eslint: no-unneeded-ternary

let score = val || 0          / / ✓ ok
val && getscore()             / / ✓ ok
val ? xx : yy             / / ✓ ok
Copy the code

The conditional statement variable is on the left, avoid Yoda conditions.

eslint: yoda
```
if (age === 42) {}/ / ✓ ok
Copy the code
```

The HTML template specification is highly recommended based on ESLint

Tags are connected using lowercase bars.

<v-header></v-header>/ / ✓ ok<vHeader></vHeader>/ / ✗ getCopy the code

Multiple attributes should be displayed in line wrap.

<el-table :data="tableData"
          border
          stripe
          style="width: 100%"
          v-loading="$store.state.User.loading">
</el-table>/ / ✓ okCopy the code

Iii. Please refer to vue. js specification for detailsVue Style Guide

The component must have a name attribute and a large hump.

export default class Header extends Vue {}Copy the code

Props each object needs to have a default value.

// js
props: {
    treeType: {
    type: String.default: 'side'}}/ / ✓ ok

 // ts
@Prop({ type: String.default: 'label'}) title! : stringCopy the code

When v-for is used, key must be set, and the key cannot be index.

<ul class="icons-list">
    <li v-for="data in iconData" :key="data.label"></li>
</ui>/ / ✓ okCopy the code

The format of the event handler is handle+ event name/other.

  <el-button
      type="primary"
      @click="handleClick"// The event handler is in the formathandle+ Event name/Others >add</el-button>
Copy the code

Custom events use the ‘kebab’ format (bar connection).

  emitSortChange(sortParams) {
    this.$emit('sort-change-debounce', sortParams)
  }
Copy the code

Use double quotation marks around label variables.

<ul class="icons-list">
    <li v-for='data in iconData' :key='data.label'></li>
</ui>/ / ✗ getCopy the code

4. CSS specifications

SCSS preprocessing language is used in the project and style is reset by Normalize. The functions of each file are as follows:

Public style file pathsrc/assets/scss/common.scss
The theme colortheme.scss
With the functionmixin.scss
With the functionmixin.scss
SCSS common variablesvariable.scss

Label selectors should not be used except in special circumstances.

  div {
    line-height:24px;
  }                                  /* ✗ avoid */
Copy the code

Reduce the use of scoped.

  <style lang="scss" scoped>
  </style> /* ✗ get * /<style lang="scss">
  </style>                     / * ✓ ok * /
Copy the code

.vue single-file styles must have a unique outer class.

  .home-header { // The outermost class
    .title {
      width:100%; }}/ * ✓ ok * /
Copy the code

Front-end Code Specification (I)