HTML部分
1、严格遵循Bootstrap编码规范
- 连接地址:
http://codeguide.bootcss.com/#html
CSS部分
1、严格遵循Bootstrap编码规范
- 连接地址:
https://codeguide.bootcss.com/#css
2、属性
- 禁止过量使用当前并不起效的属性,如下所示:
width: 100%
height: auto
float: none
3、色值
- 必须使用十六进制色
JavaScript部分
1、代码风格
- Vue环境下,默认按Vue默认的规范和风格进行代码编写
- 非编译环境,编写代码时自行约束,保证好统一规范风格,约定如下所示:
缩进为空格, 长度为2
字符串引号必须优先选择单引号
语句末必须以分号结束
对象中不允许出现结尾逗号
不建议出现console语句 (仅作为警告)
函数定义时不得出现重复参数
对象中不得出现重复键
switch语句中不允许出现重复的case标签
不允许出现空代码块
不允许出现不必要的圆括号
不允许出现不必要的分号
对函数不得重复申明
不允许出现不合法的空格符, 如中文空格符等
数组中不得出现空位置
return, throw, continue, break语句后不得存在不可能到达的语句 (仅作为警告)
需检查NaN的时候必须使用isNaN()
条件语句等强制使用花括号风格
switch语句中需有default语句
不允许使用alert, confirm, prompt等语句 (仅作为警告)
不允许使用eval()
switch语句中不允许可按顺序执行完全部case
不允许存在浮点数缺失的数字
不允许存在不必要的嵌套代码块
不允许在循环语句中进行函数声明
不允许出现多余空格
不允许用\符号让字符串换行
不允许重新分配原生对象
对变量不得重复声明
对值不得进行自身与自身的比较
不得出现void操作符
不得出现with语句
try, catch语句接收的err参数不得与外部变量重名
变量名不得与标签重名
外部作用域中的变量不得与它所包含的作用域中的变量或参数同名
js关键字和保留字不得作为函数名或变量名
不允许使用未经合法声明的变量 (仅作为警告)
不允许有声明后未使用的变量或参数
条件语句与方法声明后的花括号风格为空格加花括号
方法名或变量名必须遵守小驼峰命名规则
对象属性强制其冒号左侧空格为0, 右侧空格为1
构造函数的方法名首字母需大写
new时构造函数必须有小括号
不允许混用tab和空格
不允许出现连续空行
禁止使用new Object()
调用函数时,函数名与()间不能有空格
块级代码内行首尾行不得有空行
分号前后不得有空格
申明函数时括号前空格必须为1
操作符前后空格必须为1
关键字前后空格必须为1
2、注释
- 方法名必须注释,遵守Sublime 3的DocBlockr插件注释风格,如下所示:
/**
* [online 同步线上数据]
* @param {[Array]} requests [请求队列]
* @param {[Function]} http [网络请求]
* @return {[Boolean]} [结果返回值]
*/
- 注释时,用英文字符替代中文字符,如下所示:
【文字】 + 【空格】 + 【()】替代【文字()】等情况
【文字】 + 【, 】 + 【文字】替代【文字,文字】、【文字、文字】等情况
Vue部分
1、HTML标签属性、事件、语句等排序
- 属性 > 变量属性 > 事件 > 条件语句 > 循环语句,如下所示:
<div class="" style="" 普通属性等(不换行)
:selected="..." 变量属性等(换行)
@click 事件等(换行)
v-if 条件语句等(换行)
v-for 循环语句等(换行)>
2、导入自定义组件时命名规范
- 遵守小驼峰命名规则,如下所示:
import pictureLoading from '@/components/loading'
IDE开发推荐插件
1、必备
- Vue Syntax Highlight
默认设置【.vue】文件语法为高亮
- Emmet
HTML快捷语法
- DocBlockr
自动生成格式化注释
- JavaScriptNext - ES6 Syntax
高亮ES6语法
- Sass
高亮CSS扩展语言
2、建议使用
- Colorcoder
高亮所有变量,可极大简化代码定位
- AutoFileName
自动文件路径提示
- Bracket Highlighter
帮助匹配代码块
- TortoiseSVN
方便SVN代码提交
编码规范风格等自动化检测插件
1、EditorConfig
- EditorConfig
统一换行缩进空格等编码风格
Sublime Text2、Sublime Text3等IDE需安装插件
项目开发根目录需配置【.editorconfig】文件
2、ESLint
- SublimeLinter
- SublimeLinter-eslint
- eslint (npm install -g)
拟定编码的规范风格等标准后,IDE将根据标准进行代码的自动化检测
Sublime Text2、Sublime Text3等IDE需安装插件
项目开发根目录需配置【package.json】与【.eslintrc.json】文件
3、Pre-Commit
待完善