前端代码规范（一）前端代码规范（一）一、JavaScript规范使用 js-standard-style标准关键规

前端代码规范（一）

由于时间原因，暂时没有过多整理，后续将持续更新~~~，敬请关注。

一、JavaScript规范使用 js-standard-style标准

关键规则

不要定义未使用的变量。

eslint: no-unused-vars

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

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

对于变量和函数名统一使用小驼峰命名法。

eslint: camelCase

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

  function my_function () { }    // ✗ avoid
  var my_var = 'hello'           // ✗ avoid

取对象属性前需先对对象是否存在进行判断，避免报错导致代码异常,例如。

import { get } from 'lodash'

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

始终使用 === 替代 ==。
例外： obj == null 可以用来检查 null || undefined。 eslint: eqeqeq

let title:sting = ''

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

必须处理异常处理中的错误。

eslint: handle-callback-err

import { getUserInfo } from '@/api/common'
getUserInfo().then((res)=>{
    // 处理正常返回
  }).catch(e=>{           // ✓ ok
    // 处理异常返回
  })

构造函数要以大写字母开头。

eslint: new-cap


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

不要扩展原生对象。

eslint: no-extend-native

Object.prototype.age = 21     // ✗ avoid

避免不必要的布尔转换。

eslint: no-extra-boolean-cast

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

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

switch 一定要使用 break 来将条件分支正常中断。

eslint: no-fallthrough

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

嵌套的代码块中禁止再定义函数。

eslint: no-inner-declarations

if (authenticated) {
  function setAuthUser () {}    // ✗ avoid
}

不要使用 undefined 来初始化变量。

eslint: no-undef-init

let name = undefined    // ✗ avoid

let name
name = 'value'          // ✓ ok

如果可以，尽量使用 || 、&&、三元表达式。

eslint: no-unneeded-ternary

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

条件语句变量在左（avoid Yoda conditions）。

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

二、HTML模板规范基于eslint强烈推荐

标签使用小写横杠连接。

<v-header></v-header>     // ✓ ok
<vHeader></vHeader>       // ✗ avoid

多属性时应该换行显示。

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

三、Vue.js规范详情请参考 Vue风格指南

组件必须有name属性,且为大驼峰。

export default class Header extends Vue {
}

props每个对象需要有默认值。

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

 // ts
@Prop({ type: String, default: 'label' }) title!: string

使用v-for时必须设置:key, 且key不得为index 。

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

事件处理函数格式为 handle+事件名/其他 。

  <el-button
      type="primary"
      @click="handleClick" // 事件处理函数格式为 handle+事件名/其他
  >添加</el-button>

自定义事件使用'kebab'格式(横杆连接) 。

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

标签变量外层使用双引号。

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

四、CSS规范

项目统一采用scss预处理语言,使用normalize进行样式重置, 各文件功能如下:

公共样式文件路径src/assets/scss/common.scss
主题配色theme.scss
混入函数mixin.scss
混入函数mixin.scss
scss常用变量variable.scss

除非特殊情况,否则一律不得使用标签选择器。

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

减少scoped的使用。

  <style lang="scss" scoped>
  </style>                     /* ✗ avoid */

  <style lang="scss">
  </style>                     /* ✓  ok */

.vue单文件内样式必须有唯一外层class。

  .home-header { //最外层class
    .title {
      width:100%;
    }
  }                                   /* ✓  ok */

前端代码规范（一）