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