前端规范体现在项目的 .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 定义应该尽量详细
- 必须使用 camelCase 驼峰命名
- 必须指定类型
- 必须加上注释，表明其含义
- 必须加上 required 或者 default，两者二选其一
- 如果有业务需要，必须加上 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
代码美化，自动格式化成规范格式
样式代码规范 .vscode/settings.json
配置文件 .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 # 关闭末尾空格修剪
