前端代码规范(一)
由于时间原因,暂时没有过多整理,后续将持续更新~~~,敬请关注。
一、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 */