前端代码规范评审

572 阅读2分钟

宗旨:规范只是一种相对规则,没有最优值,按照规范做事,提高代码质量,降低耦合性

一、命名规范

1. 工程名称 2. 工程目录 3. 文件/文件夹 4. 代码元素

1.工程名称

创建项目一般以小驼峰命名(例如:vue-element-admin)偏多但不唯一,见名知意,看起来也清爽,不要以ui,web这类命名没有多少含义,多工程更加不好管理 image.png

2.工程目录

保证结构清晰有层次感,模块独立,命名规范,工程大多人开发的的时候可以进一步细分模块便于管理 image.png

3.文件夹/文件

在Vue项目中文件和文件夹一般遵循的规范

3.1文件夹

1.全局通用的组件放在/src/components下,其他业务页面中的组件放在各自页面下的文件夹下可以以Item结尾命名标出
2.每个components文件夹下最多只有一层文件夹,且文件夹名称为组件的名称,文件夹下必须有index.vue或index.js,components下的子文件夹名称统一大写开头(PascalCase),其他文件夹统一使用kebab-case的风格
3.主文件夹名字最好使用复数(比如filters、images、mixins),因为一般都不止一个文件

image.png 3.1文件名

1.除了index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范
2.属于组件或类的,统一使用大写字母开头的(PascalCase)命名规范
3.其他非组件或类的,统一使用小写字母开头的(kebab-case)命名规范
4.尽量是名词,大写开头,开头的单词就是所属模块名字(CarDetail、CarEdit、CarList)
5.名字至少两个单词(good: CarDetail)(bad: Car)常用结尾单词有(Detail、Edit、List、Info、Report)以Item 结尾的代表着组件(CarListItem、CarInfoItem)
原因:展开node_modules中的项目依赖,会发现,几乎所有的项目文件夹命名都是 kebab-case命名的,使用kebab-case命名的文件夹比camelCase命名的文件夹看起来更清晰

image.png

4.代码元素

主要是指编码风格,如下:

二、编码规范

推荐文档
1.前端代码规范凹凸实验室
2.vue官网风格指南
3.Airbnb JavaScript 代码规范(ES6)
4.10个GitHub上超火和超好看的管理后台模版

1.HTML 2.CSS 3.JavaScript 4.Vue 5.Image 6.JSON配置文件 7.注释

1.HTML

1.结构、样式、行为分离,语义化 2.统一空格缩进,不要使用 Tab 或者 Tab、空格混搭
3.统一文件编码utf-8
4.一律使用小写字母
5.省略外链资源 URL协议部分
省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址,避免Mixed Content 问题,减小文件字节数。其它协议(ftp 等)的 URL 不省略。

image.png 5.统一注释

三、代码输出效果

四、代码提交规范

五、工具配置