最近组内经常进行CodeReview，于是参考一些大厂规范以及一些开源的优秀源码，整理了一些前端代码规范，帮助我们后续可以写出更好维护的代码。有什么不对的地方，欢迎大家指出，一起学习进步！

先来看下下面这张思维导图：

下面会就几个方面展开来说。

命名规范

驼峰式命名法介绍

• Pascal Case大驼峰式命名法：首字母大写。eg：PersonInfo
• Camel Case小驼峰式命名法：首字母小写。eg：PersonInfo

文件命名

• 所有文件名统一使用小写，首页命名为index.xxx，文件名禁止特殊字符比如空格、$等。统一使用英文单词或拼音缩写，必须小写。( 为了醒目，某些说明文件的文件名，可以使用大写字母，比如README、LICENSE。 )
• 文件名包含多个单词时，单词之间建议使用半角的连词线 ( – ) 分隔。
• 文件目录结构嵌套层级不要过深

变量命名

命名方式 : 小驼峰式命名方法命名规范 : 类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词

函数命名

命名方式 : 小驼峰方式 ( 构造函数使用大驼峰命名法 ) 命名规则 : 前缀为动词

例子：

// 是否可跳舞
function canDance(){
  return true;
}
​
// 获取工作
function getWork{
  return this.work
}

常量命名

命名方法 : 全部大写命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。

例子：

const PATH = "xxxx" 

类命名

• 公共属性和方法 : 同变量命名方式
• 私有属性和方法 : 前缀为下划线(_或#)后面跟公共属性和方法一样的命名方式

注释规范

单行注释和多行注释的空格保存代码时eslint会帮我们处理，不用手动加空格。

单行注释 ( // )

• 单独一行：//(双斜线)与注释文字之间保留一个空格
• 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
• 注释代码：//(双斜线)与代码之间保留一个空格

多行注释 ( / 注释说明 / )

• 若开始(/*和结束(*/)都在一行，推荐采用单行注释
• 若至少三行注释时，第一行为/*，最后行为*/，其他行以*开始，并且注释文字与*保留一个空格。

函数（方法）注释

函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求

/** 
* 函数说明 
* @关键字 
*/

常用注释关键字

文件目录结构

同功能放在同一个文件目录下，目录结构不要嵌套过深，文件名语义化一些，方便后续维护。

• 文件夹名称全部采用小写+”-” 来隔开；
• 避免多层嵌套，单个项目中的目录嵌套控制在最多三到四个层级内；

例子：

   - src 开发目录
      - pages 视图
          - module-a 模块A
            - components 私有组件
              - ComA.vue
              - ComB.vue
            - index.vue
          - module-b 模块B
      - components 公共组件
        - index.vue 导出所有组件
        - header
          - index.vue
      - utils 这里是以utils为后缀，JS工具库
        - index.js
        - a.utils.js
        - b.utils.js
      - hooks 这里是以hooks为后缀
        - index.js
        - a.hooks.js
        - b.hooks.js
      - service api请求,这里是以api为后缀
        - a.api.js 按照后端微服务进行划分
        - b.api.js
      - constans 常量

通过对工具函数、hooks、api等加上后缀，更加容易区分引入的文件。

代码规范

JS

JS/TS主流的大致有这几种：

• Airbnb JavaScript Style Guide
• Idiomatic JavaScript Style Guide
• JavaScript Standard Style

可以参考star最多的进行配置，几乎覆盖了JavaScript的每一项特性。

下面会就代码层面作出阐述。

Vue

遵循vue.js官方风格指南，vuejs.bootcss.com/style-guide…

组件

模板中的组件名大小写

PascalCase相比kebab-case有一些优势：

• 编辑器可以在模板里自动补全组件名，因为PascalCase同样适用于JavaScript
• 视觉上比 更能够和单个单词的HTML元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线
• 如果你在模板中使用任何非Vue的自定义元素，比如一个Web Component，PascalCase确保了你的Vue组件在视觉上仍然是易识别的

由于HTML是大小写不敏感的，在DOM模板中必须仍使用kebab-case。

例子：

<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
​
<!-- 在DOM模板中 -->
<my-component></my-component>
​
<!-- 在所有地方 -->
<my-component></my-component>

Prop名大小写

我们单纯的遵循每个语言的约定。在JavaScript中更自然的是camelCase。而在HTML中则是kebab-case。

文件目录

CSS

CSS检查代码规范

使用stylelint插件，规范则推荐使用stylelint-config-standard

下面简单说下stylelint-config-standard使用

1. 安装
yarn add -D stylelint stylelint-config-standard
​
2. 在项目的根目录中创建一个配置文件.stylelintrc.json，内容如下：
{
  "extends": "stylelint-config-standard"
}
​
3. 解决与prettier配置的冲突：
​
yarn add -D stylelint-config-prettier
​
4. 将下面配置复制到.stylelintrc.json中：
{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}
​
5. 在 git commit 阶段进行检测：
 "lint-staged": {
    "**/*": "prettier --write --ignore-unknown", // 格式化
    "src/**.{js,jsx,ts,tsx}": "eslint --ext .js,.jsx,.ts,.tsx", // 对js文件检测
    "**/*.{less,css}": "stylelint --fix" // 对css文件进行检测
  },

BEM命名原则

• block：模块，名字单词间用-连接
• element：元素，模块的子元素，以__与block连接
• modifier：修饰，模块的变体，定义特殊模块，以–与block连接

有效使用css选择器

有效使用css选择器，需遵循以下原则：

• 保持简单，不要使用嵌套过多过于复杂的选择器，选择器嵌套应少于3级；
• 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用；
• 避免使用CSS表达式；
• 慎重选择高消耗的样式（高消耗属性在绘制前需要浏览器进行大量计算），避免重绘重排；
• ​css选择器中避免使用标签名；
• ​尽量使用缩写属性；
• ​使用子选择器；
• 0后面不带单位；
• id和class，命名​名称语义化，不要过于简单，防止模块之间样式互相影响；​​合理的使用id，​​一般情况下id不应该被用于样式，并且id的权重很高，所以不使用id解决样式的问题，而是使用class；

CodeReview常见代码问题汇总

map/forEach说明

比如：

# demo1
arr.map(({value = {}, ...item})=>{    
  return {        
    ...item,        
    ...value    
}})
​
# demo2
const type = this.alarmType?.map(item => ({alarmTypeId: item})) || [];
​
# demo3 push行为修改为map
this.evidence.printScreen = data.printScreen?.map(
  ({ id, title, value }) => ({
    id,
    title,
    value,
    url: `${imgUrlPre}${id}`,
  })
);

dayjs.format(str)说明

dayjs.format(str) ，str抽离成下面形式
const DATE_FORMAT_TYPE = {
  date: 'YYYY-MM-DD',
  time: 'HH:mm:ss',
  dateTime: 'YYYY-MM-DD HH:mm:ss',
};

相关资料：

• BEM规范：getbem.com/naming/