前端开发规范前端规范体现在项目的 .prettierrc.js、.eslintrc.js、.stylelintrc.js

前端规范体现在项目的 .prettierrc.js、.eslintrc.js、.stylelintrc.js、.editorconfig 文件中，项目的文件夹结构只要有项目模板或者最佳实践作为参考，都会按照已有的物料去组织逻辑去写业务代码。整体原则是减少需要主动去 review 和 check 的地方，尽量通过自动化解决大多数问题。

一．编程规约

(一) 命名规范

项目命名

全部采用小写方式，以中线分隔。

# 正例
data-management-system
# 反例
data_management-system/dataManagementSystem

目录命名

全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。

# 正例
src/styles/components/images/utils/layouts/demo-styles/
# 反例
src/styles/components/images/utils/layouts/demo_styles/

JS、CSS、LESS、HTML、PNG 文件命名:

全部采用小写方式，以中划线分隔。

# 正例
render-dom.js/reset.css/company.png
# 反例
renderDom.js/UserManager.html

(二) HTML 规范（Vue Template 同样适用）

缩进：缩进使用 2 个空格（一个 tab）；嵌套的节点应该缩进。引号：使用双引号(" ") 而不是单引号(’ ') 。

<!-- 正例 -->
<div class="box"></div>
<!-- 反例 -->
<div class='box'></div>

(三) CSS/LESS 规范

命名

类名使用小写、id用驼峰、变量用驼峰。名称反映元素目的和用途。

// 正例
.heavy {
  font-weight: 800;
}
.important { 
  color: red; 
}

// 反例
.fw-800 {
  font-weight: 800;
}
.red {
  color: red; 
}

选择器

避免使用标签名、使用直接子选择器

// 正例
.content > .title {
   font-size: 2rem;
 }

// 反例
.content .title {
  font-size: 2rem;
}

省略 0 后面的单位

// 正例
div {
  padding-bottom: 0; 
  margin: 0; 
}
// 反例
div {
  padding-bottom: 0px; 
  margin: 0em;
}

代码组织

将公共 less 文件放置在 style/less/common 文件夹，color.less，common.less。按以下顺序组织

@import "mixins/size.less"; 

@default-text-color: #333; 

.page {
  width: 960px; 
  margin: 0 auto; 
}

避免嵌套层级过多:

嵌套深度限制在 3 层。

(四) Javascript 规范

// 方法名、参数名、成员变量、局部变量都统一使用小驼峰 lowerCamelCase 风格
function getHttpMessage(inputUserId) {
  let localValue = inputUserId;
  return false
}

// 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚， 不要嫌名字长
const MAX_STOCK_COUNT = 0;

// this 的转换命名
const _this = this;

JS 书写保持原则

提炼函数
合并重复的条件片段
把条件分支语句提炼成函数
少用三目运算符
合理使用循环
提前让函数退出代替嵌套条件分支；用return退出多重循环
传递对象参数代替过长的参数列表，尽量减少参数数量

const fn = (name, age) => {
  console.log('name=' + name);
  console.log('age=' + age);
}

// 优化之后

const fn = ( obj ) => {
  console.log('name=' + obj.name);
  console.log('age=' + obj.age);
}

方法命名必须是动词或者动词+名词形式

正例： saveShopCarData /openShopCarInfoDialog 反例： save / open / show / go 增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）

add / update / delete / detail / get 
附： 函数方法常用的动词: 
get 获取/set 设置, 
add 增加/remove 删除, 
create 创建/destroy 销毁, 
start 启动/stop 停止, 
open 打开/close 关闭, 
read 读取/write 写入, 
load 载入/save 保存,
begin 开始/end 结束, 
backup 备份/restore 恢复,
import 导入/export 导出, 
split 分割/merge 合并,
inject 注入/extract 提取,
attach 附着/detach 脱离, 
bind 绑定/separate 分离, 
view 查看/browse 浏览, 
edit 编辑/modify 修改,
select 选取/mark 标记, 
copy 复制/paste 粘贴,
undo 撤销/redo 重做, 
insert 插入/delete 移除,
add 加入/append 添加, 
clean 清理/clear 清除,
index 索引/sort 排序,
find 查找/search 搜索, 
increase 增加/decrease 减少, 
play 播放/pause 暂停, 
launch 启动/run 运行, 
compile 编译/execute 执行, 
debug 调试/trace 跟踪, 
observe 观察/listen 监听,
build 构建/publish 发布,
input 输入/output 输出,
encode 编码/decode 解码, 
encrypt 加密/decrypt 解密, 
compress 压缩/decompress 解压缩, 
pack 打包/unpack 解包,
parse 解析/emit 生成,
connect 连接/disconnect 断开,
send 发送/receive 接收, 
download 下载/upload 上传, 
refresh 刷新/synchronize 同步,
update 更新/revert 复原, 
lock 锁定/unlock 解锁, 
check out 签出/check in 签入, 
submit 提交/commit 交付, 
push 推/pull 拉,
expand 展开/collapse 折叠, 
enter 进入/exit 退出,
abort 放弃/quit 离开, 
obsolete 废弃/depreciate 废旧, 
collect 收集/aggregate 聚集

// undefined 判断
if (typeof person === 'undefined') {
  doSomething();
}

// 字符串 统一使用单引号('')，不使用双引号("")。
// 这在创建 HTML 字符串非常有好处 vscode 配置 
// settings.json 或者 .eslintrc.js 或者 .prettierrc.json
let str = 'foo';
let testDiv = '<div id="test"></div>';

(五) Vue 规范

组件名为多个单词
组件文件名为 pascal-case 格式
基础组件文件名为 base 开头，使用完整单词而不是缩写。
和父组件紧密耦合的子组件应该以父组件名作为前缀命名

// components/base-input.vue

// components/todo-list.vue
// components/todo-list-item.vue

// 正例
export default {
  name: 'TodoItem'
};

// 反例
export default {
  name: 'Todo',
}
export default {
  name: 'todo-item',
}

在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent />
<Row><table :column="data"/></Row>

<!-- 反例 -->
<my-component /> <row><table :column="data"/></row>

Prop 定义应该尽量详细
1. 必须使用 camelCase 驼峰命名
2. 必须指定类型
3. 必须加上注释，表明其含义
4. 必须加上 required 或者 default，两者二选其一
5. 如果有业务需要，必须加上 validator 验证

props: {
  // 组件状态，用于控制组件的颜色
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'succ',
        'info',
        'error'
      ].indexOf(value) !== -1
    }
  },
  // 用户级别，用于显示皇冠个数
  userLevel: {
    type: String,
    required: true
  }
}

模板中使用简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

<template>
  <p>{{ normalizedFullName }}</p>
</template>
// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

涉及的插件与配置文件

默认使用开发工具 VScode

Prettier

代码美化，自动格式化成规范格式

Stylelint

样式代码规范 .vscode/settings.json

eslint

vetur

配置文件 .editorconfig

# @see: http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
end_of_line = lf # 控制换行类型(lf | cr | crlf)
insert_final_newline = true # 始终在文件末尾插入一个新行
indent_style = tab # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
max_line_length = 130 # 最大行长度

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off # 关闭最大行长度限制
trim_trailing_whitespace = false # 关闭末尾空格修剪

参考资料

阿里代码规范（前端篇）

前端开发规范