前言
尽管有 Eslint 的存在，规范了很多写法，但是就目前的情况看来，从命名、布局代码到组件使用等方面还是各有各的写法，影响团队之间互相 backup/code review 的效率。所以清阅读此文，统一一下使用规范。
一、框架
(一)命名规范
- [强制] 代码中的命名严禁使用拼音与英文混合的方式，命名要语义化，可读性要强
说明： 正确的英文拼写易于理解，避免歧义。拼音命名方式也要避免采用 - [强制] js中 变量名/方法名/参数名 统一使用 camelCase 风格，如： let searchForm = {}、queryMo(moNum, moName){}
- [强制] 页面/组件/指令 的命名为全部小写、多个单词以 - 隔开
├── index.html
├── main.js
└── components
| └── lang-select.vue
└── views
└── mty
├── order-bom.vue
└── bary-mo.vue
- [强制] 组件的 prop 定义的时候使用 camelCase 风格，调用的时候使用 - 分隔，定义 prop 时应尽量指定其类型与默认值。
(二)语法规范
1. [强制] v-for 需要提供 唯一 key (已被eslint约束)
说明： 使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
2. [强制] 避免 v-if 和 v-for 用在一起 风格指南
3. [推荐] 指令缩写 为了更加统一的风格，尽量使用缩写语法
主要有两个: v-bind:href='' 缩写为 :href=''，v-on:click='' 缩写为 @click=''
(三)UI组件使用
1. [强制] 表格组件要使用 s-table，风格统一，并可统一升级管理
2. [推荐] 其他组件尽量使用 element-ui
(四)注释
代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。
以下情况，务必添加注释
公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
注释块必须以/（至少两个星号）开头/；
单行注释使用//；
(五)编码规范
优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照ESLint格式要求编写代码
二、JavaScript
-
[推荐] 不要使用 var，使用 const/let 代替
-
[强制] 不要使用双引号，静态字符串使用单引号，动态字符串使用反引号衔接
const who = ‘Chris’
const where =${foo} in Beijing -
[推荐] 匿名函数用箭头函数代替
// 反例
setTimeout(function() {
// do someting
}, 1000)
// 正例
setTimeout(() => {
// do something
}, 1000)
- [推荐] 统一使用 import/export 的方式管理项目的模块, import 统一放在文件顶部。如果模块只有一个输出值，使用 export default，否则不用。
// lib.js
export default {}
// app.js
import app from './lib'
-
[强制] 避免使用 eval
-
[推荐] 推荐使用解构赋值
// 反例
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
return `${firstName} ${lastName}`;
}
// 正例
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
三、CSS/HTML
[推荐] 功能页面内的 css ，尽量加上 scope，用来控制作用域，防止影响其他页面，语法尽量使用 scss
<style lang="scss" scoped>
</style>