- [TOC]
安裝 ESLint
- ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码
React 书写规范
- 一个文件声明一个组件,尽管可以在一个文件中声明多个 React 组件,但是最好不要这样做;推荐一个文件声明一个 React 组件,并只导出一个组件;
- 使用 JSX 表达式: 不要使用
React.createElement
的写法;
- 使用 JSX 表达式: 不要使用
- 函数组件和 class 类组件的使用场景: 如果定义的组件不需要 state,建议将组件定义成函数组件,否则定义成 class 类组件。
- 组件名称和定义该组件的文件名称建议要保持一致;
- 组件名称: 应该推荐使用大驼峰命名;
- 属性名称: React DOM 使用小驼峰命令来定义属性的名称,而不使用 HTML 属性名称的命名约定;
- style 样式属性: 采用小驼峰命名属性的 JavaScript 对象;
- 不要再 render 中寫方法並使用;
- 組件中使用通過
mapStateToProps
關連 models 中的方法或變量時,如果不再使用所關連的方法或者變量要及時刪除;
- 組件中使用通過
JSX 写法注意
- 当标签没有子元素的时候,始终使用自闭合的标签 如:
<Component />
;
- 当标签没有子元素的时候,始终使用自闭合的标签 如:
- 在自闭标签之前留一个空格,如:
<Component />
;
- 在自闭标签之前留一个空格,如:
- 当组件跨行时,要用括号包裹 JSX 标签;
- 如果组件的属性可以放在一行(一个属性时)就保持在当前一行中,当大于一行时多行属性采用缩进并且关闭标签要另起一行;
- key 属性设置:当元素没有确定 id 的时候,万不得已才可以使用元素索引 index 作为 key;
HTML 书写规范
- 注意標簽格式縮進 使用 VSCode 開發較多,一般設置為 2,在開發新項目中會在項目中添加 VSCode config(不要輕易修改,如果要修改請和團隊商討)。
- 结构、表现、行为三者分离,避免内联,使用 link 将 CSS 文件引入,并置于 head 中。使用 script 将 js 文件引入,并置于 body 底部。
- 内容类型决定使用的语义标签。
- 加强“资源型”内容的可访问性和可用性,如:给 img 添加 alt 属性。
- 加强“不可见”内容的可访问性,如:背景图上的文字应该同时写在 HTML 中,并使用 CSS 使其不可见,有利于搜索引擎抓取你的内容,也可以在 CSS 失效的情况下看到内容。
CSS 书写规范
- 根据新建样式的适用范围暂时分为二级:
公共样式
/组件样式
.尽量通过继承和层叠重用已有样式。不要轻易改动公共样式
CSS。改动后,要经过全面测试。
- 根据新建样式的适用范围暂时分为二级:
- 多选择器规则之间换行,即当样式针对多个选择器时每个选择器占一行。
- 使用
z-index
属性尽量z-index
的值不要超过150
(通用组的除外),页面中的元素内容的z-index
不能超过10
(提示框等模块除外但维持在150
以下),不允许直接使用999~9999
之间大值。
- 使用
- 尽量避免使用 CSS Hack,Web 项目现在以 Chrome 适配为标准,其次是 Safari ,由于一些浏览器自身缺陷,我们无法避开的时候,可以允许使用适当的 Hack,并且注释标明。
- 现在的项目 UI 都是在 Zeplin 上的,使用 Zeplin 样式时不要直接复制,而是提取可用的样式进行书写,有些样式已经在公共样式中进行统一配置。
- 不要在标签上直接写样式。
- 不推荐在 CSS 中使用 expression(大概意思是可以在样式中书写 js 代码)
- 非特殊情况不准在 CSS 中使用
@import
- 非特殊情况不准在 CSS 中使用
- 非必要情况不准在 CSS 中使用
!important
,而是使用选择器。
- 非必要情况不准在 CSS 中使用
- 不推荐在 CSS 中使用
*
选择符
- 不推荐在 CSS 中使用
- 不要将 CSS 样式写为单行。
- 避免使用行内(inline)样式
- 避免使用
*
设置{margin: 0; padding: 0;}
- 避免使用
- 使用 after 或 overflow 的方式清浮动
- 减少使用影响性能的属性,
position:absolute
/float:left
如这些定位或浮动属性.减少在CSS
中使用滤镜表达式和图片 repeat,尤其在 body 当中,渲染性能极差, 如果需要用 repeat 的话,图片的宽或高不能少于 8px。
- 减少使用影响性能的属性,
JavaScript 书写规范
- 類型和變量
- 代碼中保證:變量顯式聲明作用域
- 代碼中盡量保證:對所有的引用使用 const, 不要使用 var。對於需要使用可變動的引用, 使用 let 代替 var
- 代碼中保證:將所有的 const 和 let 分組
- 變量的解構賦值
- 代碼中保證:使用解構存取和使用多屬性對象
- 代碼中保證:將數組成員賦值給變量時,使用數組解析
- 代碼中保證:需要回傳多個值時使用對象解構
- String 部分
- 代碼中保證:長度超過 80 的字符串應該使用字符串連接換行
- 代碼中保證:構建字符串時, 使用字符串模板而不是字符串連接
- 代碼中保證:數組遍歷採用 for/of, 對象遍歷採用 Object.keys/values/entries
- 數組及屬性
- 代碼中保證:使用擴展運算符
...
複製數組
- 代碼中保證:使用擴展運算符
- 代碼中保證:使用 . 來訪問對象的屬性, 只有屬性是動態的時候使用 [ ]
- 對象
- 代碼中保證: 单行定义的对象,最后一个成员不以逗号结尾,單行對象個數小於等於 3 個
- 代碼中保證: 多行定义的对象,最后一个成员以逗号结尾
- 模塊
- 代碼中保證:代碼中使用 ES6 標準的模塊(import/export)方式, 而不使用非標準的模塊加載器
- 代碼中保證:不使用通配符
*
的 import
- 代碼中保證:不使用通配符
- 代碼中保證:不從 import 中直接 export
- 代碼中保證:文件只輸出一個類時文件名必須和類名完全保持一致
- 箭頭函數
- 代碼中保證:不保存this的引用, 使用箭頭函數或 Function.bind
- 代碼中保證:當必須使用函數表達式(或傳遞一個匿名函數)時, 使用箭頭函數
- 代碼中保證:一個函數適用一行寫出並且只有一個參數時省略花括號、圓括號和 return
- 代碼風格
- 代碼中保證:導出的默認函數使用駝峰命名、文件名與函數完全一致
- 代碼中保證:導出單例、函數庫、空對象時使用帕斯卡式命名
- 代碼中保證:本地的調試 log 和 debugger 在 push 代碼的時候已經確認刪除,保證代碼的整潔,以及控制台的整潔
- 代碼中保證:书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据项目需求原生开发, 以避免网上 down 下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …)
- 代碼中保證:命名语义化, 不允许使用汉字拼音,应该使用英文单词,在适当的时候可以使用缩写
- 代碼中保證:代码结构明了, 加适量注释(注意當代碼修改時同時修改注釋)提高函数重用率
- 代碼中保證:任何时候都应该使用严格模式的条件判断
===
- 代碼中保證:任何时候都应该使用严格模式的条件判断
- 存取器
- 代碼中保證:屬性的存取函數不是必須的, 需要存儲函數時使用 get 方法和 set 方法。 如果屬性是布爾值, 存取函數使用 isVal() 或 hasVal()
- 代碼中保證:創建
get()
和set()
函數保持一致
- 代碼中保證:創建
- 函數部分
- 代碼中保證: 不使用 arguments, 選擇用 rest 語法 ... 替代
- 代碼中保證: 使用函數聲明代替函數表達式
- 代碼中保證: 直接給函數的參數指定默認值, 不使用一個變化的函數參數
- 代碼中保證: 直接給函數參數賦值時, 會避免副作用
- 代碼中保證: 立即执行函数可以写成箭头函数的形式
- 代碼中保證: 使用匿名函数当作参数的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了 this
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。