3
  • [TOC]
  • 安裝 ESLint

  • ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码
  • React 书写规范

    1. 一个文件声明一个组件,尽管可以在一个文件中声明多个 React 组件,但是最好不要这样做;推荐一个文件声明一个 React 组件,并只导出一个组件;
    1. 使用 JSX 表达式: 不要使用 React.createElement 的写法;
    1. 函数组件和 class 类组件的使用场景: 如果定义的组件不需要 state,建议将组件定义成函数组件,否则定义成 class 类组件。
    1. 组件名称和定义该组件的文件名称建议要保持一致;
    1. 组件名称: 应该推荐使用大驼峰命名;
    1. 属性名称: React DOM 使用小驼峰命令来定义属性的名称,而不使用 HTML 属性名称的命名约定;
    1. style 样式属性: 采用小驼峰命名属性的 JavaScript 对象;
    1. 不要再 render 中寫方法並使用;
    1. 組件中使用通過 mapStateToProps 關連 models 中的方法或變量時,如果不再使用所關連的方法或者變量要及時刪除;
  • JSX 写法注意

    1. 当标签没有子元素的时候,始终使用自闭合的标签 如:<Component />
    1. 在自闭标签之前留一个空格,如:<Component />
    1. 当组件跨行时,要用括号包裹 JSX 标签;
    1. 如果组件的属性可以放在一行(一个属性时)就保持在当前一行中,当大于一行时多行属性采用缩进并且关闭标签要另起一行;
    1. key 属性设置:当元素没有确定 id 的时候,万不得已才可以使用元素索引 index 作为 key;
  • HTML 书写规范

    1. 注意標簽格式縮進 使用 VSCode 開發較多,一般設置為 2,在開發新項目中會在項目中添加 VSCode config(不要輕易修改,如果要修改請和團隊商討)。
    1. 结构、表现、行为三者分离,避免内联,使用 link 将 CSS 文件引入,并置于 head 中。使用 script 将 js 文件引入,并置于 body 底部。
    1. 内容类型决定使用的语义标签。
    1. 加强“资源型”内容的可访问性和可用性,如:给 img 添加 alt 属性。
    1. 加强“不可见”内容的可访问性,如:背景图上的文字应该同时写在 HTML 中,并使用 CSS 使其不可见,有利于搜索引擎抓取你的内容,也可以在 CSS 失效的情况下看到内容。
  • CSS 书写规范

    1. 根据新建样式的适用范围暂时分为二级:公共样式/组件样式.尽量通过继承和层叠重用已有样式。不要轻易改动公共样式 CSS。改动后,要经过全面测试。
    1. 多选择器规则之间换行,即当样式针对多个选择器时每个选择器占一行。
    1. 使用 z-index 属性尽量 z-index 的值不要超过 150(通用组的除外),页面中的元素内容的 z-index 不能超过10(提示框等模块除外但维持在 150 以下),不允许直接使用 999~9999 之间大值。
    1. 尽量避免使用 CSS Hack,Web 项目现在以 Chrome 适配为标准,其次是 Safari ,由于一些浏览器自身缺陷,我们无法避开的时候,可以允许使用适当的 Hack,并且注释标明。
    1. 现在的项目 UI 都是在 Zeplin 上的,使用 Zeplin 样式时不要直接复制,而是提取可用的样式进行书写,有些样式已经在公共样式中进行统一配置。
    1. 不要在标签上直接写样式。
    1. 不推荐在 CSS 中使用 expression(大概意思是可以在样式中书写 js 代码)
    1. 非特殊情况不准在 CSS 中使用 @import
    1. 非必要情况不准在 CSS 中使用 !important,而是使用选择器。
    1. 不推荐在 CSS 中使用 * 选择符
    1. 不要将 CSS 样式写为单行。
    1. 避免使用行内(inline)样式
    1. 避免使用 * 设置 {margin: 0; padding: 0;}
    1. 使用 after 或 overflow 的方式清浮动
    1. 减少使用影响性能的属性,position:absolute/float:left 如这些定位或浮动属性.减少在 CSS 中使用滤镜表达式和图片 repeat,尤其在 body 当中,渲染性能极差, 如果需要用 repeat 的话,图片的宽或高不能少于 8px。
  • JavaScript 书写规范

    1. 類型和變量
    • 代碼中保證:變量顯式聲明作用域
    • 代碼中盡量保證:對所有的引用使用 const, 不要使用 var。對於需要使用可變動的引用, 使用 let 代替 var
    • 代碼中保證:將所有的 const 和 let 分組
    1. 變量的解構賦值
    • 代碼中保證:使用解構存取和使用多屬性對象
    • 代碼中保證:將數組成員賦值給變量時,使用數組解析
    • 代碼中保證:需要回傳多個值時使用對象解構
    1. String 部分
    • 代碼中保證:長度超過 80 的字符串應該使用字符串連接換行
    • 代碼中保證:構建字符串時, 使用字符串模板而不是字符串連接
    • 代碼中保證:數組遍歷採用 for/of, 對象遍歷採用 Object.keys/values/entries
    1. 數組及屬性
    • 代碼中保證:使用擴展運算符 ... 複製數組
    • 代碼中保證:使用 . 來訪問對象的屬性, 只有屬性是動態的時候使用 [ ]
    1. 對象
    • 代碼中保證: 单行定义的对象,最后一个成员不以逗号结尾,單行對象個數小於等於 3 個
    • 代碼中保證: 多行定义的对象,最后一个成员以逗号结尾
    1. 模塊
    • 代碼中保證:代碼中使用 ES6 標準的模塊(import/export)方式, 而不使用非標準的模塊加載器
    • 代碼中保證:不使用通配符 * 的 import
    • 代碼中保證:不從 import 中直接 export
    • 代碼中保證:文件只輸出一個類時文件名必須和類名完全保持一致
    1. 箭頭函數
    • 代碼中保證:不保存this的引用, 使用箭頭函數或 Function.bind
    • 代碼中保證:當必須使用函數表達式(或傳遞一個匿名函數)時, 使用箭頭函數
    • 代碼中保證:一個函數適用一行寫出並且只有一個參數時省略花括號、圓括號和 return
    1. 代碼風格
    • 代碼中保證:導出的默認函數使用駝峰命名、文件名與函數完全一致
    • 代碼中保證:導出單例、函數庫、空對象時使用帕斯卡式命名
    • 代碼中保證:本地的調試 log 和 debugger 在 push 代碼的時候已經確認刪除,保證代碼的整潔,以及控制台的整潔
    • 代碼中保證:书写过程中, 每行代码结束必须有分号; 原则上所有功能均根据项目需求原生开发, 以避免网上 down 下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …)
    • 代碼中保證:命名语义化, 不允许使用汉字拼音,应该使用英文单词,在适当的时候可以使用缩写
    • 代碼中保證:代码结构明了, 加适量注释(注意當代碼修改時同時修改注釋)提高函数重用率
    • 代碼中保證:任何时候都应该使用严格模式的条件判断 ===
    1. 存取器
    • 代碼中保證:屬性的存取函數不是必須的, 需要存儲函數時使用 get 方法和 set 方法。 如果屬性是布爾值, 存取函數使用 isVal() 或 hasVal()
    • 代碼中保證:創建 get()set() 函數保持一致
    1. 函數部分
    • 代碼中保證: 不使用 arguments, 選擇用 rest 語法 ... 替代
    • 代碼中保證: 使用函數聲明代替函數表達式
    • 代碼中保證: 直接給函數的參數指定默認值, 不使用一個變化的函數參數
    • 代碼中保證: 直接給函數參數賦值時, 會避免副作用
    • 代碼中保證: 立即执行函数可以写成箭头函数的形式
    • 代碼中保證: 使用匿名函数当作参数的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了 this

白水
1.8k 声望389 粉丝