• 前端代码规范

    HTML 编码规约

    (WC-HTML)-HTML 编码规约

    前言

    本规约涉及 HTML 语言的编码风格、最佳实践。

    参与和反馈

    对规约有任何意见和建议，欢迎留言讨论：）

    • 1【推荐】使用 2 个空格缩进。

      统一使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进：

      1. <!DOCTYPE html>
      2. <html>
      3.   <head>
      4.     <title>Page title</title>
      5.   </head>
      6.   <body>
      7.     <img src="images/company-logo.png" alt="Company">
      8.     <h1 class="hello-world">Hello, world!</h1>
      9.   </body>
      10. </html>

    • 2【强制】属性值使用双引号，不要使用单引号。

      2. <link rel='stylesheet' href='example.css'>
      3.  
      5. <link rel="stylesheet" href="example.css">

    • 3【推荐】不要省略自闭合标签结尾处的斜线，且斜线前需留有一个空格。

      虽然 HTML5 规范 中指出结尾的斜线是可选的，但保留它们可以明确表达该标签已闭合的语义，更易于维护和理解。

      同时，在 react 被广泛使用的今天，这与 JSX 的规范 相一致，JSX 中自闭合标签必须保留结尾的斜线。

      2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      3. <img src="images/foo.png" alt="foo">
      4.  
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <img src="images/foo.png" alt="foo" />

    • 4【强制】使用 HTML5 doctype。

      在每个页面开头使用  这个简单的 doctype，以保证使用标准模式并且在不同浏览器中的渲染尽可能一致。

      2. <html>
      3.   <head>
      4.   head>
      5. html>
      6.  
      8. html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      9. <html>
      10.   <head>
      11.   head>
      12. html>
      13.  
      15. html>
      16. <html>
      17.   <head>
      18.   head>
      19. html>

    • 5【推荐】指定 html 标签上的 lang 属性。

      HTML5 规范中说：

      推荐开发者在 html 元素上指定 lang 属性，以指出文档的语言。这有助于读屏、翻译等工具的工作。

      lang 属性的值由 language-subtags 组成，在 BCP47 中定义，了解更多。

      1. <html lang="zh-CN">
      2.   
      3. html>

    • 6【推荐】指定 IE 兼容模式。

      IE 浏览器支持使用 标签指定使用什么版本的 IE 来渲染页面。除非特殊需要，我们一般使用 IE=Edge,chrome=1 来让 IE 使用所支持的最新模式，并让支持 Chrome Frame 插件 的旧 IE 使用 Chrome Frame 渲染页面。

      <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

    • 7【推荐】使用 UTF-8 字符编码。

      声明一个明确的字符编码，可以让浏览器更快速高效地确定适合网页内容的渲染方式。

      由于历史原因，淘系不同产品采用了不同的字符编码。但对于今后的新业务，如无特殊要求，统一使用 UTF-8 字符编码，以便统一。

      在 HTML 中使用  声明文档的编码方式：

      1. <head>
      2.   <meta charset="utf-8">
      3. </head>

    • 8【推荐】引入 CSS 和 JavaScript 时无需指定 type。

      根据 HTML5 规范，引入 CSS 和 JavaScript 时通常不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。

      1. <!-- bad -->
      2. <link type="text/css" rel="stylesheet" href="example.css">
      3. <style type="text/css">
      4.   /* ... */
      5. </style>
      6. <script type="text/javascript" src="example.js"></script>
      7.  
      8. <!-- good -->
      9. <link rel="stylesheet" href="example.css">
      10. <style>
      11.   /* ... */
      12. </style>
      13. <script src="example.js"></script>

    • 9【推荐】在 head 标签内引入 CSS，在 body 结束标签前引入 JS。

      一般情况下，CSS 应在  标签里引入，而 JavaScript 除了基础库等比较基础性的脚本文件，其他都在靠近 body 结束标签前引入。

      2. html>
      3. <html>
      4.   <head>
      5.     <script src="mod-a.js">script>
      6.     <script src="jquery.js">script>
      7.   head>
      8.   <body>
      9.     <style>
      10.       .mod-example {
      11.         padding-left: 15px
      12.       }
      13.     style>
      14.   body>
      15. html>
      16.  
      18. html>
      19. <html>
      20.   <head>
      21.     <style>
      22.       .mod-example {
      23.         padding-left: 15px
      24.       }
      25.     style>
      26.   head>
      27.   <body>
      28.     ...
      29.     <script src="jquery.js">script>
      30.   body>
      31. html>

    • 10【参考】属性顺序。

      HTML 属性按照特定顺序出现可以提高可读性，推荐顺序如下：

      • class
      • id, name
      • data-*
      • src, for, type, href, value
      • title, alt
      • role, aria-*

      class 是为高可复用组件设计的，所以处在第一位。ids 更加特指且应该尽量少使用，所以处在第二位。

      1. <a class="..." id="..." data-toggle="modal" href="#">
      2.   Example link
      3. </a>
      4.  
      5. <input class="form-control" type="text">
      6.  
      7. <img src="..." alt="...">

    • 11【推荐】不要为 Boolean 属性添加取值。

      Boolean 属性指不需要声明取值的属性，一个元素中 Boolean 属性存在即表示取值 true，不存在则表示取值 false。了解更多

      XHTML 需要每个属性声明取值，但是 HTML5 并不需要。尽量不要为 Boolean 属性添加取值。

      1. <!-- bad -->
      2. <input type="text" disabled="disabled" />
      3. <input type="checkbox" value="1" checked="checked" />
      4. <select>
      5.   <option value="1" selected="selected">1</option>
      6. </select>
      7.  
      8. <!-- good -->
      9. <input type="text" disabled />
      10. <input type="checkbox" value="1" checked />
      11. <select>
      12.   <option value="1" selected>1</option>
      13. </select>

    • 12【推荐】class 和 id 的命名。

      class 和 id 的命名规则为：

      • 全小写字母
      • 多个单词间用中划线（-）分割

      例如 example-class, id-for-label, id-for-anchor。

      除了一个特例：当 class 或 id 用作 JS 操作 DOM 的钩子时，可以加上特定前缀以明确标识仅用于 JS 操作，需注意不要再将此类 class 或 id 用于 CSS。推荐的命名规则为：以 J_ 为前缀，后接小驼峰，例如 J_exampleClassForJs, J_exampleIdForJs。

      1. <!-- bad -->
      2. <form class="verticalForm tiny_form">
      3.   <label for="addressInput">Address</label>
      4.   <input id="addressInput" name="address" />
      5. </form>
      6.  
      7. <!-- good -->
      8. <form class="vertical-form tiny-form">
      9.   <label for="address-input">Address</label>
      10.   <input id="address-input" name="address" />
      11. </form>
      12.  
      13. <!-- good 明确标识该 class 或 id 仅用于 JS dom 操作，不会影响样式 -->
      14. <div class="use-for-css J_useForJS">
      15. </div>
      16. <div id="J_useForJS">
      17. </div>

    • 13【推荐】自定义属性的命名：以 data- 为前缀。

      建议自定义属性的命名都以 data- 为前缀，以便区分。

      2. <a modal="toggle" href="#">
      3.   Example link
      4. a>
      5.  
      7. <a data-modal="toggle" href="#">
      8.   Example link
      9. a>

    • 14【参考】建议的 HTML 脚手架。

      根据以上规约，建议的 HTML 脚手架如下：

      1. <!DOCTYPE html>
      2. <html>
      3.   <head>
      4.     <meta charset="utf-8">
      5.     <meta lang="zh">
      6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      7.     <meta name="renderer" content="webkit">
      8.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      9.     <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台">
      10.     <meta name="keyword" content="淘宝,掏宝,网上购物,C2C">
      11.     <title>淘宝网</title>
      12.     <link rel="stylesheet" href="example.css">
      13.   </head>
      14.   <body>
      15.     <script src="example.js"></script>
      16.   </body>
      17. </html>

    • 15【推荐】注释。

      HTML 注释用于希望在源码中看到但不被浏览器渲染的信息。其语法为起始自 。

      对于单行注释，需在注释内容和注释符之间需留有一个空格，以增强可读性：

      2.

      需要额外注意的是，由于 HTML 代码一般不会经过预处理，出于安全考虑，不要在 HTML 中出现任何关于业务相关敏感信息的注释。

    • 16【参考】注意 HTML 的可访问性（Accessibility）。

      页面的可访问性（即Accessibility，常缩写为 a11y）是让你的网站尽可能多的人使用的做法——我们传统上认为这是关于残疾人的，但实际上它也涵盖了其他群体，比如使用移动设备的人群，或者那些网络连接缓慢的人群。

      例如，为 img 标签设置 alt 属性：

      2. <img src="hello.jpg" />
      3.  
      5. <img src="hello.jpg" alt="Welcome to visit!" />
      6.  
      8. <img src="logo.jpg" alt="" />
      9.  
      11. <img src="logo.jpg" role="presentation" />

      了解更多 HTML 可访问性的知识，可以阅读这篇 MDN 的文章。

    • 17【参考】尽量根据语义使用 HTML 标签。

      HTML 标签（更严谨的叫法是 HTML 元素）都有其语义，例如 p 标签即 ‘paragraphs’ 用于章节，a 标签即 ‘anchors’ 用于锚点链接。

      我们应优先选取符合当下所需语义的标签，这样的好处是有助于可访问性（accessibility），并且如果 CSS 挂掉时也可以获得较好的展示效果。

      1. <!-- bad -->
      2. <div class="list">
      3.   <div class="list-item">1</div>
      4.   <div class="list-item">2</div>
      5.   <div class="list-item">3</div>
      6. </div>
      7.  
      8. <!-- good -->
      9. <ul class="list">
      10.   <li class="list-item">1</li>
      11.   <li class="list-item">2</li>
      12.   <li class="list-item">3</li>
      13. </ul>

    CSS 编码规约

    (WC-CSS)-CSS 编码规约

    前言

    本规约涉及 CSS 及其预编译语言（Sass、Less）的编码风格、最佳实践。

    参与和反馈

    对规约有任何意见和建议，欢迎留言讨论：）

    • 1【推荐】使用 2 个空格缩进。stylelint: indentation

      统一使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进：

      1. /* bad */
      2. .selector {
      3.     padding-left: 15px;
      4. }
      5.  
      6. /* good */
      7. .selector {
      8.   padding-left: 15px;
      9. }

    • 2【推荐】空格风格。stylelint: block-closing-brace-space-before block-opening-brace-space-after block-opening-brace-space-before declaration-colon-space-after declaration-colon-space-before value-list-comma-space-after

      块的左大括号 { 前有一个空格；单行的块左大括号后有一个空格，右大括号前有一个空格：

      1. /* bad */
      2. .selector{
      3.   padding-left: 15px;
      4. }
      5. .selector{padding-left: 15px;}
      6.  
      7. /* good */
      8. .selector {
      9.   padding-left: 15px;
      10. }
      11. .selector { padding-left: 15px; }

      属性声明语句的冒号 : 后面有一个空格，前面无空格：

      1. /* bad */
      2. .selector {
      3.   padding-left:15px;
      4. }
      5.  
      6. /* good */
      7. .selector {
      8.   padding-left: 15px;
      9. }

      >、+、~ 选择器的前后各保留一个空格：

      1. /* bad */
      2. .selector>.children {
      3.   padding-left:15px;
      4. }
      5. .selector+.brother {
      6.   padding-left:15px;
      7. }
      8.  
      9. /* good */
      10. .selector > .children {
      11.   padding-left:15px;
      12. }
      13. .selector + .brother {
      14.   padding-left:15px;
      15. }

      逗号 , 分隔的属性值，逗号之后有一个空格。但 rgb(), rgba(), hsl(), hsla(), rect() 中的颜色值逗号后面无空格。这么做有助于区分哪些是属性值、哪些是颜色值：

      1. /* bad */
      2. .selector {
      3.   background-color: rgba(0, 0, 0, 0.5);
      4.   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5),inset 0 1px 0 rgba(255, 255, 255, 0.5);
      5. }
      6.  
      7. /* good */
      8. .selector {
      9.   background-color: rgba(0,0,0,.5);
      10.   box-shadow: 0px 1px 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
      11. }

      【仅 Sass 或 Less】四则运算符两侧各保留一个空格：

      1. /* bad */
      2. .selector {
      3.   width: $default-width/2;
      4. }
      5.  
      6. /* good */
      7. .selector {
      8.   width: $default-width / 2;
      9. }

      【仅 Sass 或 Less】Mixin 名称和括号 () 间不要有空格，参数的逗号 , 前无空格后无空格：

      1. /* bad */
      2. .selector {
      3.   @include size (30px,20px);
      4. }
      5.  
      6. /* good */
      7. .selector {
      8.   @include size(30px, 20px);
      9. }

    • 3【强制】属性声明使用分号结尾。stylelint: declaration-block-trailing-semicolon

      所有声明都应该以分号结尾，不能省略不写。虽然最后一条声明后的分号是可选的，但如果不写代码会更容易出错并不利于编码一致性。

      1. /* bad */
      2. .selector {
      3.   margin-top: 10px;
      4.   padding-left: 15px
      5. }
      6.  
      7. /* good */
      8. .selector {
      9.   margin-top: 10px;
      10.   padding-left: 15px;
      11. }

    • 4【推荐】大括号换行风格。stylelint: block-closing-brace-newline-before block-opening-brace-newline-after

      CSS 的大括号换行风格与 JS 规约 大体相同，采用 Egyptian Brackets 风格，具体如下：

      声明块的右大括号 } 应单独成行：

      1. /* bad */
      2. .selector {
      3.   padding-left: 15px;}
      4.  
      5. /* good */
      6. .selector {
      7.   padding-left: 15px;
      8. }

    • 5【参考】使用多个选择器时，让每个选择器单独一行。stylelint: selector-list-comma-newline-after

      这可以增强代码可读性：

      1. /* bad */
      2. .selector, .selector-secondary, .selector[type=text] {
      3.   padding:15px;
      4.   margin:0px 0px 15px;
      5.   background-color:rgba(0, 0, 0, 0.5);
      6.   box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
      7. }
      8.  
      9. /* good */
      10. .selector,
      11. .selector-secondary,
      12. .selector[type="text"] {
      13.   padding: 15px;
      14.   margin-bottom: 15px;
      15.   background-color: rgba(0,0,0,.5);
      16.   box-shadow: 0px 1px 2px #ccc, inset 0 1px 0 #fff;
      17. }

    • 6【推荐】属性声明应单独成行。stylelint: declaration-block-single-line-max-declarations

      不要在一行声明多条语句，这不利于可读性，也不利于通过错误报告定位问题。

      1. /* bad */
      2. .selector {
      3.   padding-left: 15px;  margin-left: 10px;
      4. }
      5.  
      6. /* good */
      7. .selector {
      8.   padding-left: 15px;
      9.   margin-left: 10px;
      10. }

    • 7【参考】声明块内有多条语句时，需要写成多行；只有一条语句时，可以写成一行。

      当声明块内有多条语句时，必须写成多行。

      但当声明块内只有一条语句时，可以选择写成一行，以保持简洁。也可以仍写成多行，以保持统一和方便增加语句。

      1. /* bad - 声明块包含多条语句时，必须写成多行 */
      2. .selector { padding-left: 15px; margin-left: 20px; }
      3.  
      4. /* good */
      5. .selector { 
      6.   padding-left: 15px;
      7.   margin-left: 20px;
      8. }
      9.  
      10. /* good - 声明块包含多条语句时，可以写成一行，也可以写成多行 */
      11. .selector { padding-left: 15px; }
      12. .selector {
      13.   padding-left: 15px;
      14. }

    • 8【推荐】单行最大字符数：100。stylelint: max-line-length

      过长的单行代码不易阅读和维护，需要进行合理地换行，可以在属性值的空格处或逗号后换行。

      我们推荐单行代码最多不要超过 100 个字符，除了以下两种情况：

      • 使用 url() 函数时
      • CSS 属性值本身无法换行时，即属性值内无空格或逗号时
      1. /* bad */
      2. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.04, rgb(88, 94, 124)), color-stop(0.52, rgb(115, 123, 162)));
      3.  
      4. /* good */
      5. background-image: -webkit-gradient(
      6.   linear,
      7.   left bottom,
      8.   left top,
      9.   color-stop(0.04, rgb(88, 94, 124)),
      10.   color-stop(0.52, rgb(115, 123, 162))
      11. );

    • 9【参考】统一省略或保留小数点前的 0。stylelint: number-leading-zero

      在 CSS 中，大于 -1 小于 1 的小数，小数点前的 0 可以省略：

      1. /* 正常写法 */
      2. .selector {
      3.   opacity: 0.5;
      4.   left: -0.5px;
      5. }
      6.  
      7. /* 省略小数点前 0 的写法 */
      8. .selector {
      9.   opacity: .5;
      10.   left: -.5px;
      11. }

      对于是否省略小数点前的 0，业界存在争议：

      • 省略 0 的好处是：代码更简洁，可以减少一个字符
      • 不省略的好处是：代码可读性更好、一致性更强

      你可选择自己倾向的风格，在代码中风格统一即可，要么都省略，要么都保留。

      我们推荐保留 0，因为当今很多 CSS 压缩工具会在压缩时帮我们去掉 0，不存在多占用一个字符的问题。保留 0 能增强代码的可读性和一致性。

    • 10【推荐】长度值为 0 时，省略掉长度单位。stylelint: length-zero-no-unit

      在 CSS 中，长度值为 0 时，它的单位是可选的（长度单位包括：em, ex, ch, vw, vh, cm, mm, in, pt, pc, px, rem, vmin, and vmax）。省略长度单位可以使代码更简洁：

      1. /* bad */
      2. .selector {
      3.   margin-top: 0px;
      4.   font-size: 0em;
      5. }
      6.  
      7. /* good */
      8. .selector {
      9.   margin-top: 0;
      10.   font-size: 0;
      11. }

    • 11【参考】颜色值统一使用十六进制颜色码，不要使用 rgb() 和颜色关键字。stylelint: color-named

      颜色值统一使用十六进制颜色码，以提高代码一致性：

      1. /* bad */
      2. .selector {
      3.   background-color: rgb(99, 76, 217);
      4.   border-color: grey;
      5.   color: #333;
      6. }
      7.  
      8. /* good */
      9. .selector {
      10.   background-color: #634cd9;
      11.   border-color: #808080;
      12.   color: #333;
      13. }

      除了代码一致性的考虑，不建议使用 CSS 颜色关键字 还有以下原因：

      • 不便于对颜色进行微调，比如想对 red 进行微调，还要把它先转换成 #f00
      • CSS 颜色关键字有一百余个，有许多不为人知的生僻颜色名，例如 teal

    • 12【推荐】十六进制颜色码统一使用小写字母。stylelint: color-hex-case

      为了一致性我们需要约定在 hex 数值中统一使用大写或统一使用小写字母。

      使用小写字母的理由是，小写字母的字形相比大写字母更容易分辨：

      1. /* bad */
      2. .selector {
      3.   color: #FEFEFE;
      4. }
      5.  
      6. /* good */
      7. .selector {
      8.   color: #fefefe;
      9. }

    • 13【推荐】使用尽可能短的十六进制值。stylelint: color-hex-length

      优先使用缩写形式（3个字母）的十六进制颜色值：

      1. /* bad */
      2. .selector {
      3.   color: #ffffff;
      4. }
      5.  
      6. /* good */
      7. .selector {
      8.   color: #fff;
      9. }

    • 14【参考】属性选择器的值始终用双引号包裹。stylelint: selector-attribute-quotes

      属性选择器的值的引号只在某些情况下可以省略，所以统一加上双引号以保证代码一致性。

      1. /* bad */
      2. input[type=text] {
      3.   height: 20px;
      4. }
      5.  
      6. /* good */
      7. input[type="text"] {
      8.   height: 20px;
      9. }

    • 15【参考】注意选择器性能。

      使用 CSS 选择器时，应注意以下性能问题：

      • 使用 class 而不是原生元素标签
      • 减少在经常出现的组件中使用个别属性选择器（如 [class^="..."]）
      • 控制选择器的长度，每个组合选择器内的条目尽量不超过 3 个

    • 16【推荐】不要使用 id 选择器。stylelint: selector-max-id

      id 选择器不可复用，而且会带来过高的选择器优先级

    • 17【参考】属性声明的顺序。

      相关联的属性声明最好写成一组，并按如下顺序排序：

      1. 定位：如 position、left、right、top、bottom、z-index
      2. 盒模型：如 display、float、width、height、margin、padding、border
      3. 文字排版：如 font、color、line-height、text-align
      4. 外观：如 background
      5. 其他属性

      「定位」和「盒模型」放在最前面，是因为它们决定了元素的布局、位置和尺寸。「定位」排在「盒模型」之前，是由于「定位」属性可以让元素脱离正常文本流，从而使「盒模型」属性失效。

      除了「定位」和「盒模型」，其他属性都只在元素内部起作用，不会对前两类属性的结果产生影响，因此放在后面。

      1. .declaration-order {
      2.   /* 定位 */
      3.   position: absolute;
      4.   top: 0;
      5.   right: 0;
      6.   bottom: 0;
      7.   left: 0;
      8.   z-index: 100;
      9.  
      10.   /* 盒模型 */
      11.   display: block;
      12.   float: right;
      13.   width: 100px;
      14.   height: 100px;
      15.   border: 1px solid #e5e5e5;
      16.  
      17.   /* 排版 */
      18.   font: normal 13px "Helvetica Neue", sans-serif;
      19.   line-height: 1.5;
      20.   color: #333;
      21.   text-align: center;
      22.  
      23.   /* 外观 */
      24.   background-color: #f5f5f5;
      25.  
      26.   /* 其他 */
      27.   opacity: 1;
      28. }

    • 18【推荐】不要使用 CSS 的 @import。

      与  相比, @import 更慢，增加了额外的页面请求，并可能引发其他的意想不到的问题。应该避免使用它们，而选择其他方案：

      • 使用多个  标签
      • 使用 CSS 预处理器，如 Sass 或 Less 将样式编译到一个文件中
      • 使用 Rails, Jekyll 或其他环境提供的功能，来合并 CSS 文件
      2. <style>
      3.   @import url("more.css");
      4. style>
      5.  
      7. <link rel="stylesheet" href="more.css">

    • 19【参考】适时使用简写属性。stylelint: declaration-block-no-shorthand-property-overrides declaration-block-no-redundant-longhand-properties

      常见的简写属性包括：

      • font
      • background
      • padding
      • margin
      • border
      • border-radius

      使用简写属性时，需要显示地设置所有值。我们应该在真正需要设置所有值或大多数值时才使用简写属性，例如只想设置下边距，不应该用 margin: 0 0 10px;，而应该用 margin-bottom: 10px;。

      过度使用属性简写往往会导致更混乱的代码，可能引起不必要的属性重写和意想不到的副作用。

      1. /* bad */
      2. .selector {
      3.   margin: 0 0 10px;
      4. }
      5.  
      6. /* good */
      7. .selector {
      8.   margin-bottom: 10px;
      9. }

    • 20【强制】CSS 的注释。stylelint: no-invalid-double-slash-comments

      在 CSS 中，不要使用双斜杠注释 //，CSS 不支持这种语法（Sass 和 Less 支持），可能引起异常结果：

      1. /* bad */
      2. a { // color: pink; }
      3. // a { color: pink; }
      4.  
      5. /* good */
      6. a { /* color: pink; */ }
      7. /* a { color: pink; } */

      在 Sass 或 Less 中，可以使用双斜杠注释。但需要注意的是，编译为 CSS 后，代码中的双斜杠注释会被删除，而 /* */ 会被保留。

    • 21【推荐】注释内容和注释符之间需留有一个空格。stylelint: comment-whitespace-inside

      注释内容和注释符之间需留有一个空格，以增加可读性：

      1. /* bad */
      2. .selector {
      3.   /*comment*/
      4.   /*  comment  */
      5.   /**
      6.    *comment
      7.    */
      8.   padding-left: 15px;
      9. }
      10.  
      11. /* good */
      12. .selector {
      13.   /* comment */
      14.   /**
      15.    * comment
      16.    */
      17.   padding-left: 15px;
      18. }

    • 22【参考】注释行上方需留有一行空行，除非上一行是注释或块的顶部。stylelint: comment-empty-line-before

      注释行上方需留有一行空行，除非上一行是注释或块的顶部，以提高可读性：

    • 23.1【推荐】代码组织顺序。

      按如下顺序组织 Sass / Less 代码：

      • @import 语句
      • 全局变量声明
      • 样式声明
      1. @import 'common/theme.scss';
      2.  
      3. $color-red: #f0f0f0;
      4.  
      5. . selector {
      6.   color: $color-red;
      7. }

    • 23.2【推荐】命名。

      同 class、id 的命名规则一致，在 Sass / Less 中，变量和 mixin 的命名规则为：

      • 全小写字母
      • 多个单词间用中划线（-）分割
      1. // Sass 变量和 mixin
      2. $my-variable: #f0f0f0;
      3. @mixin my-mixin($property) {
      4.   background: $property;
      5. }
      6.  
      7. // Less 变量和 mixin
      8. @my-variable: #f0f0f0;
      9. .my-mixin(@property) {
      10.   background: @property;
      11. }

    • 23.3【推荐】属性声明的顺序。

      对于 Sass 和 Less，块内的属性声明按如下顺序排序：

      • 标准属性声明：除了 mixin 调用、extend 子级选择器的声明，将它们按 CSS「属性声明的顺序」章节的规则进行排序
      • mixin 调用：Sass 的 @include 声明、Less 的 mixin 调用
      • 嵌套的子级选择器：将嵌套的选择器放到块的末尾，并且在其上方保留一行空行
      1. .btn {
      2.   background: #ccc;
      3.   font-weight: bold;
      4.   @include transition(background 0.5s ease);
      5.  
      6.   .icon {
      7.     margin-right: 10px;
      8.   }
      9. }

    • 23.4【参考】嵌套选择器的深度不要超过 3 层。stylelint: max-nesting-depth

      当嵌套选择器的层级过深时，可能带来一些副作用：

      建议选择器嵌套层级不要超过 3 层：

      1. .container {
      2.   .header {
      3.     .user-name {
      4.       // STOP！不要再嵌套更深选择器
      5.     }
      6.   }
      7. }

    • 23.5【推荐】Sass 和 Less 的注释。

      在 Sass 或 Less 中，可以使用双斜杠注释。但需要注意的是，编译为 CSS 后，代码中的双斜杠注释会被删除，而 /* */ 会被保留。

      1. // 单行注释
      2. .selector-a {
      3.   padding-left: 15px;
      4. }
      5.  
      6. /* 
      7.  * 多行注释
      8.  * 多行注释
      9.  */
      10. .selector-b {
      11.   margin-left: 15px;
      12. }

      编译为 CSS 后，双斜杠注释会被删除：

      1. .selector-a {
      2.   padding-left: 15px;
      3. }
      4.  
      5. /* 
      6.  * 多行注释
      7.  * 多行注释
      8.  */
      9. .selector-b {
      10.   margin-left: 15px;
      11. }

    • 23.6【推荐】使用 Mixin 而不是 Extend 来达到 DRY 目的。

      使用 Mixin (@mixin 和 @include 指令) 来让代码遵循 DRY 原则（Don’t Repeat Yourself）、增加抽象性和降低复杂度。

      应避免使用 @extend 指令，它不够直观且具有潜在风险，尤其是在嵌套选择器中。即使继承的是顶层选择器，如果选择器的顺序发生变化，也可能引起问题。（比如，如果它们存在于其他文件，而加载顺序发生了变化）。

      Extend 相比 Mixin 的好处是，如果无参数的 mixin 被多处使用，编译后会输出多段重复的代码。这时如果使用 @extend，可以避免这个问题。但是 gzip 等压缩工具就可以解决重复代码的问题，因此大多数情况下，你只需要使用 mixin 来让代码符合 DRY 原则。

    JavaScript 编码规约

    (WC-JS)-JavaScript 编码规约

    前言

    JavaScript 是一门十分灵活的编程语言，相比其他语言，JS 的代码风格更加不受约束百花齐放，因此更需要对编码风格进行约束以提高团队协作效率和代码可维护性。另外，不少开发者对 JS 语言特性、最佳实践的了解并不全面，比如集团内大量在写前端代码的后端、外包同学，有必要通过规约和工具帮助他们了解常见的 JS 问题、规避不好的实现。

    因此，本规约主要围绕以下两部分内容展开：

    • 统一编码风格：给出一套集团层面推荐的尽可能合理、完备、争议少的 JS 风格规范，主要见「编码风格」章节
    • 普及最佳实践：普及 JS 的常见问题和语言特性，帮助开发者规避一些不好的实现，主要见「语言特性」章节

    需要说明的是，本规约面向 ES6+ 的 JavaScript 版本编写。ES6 经过几年的普及，在集团内前端仓库的占比越来越大，尤其是新项目大都使用 ES6 编码。对于还在使用 ES5 及之前版本 JS 的同学，本规约的大部分内容同样适用，只是有少部分 ES5 需要额外注意的地方，可阅读本规约的「关于 ES5」章节。

    ECMAScript 6.0（即 ES6/ES2015）作为 JavaScript 语言的下一代标准，于 2015 年 6 月发布。ES6 引入了诸多新的语言特性，与之前的 JS 版本有很大差异，因此业界通常会以 ES6、ES5 模糊地区别 ES6 之后（包括 ES2016/ES2017..）、之前的 JS 版本，本规约中也会使用这种模糊的叫法。

    本规约篇幅较长，一次性读完可能比较费力，你也可以把它当成一个工具书，遇到规约插件扫描出的 issue 时，来这里寻找解释。

    参与和反馈

    对规约有任何意见和建议，欢迎留言讨论。

    1 编码风格

    1.1 缩进

    • 1.1.1【强制】使用 2 个空格缩进。eslint: indent no-tabs no-mixed-spaces-and-tabs

      统一使用 2 个空格缩进，不要使用 4 空格缩进、tab 缩进或混合使用空格与 tab 缩进：

      1. // bad
      2. function foo() {
      3. ∙∙∙∙let name;
      4. }
      5.  
      6. // good
      7. function foo() {
      8. ∙∙let name;
      9. }

      缩进和分号，大概是 JS 中争议最大的两个风格问题。它们基本是纯粹的风格取向问题，并无优劣之分。

      就缩进而言，有人觉得两空格缩进让代码更紧凑，能看到更多代码；有人觉得两空格区分度不强，看起来费力。

      综合参考业界主流编码规范和集团内主流编码风格，本规约选择了『使用 2 个空格缩进』的风格。但这不是不可动摇的，后面我们可能根据争议规约问题的全员投票结果和全集团代码风格的统计结果再做决定。

    1.2 分号

    • 1.2.1【强制】使用分号。eslint: semi

      统一使用分号结束语句：

      1. // bad
      2. const foo = 'foo'
      3.  
      4. // good
      5. const foo = 'foo';

      在 JS 中，语句的结尾可以不写分号。对于不写分号的语句，JS 引擎会自动判断分号应该出现位置并自动添加它，这一特性被称为 自动分号插入机制（即 Automatic Semicolon Insertion，简称 ASI）。

      ASI 在个别情况下的行为比较怪异，会引起令人意外的效果。一种情况是会意外产生多行表达式，请看下面两段代码：

      1. // 执行报错 => Uncaught TypeError: "world"[(1 , 2 , 3)].forEach is not a function
      2. const number = 0
      3. const hello = 'world'
      4. [1, 2, 3].forEach((item) => {
      5.   number += item
      6. })
      7.  
      8. // 执行报错 => Uncaught TypeError: "foo" is not a function
      9. const foo = 'foo'
      10. (async function bar() {
      11. }())

      以上两段代码之所以执行报错，是由于 ASI 添加分号后的效果为：

      1. const number = 0;
      2. const hello = 'world'
      3. [1, 2, 3].forEach((item) => {
      4.   number += item;
      5. });
      6.  
      7. const foo = 'foo' 
      8. (async function bar() {
      9. }());

      可以看到，ASI 没有在以 [ 和 ( 开头的行的上一行末尾添加分号，导致出现了多行表达式。不过这种情况可以通过 ESLint 的 no-unexpected-multiline 规则规避，在下一条规约「避免意外的多行表达式」中有详细描述。

      除了会造成多行表达式，还有一种不写分号时易出错的情况：

      1. function foo() {
      2.   return
      3.     'bar'
      4. }
      5.  
      6. foo() // => undefined

      执行函数返回 undefined，是由于 ASI 添加分号后的效果为：

      1. function foo() {
      2.   return;
      3.     'bar';
      4. }

      return 语句在本行直接结束并返回了，因此没有返回换行后的值。不过这种情况可以通过 ESLint 的 no-unreachable 规则规避。

      综上所述，只要能规避 ASI 的负面作用（通过 ESLint 规则辅助或牢记 ASI 的异常条件），带不带分号就完全是一个风格取向问题：有人觉得不加分号代码更加简洁，有人觉得加分号语义更明确更符合从其他某语言过来的习惯。

      综合参考业界主流编码规范和集团内主流编码风格，本规约选择了『统一使用分号』的风格。但这不是不可动摇的，后面我们可能根据争议规约问题的全员投票结果和全集团代码风格的统计结果再做决定。

    • 1.2.2【强制】避免意外的多行表达式。eslint: no-unexpected-multiline

      如上条规则所述，需要避免由于不加分号导致出现意外的多行表达式。

      以下几种情况 ASI 不会自动添加分号：

      • 语句有一个未闭合的括号、数组字面量、对象字面量或其他某种未有效结束语句的方式（比如以 . 或 , 结尾）
      • 该行是 -- 或 ++，此时将对下一行起增/减作用
      • 该行是一个 for()、while()、do、if() 或 else，且没有 {
      • 下一行的开头是 [ ( + - * / , . 或其它一些在单个表达式中两个元素之间的二元操作符
      1. // bad => Uncaught ReferenceError: bar is not defined
      2. const foo = {};
      3. const bar = {}
      4. [foo, bar].forEach((item) => {
      5.   item.baz = 'baz';
      6. });
      7.  
      8. // good
      9. const foo = {};
      10. const bar = {};
      11. [foo, bar].forEach((item) => {
      12.   item.baz = 'baz';
      13. });
      14.  
      15. // bad => Uncaught TypeError: "foo" is not a function
      16. const foo = 'foo'
      17. (async function bar() {
      18. }());
      19.  
      20. // good
      21. const foo = 'foo';
      22. (async function bar() {
      23. }());

    • 1.2.3【强制】禁止不必要的分号。eslint: no-extra-semi

    • 1.2.4【强制】分号必须写在行尾。eslint: semi-style

    1.3 逗号

    • 1.3.1【强制】用逗号分隔的多行结构，将逗号放到行尾。eslint: comma-style

      1. // bad
      2. const hero = {
      3.     firstName: 'Luffy'
      4.    ,lastName: 'Monkey.D'
      5. };
      6.  
      7. const heroes = [
      8.     'Luffy'
      9.   , 'Ace'
      10.   , 'Sabo'
      11. ];
      12.  
      13. // good
      14. const hero = {
      15.   firstName: 'Luffy',
      16.   lastName: 'Monkey.D',
      17. };
      18.  
      19. const heroes = [
      20.   'Luffy',
      21.   'Ace',
      22.   'Sabo',
      23. ];

    • 1.3.2【强制】用逗号分隔的多行结构，始终加上最后一个逗号。eslint: comma-dangle

      1. // bad
      2. const hero = {
      3.   firstName: 'Luffy',
      4.   lastName: 'Monkey.D'
      5. };
      6.  
      7. const heroes = [
      8.   'Batman',
      9.   'Superman'
      10. ];
      11.  
      12. function createHero(
      13.   firstName,
      14.   lastName,
      15.   inventorOf
      16. ) {
      17.   // ...
      18. }
      19.  
      20. // good
      21. const hero = {
      22.   firstName: 'Luffy',
      23.   lastName: 'Monkey.D',
      24. };
      25.  
      26. const heroes = [
      27.   'Batman',
      28.   'Superman',
      29. ];
      30.  
      31. function createHero(
      32.   firstName,
      33.   lastName,
      34.   inventorOf,
      35. ) {
      36.   // ...
      37. }
      38.  
      39. // good - 需注意，使用扩展运算符的元素后面不能加逗号
      40. function createHero(
      41.   firstName,
      42.   lastName,
      43.   inventorOf,
      44.   ...heroArgs
      45. ) {
      46.   // ...
      47. }

      这可以使增删行更加容易，也会使 git diff 更加清晰：

      1. // bad - 没有结尾逗号时，新增一行的 git diff 示例
      2. const hero = {
      3.      firstName: 'Florence',
      4. -    lastName: 'Nightingale'
      5. +    lastName: 'Nightingale',
      6. +    inventorOf: ['coxcomb chart', 'modern nursing']
      7. };
      8.  
      9. // good - 有结尾逗号时，新增一行的 git diff 示例
      10. const hero = {
      11.      firstName: 'Florence',
      12.      lastName: 'Nightingale',
      13. +    inventorOf: ['coxcomb chart', 'modern nursing'],
      14. };

      Babel 等编译器会在编译后的代码里去掉最后额外的逗号，因此不必担心旧浏览器的兼容性问题。

    1.4 换行

    • 1.4.1【强制】大括号换行风格。eslint: brace-style

      大括号换行采用 1TBS 风格（即 One True Brace Style，它要求大括号与控制语句放在同一行），且单行代码块可不换行，具体规则如下：

      • 左大括号 { 前面不换行，后面换行
      • 右大括号 } 前面换行
      • 右大括号 } 后面是否换行有两种情况：
        • 如果 } 终结了整个语句，如条件语句、函数或类的主体，则需要换行
        • 如果 } 后面存在 else、catch、while 等语句，或存在逗号、分号、右小括号（)），则不需要换行
      1. // bad - Stroustrup 风格
      2. if (foo) {
      3.   thing1();
      4. }
      5. else {
      6.   thing2();
      7. }
      8.  
      9. // bad - Allman 风格
      10. if (foo) 
      11. {
      12.   thing1();
      13. }
      14. else 
      15. {
      16.   thing2();
      17. }
      18.  
      19. // good - 1TBS 风格
      20. if (foo) {
      21.   thing1();
      22. } else {
      23.   thing2();
      24. }

      对于单行代码块，大括号可以不换行（不过出于可读性和便于新增语句的考虑，不推荐这么做）：

      1. // good - 单行代码块大括号可不换行，允许但不推荐
      2. function foo() { return true; }

    • 1.4.2【强制】省略大括号的单行语句前不要换行。eslint: nonblock-statement-body-position

      当 if、else、while、do-while、for 内只有一条语句时，可以省略大括号，这时不要在单行语句前换行：

      1. // bad
      2. if (foo)
      3.   return false;
      4.  
      5. // good
      6. if (foo) return false;

    • 1.4.3【强制】在点号之前换行。eslint: dot-location

      JS 允许在成员表达式中的点号之前或之后放置一个换行符。

      统一在点号操作符之前换行，可以强调这是方法调用而不是新语句，提高可读性和一致性。

      1. // bad
      2. $('#items').
      3.   foo().
      4.   bar().
      5.   baz();
      6.  
      7. // good
      8. $('#items')
      9.   .foo()
      10.   .bar()
      11.   .baz();

    • 1.4.4【推荐】在长方法链式调用时进行换行。eslint: newline-per-chained-call

      在使用多个（推荐大于 4 个时）方法链式调用时进行换行，以提高可读性。另外，在使用 jQuery 的链式操作时，可通过增加缩进来体现链式操作主体的层级。

      1. // bad
      2. $('#items').find('.selected').highlight().end().find('.open').updateCount();
      3.  
      4. // good
      5. $('#items')
      6.   .find('.selected')
      7.     .highlight()
      8.     .end()
      9.   .find('.open')
      10.     .updateCount();

    • 1.4.5【强制】对象的属性需遵循一致的换行风格。eslint: object-property-newline

      要么所有属性都换行，要么都写在一行。这有利于代码可读性。

      1. // bad
      2. const obj = {
      3.   foo: 1, bar: 2,
      4.   baz: 3,
      5. };
      6.  
      7. // good
      8. const obj = {
      9.   foo: 1,
      10.   bar: 2,
      11.   baz: 3,
      12. };
      13.  
      14. // good - 但注意不要超过单行最大字符限制
      15. const obj = { foo: 1, bar: 2, baz: 3 };

    • 1.4.6【强制】函数的小括号需遵循一致的换行风格。eslint: function-paren-newline

      函数的左小括号后和右小括号前，要么都有换行，要么都无换行：

      1. // bad
      2. function foo(bar,
      3.   baz, qux
      4. ) {}
      5.  
      6. // good
      7. function foo(bar, baz, qux) {}
      8.  
      9. // bad
      10. foo(
      11.   () => {
      12.     return bar;
      13.   });
      14.  
      15. // good
      16. foo(
      17.   () => {
      18.     return bar;
      19.   }
      20. );

    • 1.4.7【强制】隐式返回的箭头函数体前不要换行。eslint: implicit-arrow-linebreak

      1. // bad
      2. (foo) =>
      3.   bar;
      4.  
      5. // good
      6. (foo) => bar;

    1.5 空格

    • 1.5.1【强制】空格风格。eslint: space-before-blocks keyword-spacing space-in-parens array-bracket-spacing object-curly-spacing space-infix-ops key-spacing arrow-spacing generator-star-spacing yield-star-spacing rest-spread-spacing template-curly-spacing block-spacing comma-spacing computed-property-spacing no-whitespace-before-property semi-spacing space-before-function-paren space-unary-ops switch-colon-spacing template-tag-spacing func-call-spacing

      合理并一致地使用空格有助于提升代码可读性和可维护性。本条规约汇总了空格风格相关的规则，以方便对照阅读。你不必现在就记住它们，lint 和格式化工具会帮助你落地这些规则。

      块的左大括号 { 前有一个空格：space-before-blocks

      1. // bad
      2. if (foo){
      3.   bar();
      4. }
      5.  
      6. // good
      7. if (foo) {
      8.   bar();
      9. }
      10.  
      11. // bad
      12. function test(){
      13.   console.log('test');
      14. }
      15.  
      16. // good
      17. function test() {
      18.   console.log('test');
      19. }

      控制语句的关键字，如 if、else、else if 等，前后各一个空格（位于行首的关键字前无需空格）：keyword-spacing

      1. // bad
      2. if(foo) {
      3.   bar();
      4. }else{
      5.   baz();
      6. }
      7.  
      8. // good
      9. if (foo) {
      10.   bar();
      11. } else {
      12.   baz();
      13. }

      函数名与调用它的括号间无空格：func-call-spacing

      1. // bad
      2. fn ();
      3.  
      4. // bad
      5. fn
      6. ();
      7.  
      8. // good
      9. fn();

      声明函数时，对于命名函数，参数的小括号前无空格；对于匿名函数和 async 箭头函数，参数的小括号前有空格：space-before-function-paren

      1. // bad - 命名函数：参数前应无空格
      2. function foo () {}
      3.  
      4. // good
      5. function foo() {}
      6.  
      7. // bad - 匿名函数：参数前应有空格
      8. const foo = function() {}
      9.  
      10. // good
      11. const foo = function () {}
      12.  
      13. // bad - async 箭头函数：参数前应有空格
      14. const foo = async(a) => await a
      15.  
      16. // good
      17. const foo = async (a) => await a

      箭头函数的箭头前后各留一个空格：arrow-spacing

      1. // bad
      2. ()=>{};
      3. a =>a;
      4.  
      5. // good
      6. () => {};
      7. a => a;

      generator 函数及 yield* 表达式的 * 号前面无空格，后面有一个空格：generator-star-spacing yield-star-spacing

      1. // bad
      2. function *foo () {
      3.   yield *bar();
      4. }
      5.  
      6. // good
      7. function* foo () {
      8.   yield* bar();
      9. }
      10.  
      11. // bad
      12. const foo = function * () {
      13.   yield * bar();
      14. };
      15.  
      16. // good
      17. const foo = function* () {
      18.   yield* bar();
      19. };

      小括号内部两侧无空格：space-in-parens

      1. // bad
      2. function bar( foo ) {
      3.   return foo;
      4. }
      5.  
      6. // good
      7. function bar(foo) {
      8.   return foo;
      9. }
      10.  
      11. // bad
      12. if ( foo ) {
      13.   console.log( foo );
      14. }
      15.  
      16. // good
      17. if (foo) {
      18.   console.log(foo);
      19. }

      方括号内部两侧无空格：array-bracket-spacing computed-property-spacing

      1. // bad
      2. const foo = [ 1, 2, 3 ];
      3. console.log(obj[ `key${i}` ]);
      4.  
      5. // good
      6. const foo = [1, 2, 3];
      7. console.log(obj[`key${i}`]);

      大括号内部两侧有空格：object-curly-spacing block-spacing

      1. // bad
      2. const foo = {clark: 'kent'};
      3. function foo() {return true;}
      4.  
      5. // good
      6. const foo = { clark: 'kent' };
      7. function foo() { return true; }

      但对于模板字符串中的大括号，内部两侧无空格：template-curly-spacing

      1. // bad
      2. const hello = `Hello, ${ username }!`;
      3.  
      4. // good
      5. const hello = `Hello, ${username}!`;

      如果使用了模板字符串的 tag 语法，tag 后面无空格：template-tag-spacing

      1. // bad
      2. securityFn `Your input is ${input}`;
      3.  
      4. // good
      5. securityFn`Your input is ${input}`;

      操作符两侧有空格，除了一元运算符、剩余和扩展操作符：space-infix-ops space-unary-ops rest-spread-spacing

      1. // bad
      2. const x=y+5;
      3. const isRight = result === 0? false: true;
      4.  
      5. // good
      6. const x = y + 5;
      7. const isRight = result === 0 ? false : true;
      8.  
      9. // bad - 一元运算符与操作对象间不应有空格
      10. const x = ! y;
      11.  
      12. // good
      13. const x = !y;
      14.  
      15. // bad - 剩余和扩展操作符与操作对象间不应有空格
      16. const [a, b, ... arr] = [1, 2, 3, 4, 5];
      17.  
      18. // good
      19. const [a, b, ...arr] = [1, 2, 3, 4, 5];

      分号的前面无空格，后面有空格（语句末尾的分号后面无空格）：semi-spacing

      1. // bad
      2. let foo ;
      3. for (let i = 0;i < 10;i++) {}
      4.  
      5. // good
      6. let foo;
      7. for (let i = 0; i < 10; i++) {}

      逗号的前面无空格，后面有空格：comma-spacing

      1. // bad
      2. const arr = [1 , 2,3 ,4];
      3.  
      4. // good
      5. const arr = [1, 2, 3, 4];

      定义对象字面量时，key, value 之间有且只有一个空格，不允许所谓的「水平对齐」：key-spacing

      1. // bad
      2. {
      3.   a:            'short',
      4.   looooongname: 'long',
      5. }
      6.  
      7. // bad
      8. {
      9.   a           : 'short',
      10.   looooongname: 'long',
      11. }
      12.  
      13. // good
      14. {
      15.   a: 'short',
      16.   looooongname: 'long',
      17. }

    • 1.5.2【强制】行尾不要留有空格。eslint: no-trailing-spaces

      行尾的空格是多余的，可能在 git diff 时造成干扰。

      1. // bad
      2. const foo = 'foo'; 
      3. const bar = 'bar';   
      4.  
      5. // good
      6. const foo = 'foo';
      7. const bar = 'bar';

    • 1.5.3【强制】禁止出现多个空格。eslint: no-multi-spaces

      1. // bad
      2. const foo =   'foo';
      3. if (foo    === bar) return false;
      4.  
      5. // good
      6. const foo = 'foo';
      7. if (foo === bar) return false;

    1.6 空行

    • 1.6.1【推荐】在文件末尾保留一个空行。eslint: eol-last

      在非空文件中保留拖尾换行是一种常见的 UNIX 风格。它的好处同输出文件到终端一样，方便在串联和追加文件时不会打断 shell 的提示。

      统一在文件末尾保留一行空行，即用一个换行符结束文件：

      1. // bad - 文件末尾未保留换行符
      2. import { foo } from './Foo';
      3. // ...
      4. export default foo;
      5.  
      6. // bad - 文件末尾保留了2个换行符
      7. import { foo } from './Foo';
      8. // ...
      9. export default foo;↵
      10. ↵
      11.  
      12. // good
      13. import { foo } from './Foo';
      14. // ...
      15. export default foo;↵

    • 1.6.2【推荐】在最后一个 import / require 语句后保留一个空行。eslint: import/newline-after-import

      1. // bad
      2. import foo from './foo';
      3. import bar from './bar';
      4. const baz = 'baz';
      5. const qux = 'qux';
      6.  
      7. // good
      8. import foo from './foo';
      9. import bar from './bar';
      10.  
      11. const baz = 'baz';
      12. const qux = 'qux';

    • 1.6.3【强制】块的开始和结束不能是空行。eslint: padded-blocks

      1. // bad
      2. function bar() {
      3.  
      4.   console.log(foo);
      5.  
      6. }
      7.  
      8. // good
      9. function bar() {
      10.   console.log(foo);
      11. }
      12.  
      13. // bad
      14. if (baz) {
      15.  
      16.   console.log(qux);
      17. } else {
      18.   console.log(foo);
      19.  
      20. }
      21.  
      22. // good
      23. if (baz) {
      24.   console.log(qux);
      25. } else {
      26.   console.log(foo);
      27. }

    • 1.6.4【参考】在块末和新语句间插入一个空行。

      1. // bad
      2. if (foo) {
      3.   return bar;
      4. }
      5. return baz;
      6.  
      7. // good
      8. if (foo) {
      9.   return bar;
      10. }
      11.  
      12. return baz;
      13.  
      14. // bad
      15. const obj = {
      16.   foo() {
      17.   },
      18.   bar() {
      19.   },
      20. };
      21. return obj;
      22.  
      23. // good
      24. const obj = {
      25.   foo() {
      26.   },
      27.  
      28.   bar() {
      29.   },
      30. };
      31.  
      32. return obj;

    • 1.6.5【推荐】类成员之间保留一个空行。eslint: lines-between-class-members

    1.7 最大字符数和最大行数

    • 1.7.1【推荐】单行最大字符数：100。eslint: max-len

      过长的单行代码不易阅读和维护，需要进行合理换行。

      推荐单行代码不要超过 100 个字符，除了以下两种情况：

      • 字符串和模板字符串
      • 正则表达式
      1. // bad
      2. const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;
      3.  
      4. // good
      5. const foo = jsonData
      6.   && jsonData.foo
      7.   && jsonData.foo.bar
      8.   && jsonData.foo.bar.baz
      9.   && jsonData.foo.bar.baz.quux
      10.   && jsonData.foo.bar.baz.quux.xyzzy;
      11.  
      12. // bad
      13. $.ajax({ method: 'POST', url: 'https://foo.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));
      14.  
      15. // good
      16. $.ajax({
      17.   method: 'POST',
      18.   url: 'https://foo.com/',
      19.   data: { name: 'John' },
      20. })
      21.   .done(() => console.log('Congratulations!'))
      22.   .fail(() => console.log('You have failed this city.'));

    • 1.7.2【参考】文件最大行数：1000。SonarJs: javascript:S104

      过长的文件不易阅读和维护，最好对其进行拆分。

    • 1.7.3【参考】函数最大行数：80。SonarJs: javascript:S138

      过长的函数不易阅读和维护，最好对其进行拆分。

    1.8 其他

    • 1.8.1【强制】多行语句必须用大括号包裹，单行语句推荐用大括号包裹。eslint: curly

      当代码块内只有一条语句时，JS 才允许省略大括号。因此多行语句必须用大括号包裹：

      1. // bad
      2. if (foo)
      3.   bar();
      4.   baz(); // 这一行并不在 if 语句内
      5.  
      6. // good
      7. if (foo) {
      8.   bar();
      9.   baz();
      10. }

      当代码块内只有一条语句时，可以省略大括号（注意此时单行语句必须跟条件写在同一行）。但出于一致性和可扩展性考虑，推荐对单行语句仍使用大括号包裹：

      1. // good - 允许但不推荐
      2. if (foo) return false;
      3.  
      4. // good - 推荐，一致性和可扩展性更好
      5. if (foo) {
      6.   return false;
      7. }

    • 1.8.2【强制】不要省略小数点前或小数点后的 0。eslint: no-floating-decimal

      1. // bad
      2. const foo = .5;
      3. const bar = 2.;
      4. const baz = -.7;
      5.  
      6. // good
      7. const foo = 0.5;
      8. const bar = 2.0;
      9. const baz = -0.7;

    2 语言特性

    2.1 变量声明

    • 2.1.1【强制】不要使用未声明的变量。eslint: no-undef

      不要使用未声明的变量和函数：

      1. // bad
      2. foo = 'foo'; // foo 将变成全局变量
      3. bar(); // => Uncaught ReferenceError: bar is not defined
      4.  
      5. // good
      6. const foo = 'foo';
      7.  
      8. function bar() {
      9.   return 'bar';
      10. }
      11. bar();

    • 2.1.2【强制】使用 const 或 let 声明变量，不要使用 var。eslint: no-var

      从 ES6 开始，可以使用 let 和 const 关键字在块级作用域下声明变量。块级作用域在很多其他编程语言中都有使用，这样声明的变量不会污染全局命名空间。

      1. // bad
      2. var foo = 'foo';
      3. var bar;
      4.  
      5. // good
      6. const foo = 'foo';
      7. let bar;

    • 2.1.3【强制】正确地使用 const 和 let。eslint: prefer-const

      声明变量时，应优先使用 const，只有当变量会被重新赋值时才使用 let：

      1. // bad - 声明后未发生重新赋值，应使用 const
      2. let flag = true;
      3. if (flag) {
      4.   console.log(flag);
      5. }
      6.  
      7. // good - 声明后发生重新赋值，let 使用正确
      8. let flag = true;
      9. if (flag) {
      10.   flag = false;
      11. }

      需注意，数组和对象是一个引用，对数组某项和对象某属性的修改并不是重新赋值，因此多数情况下应用 const 声明：

      1. // bad
      2. let arr = [];
      3. let obj = {};
      4. arr[0] = 'foo';
      5. obj.name = 'bar';
      6.  
      7. // good
      8. const arr = [];
      9. const obj = {};
      10. arr.push('foo');
      11. obj.name = 'bar';

    • 2.1.4【强制】一条声明语句声明一个变量。eslint: one-var one-var-declaration-per-line

      这样做更易于追加新的声明语句（你不需要总去把最后的 ; 改成 , 了），也更易于进行单步调试。

      1. // bad
      2. const foo = 1,
      3.       bar = 2;
      4.  
      5. // bad
      6. const foo = 1, bar = 2;
      7.  
      8. // good
      9. const foo = 1;
      10. const bar = 2;

    • 2.1.5【强制】声明的变量必须被使用。eslint: no-unused-vars

      声明而未使用的变量、表达式可能带来潜在的问题，也会给维护者造成困扰，应将它们删除。

      1. // bad - 未使用变量 foo
      2. const foo = 1;
      3.  
      4. // good
      5. const foo = 1;
      6. doSomethingWith(foo);
      7.  
      8. // bad - 只修改变量不认为是被使用
      9. let bar = 1;
      10. bar = 2;
      11. bar += 1;
      12.  
      13. // good
      14. let bar = 1;
      15. bar = 2;
      16. bar += 1;
      17. doSomethingWith(foo);
      18.  
      19. // bad - 未使用参数 y
      20. function getX(x, y) {
      21.   return x;
      22. }
      23.  
      24. // good
      25. function getXPlusY(x, y) {
      26.   return x + y;
      27. }

    • 2.1.6【强制】不要在声明前就使用变量。eslint: no-use-before-define

      在 ES6 中，由于 const 和 let 没有变量提升作用，如果在声明前就使用变量，运行时会直接报错：

      1. // bad
      2. console.log(foo); // => Uncaught ReferenceError: foo is not defined
      3. let foo = 'foo';
      4.  
      5. // good
      6. let foo = 'foo';
      7. console.log(foo); // => foo

      在 ES5 中，由于 var 的变量提升作用，变量可以在声明前使用，但这样做可能给人带来疑惑和隐患，同样不推荐在声明前就使用变量：

      1. // bad
      2. console.log(foo); // => undefined
      3. var foo = 'foo';
      4.  
      5. // good
      6. var foo = 'foo';
      7. console.log(foo); // => foo

    • 2.1.7【参考】哪里使用，哪里声明。

      在变量被使用前再进行声明，而不是统一在块开始处进行声明。

      ES6 提供的 let 和 const 是块级作用域，不存在类似 var 的变量提升问题。因此我们可以把声明写在更合理的地方（一般是变量被使用前），而不是统一在块开始处进行声明。

      1. // bad - 如果权限校验（checkUserPermission）失败，fetchData 是不必要的
      2. function getData(id) {
      3.   const data = fetchData(id);
      4.  
      5.   if (!checkUserPermission()) {
      6.     return false;
      7.   }
      8.  
      9.   if (data.foo === 'bar') {
      10.     // ...
      11.   }
      12.  
      13.   return data;
      14. }
      15.  
      16. // good
      17. function getData(id) {
      18.   if (!checkUserPermission()) {
      19.     return false;
      20.   }
      21.  
      22.   const data = fetchData(id);
      23.  
      24.   if (data.foo === 'bar') {
      25.     // ...
      26.   }
      27.  
      28.   return data;
      29. }

    • 2.1.8【强制】禁止变量与外层作用域已存在的变量同名。eslint: no-shadow

      如果变量与外层已存在变量同名，会降低可读性，也会导致内层作用域无法读取外层作用域的同名变量。

      1. // bad
      2. const foo = 1;
      3. if (someCondition) {
      4.   const foo = 2;
      5.   console.log(foo); // => 2
      6. }
      7.  
      8. // good
      9. const foo = 1;
      10. if (someCondition) {
      11.   const bar = 2;
      12.   console.log(bar); // => 2
      13.   console.log(foo); // => 1
      14. }

    • 2.1.9【强制】不要重复声明变量和函数。eslint: no-redeclare

      在 ES5 中，尽管使用 var 重复声明不会报错，但这样做会令人疑惑，降低程序的可维护性。同理，函数的声明也不要与已存在的变量和函数重名：

      1. // bad
      2. var a = 'foo';
      3. var a = 'bar';
      4. function a() {}
      5. console.log(a); // => 'bar'
      6.  
      7. // good
      8. var a = 'foo';
      9. var b = 'bar';
      10. function c() {}
      11. console.log(a); // => 'foo'
      12.  
      13. // bad - arg 已作为函数参数声明
      14. function myFunc(arg) {
      15.   var arg = 'foo';
      16.   console.log(arg);
      17. }
      18. myFunc('bar'); // => 'foo'
      19.  
      20. // good
      21. function myFunc(arg) {
      22.   var otherName = 'foo';
      23.   console.log(arg);
      24. }
      25. myFunc('bar'); // => 'bar'

      在 ES6 中，使用 const 或 let 重复声明变量会直接报错：

      1. // bad
      2. const a = 'foo';
      3. function a() {} // => Uncaught SyntaxError: Identifier 'a' has already been declared
      4.  
      5. // good
      6. const a = 'foo';
      7. function b() {}
      8.  
      9. // bad - arg 已作为函数参数声明
      10. function myFunc(arg) {
      11.   const arg = 'foo';
      12.   console.log(arg);
      13. }
      14. myFunc('bar'); // => Uncaught SyntaxError: Identifier 'arg' has already been declared
      15.  
      16. // good
      17. function myFunc(arg) {
      18.   const otherName = 'foo';
      19.   console.log(arg);
      20. }
      21. myFunc('bar'); // => 'bar'

    • 2.1.10【强制】禁止连续赋值。eslint: no-multi-assign

      变量的连续赋值让人难以阅读和理解，并且可能导致意想不到的结果（如产生全局变量）。

      1. // bad - 本例的结果是 let 仅对 a 起到了预想效果，b 和 c 都成了全局变量
      2. (function test() {
      3.   let a = b = c = 1; // 相当于 let a = (b = (c = 1));
      4. })();
      5.  
      6. console.log(a); // throws ReferenceError
      7. console.log(b); // 1
      8. console.log(c); // 1
      9.  
      10. // good
      11. (function test() {
      12.   let a = 1;
      13.   let b = a;
      14.   let c = a;
      15. })();
      16.  
      17. console.log(a); // throws ReferenceError
      18. console.log(b); // throws ReferenceError
      19. console.log(c); // throws ReferenceError

    • 2.1.11【参考】将 let 和 const 分别归类。

      将 let 和 const 归类写在一起，可以提高代码整洁性。此外，如果你想按变量的含义排序分组也是允许的。

      1. // bad
      2. let a;
      3. const b = 2;
      4. let c;
      5. const d = 4;
      6. let e;
      7.  
      8. // good
      9. const b = 2;
      10. const d = 4;
      11. let a;
      12. let c;
      13. let e;

    • 2.1.12【强制】禁止使用保留字命名变量。eslint: no-shadow-restricted-names

    • 2.1.13【强制】不要将变量初始化成 undefined。eslint: no-undef-init
    • 2.1.14【强制】禁止对类声明变量重新赋值。eslint: no-class-assign
    • 2.1.15【强制】禁止修改 const 声明的变量。eslint: no-const-assign

    2.2 原始类型

    JS的数据类型包括 6 种原始类型（primitive type），即 Boolean, Null, Undefined, Number, String, Symbol (ES6 新定义)，以及 Object 类型，了解更多。这个章节主要介绍原始类型相关的规约。

    • 2.2.1【强制】不要使用 new Number/String/Boolean。eslint: no-new-wrappers

      使用 new Number/String//Boolean 声明不会有任何好处，还会导致变量成为 object 类型，可能引起 bug。

      1. // bad
      2. const num = new Number(0);
      3. const str = new String('foo');
      4. const bool = new Boolean(false);
      5. console.log(typeof num, typeof str, typeof bool); // => object, object, object
      6. if (num) { // true（对象相当于 true）
      7. }
      8. if (bool) { // true（对象相当于 true）
      9. }
      10.  
      11. // good
      12. const num = 0;
      13. const str = 'foo';
      14. const bool = false;
      15. console.log(typeof num, typeof str, typeof bool); // => number, string, boolean
      16. if (num) { // false（0 相当于 false）
      17. }
      18. if (bool) { // false
      19. }

    • 2.2.2【推荐】类型转换。

      【数字】使用 Number() 或 parseInt() ：

      1.   const str = '1';
      2.  
      3.   // bad
      4.   const num = +str;
      5.   const num = str >> 0;
      6.   const num = new Number(str);
      7.  
      8.   // good
      9.   const num = Number(str);
      10.  
      11.   // good
      12.   const num = parseInt(str, 10);

      【字符串】使用 String()：

      1.   const num = 1;
      2.  
      3.   // bad
      4.   const str = new String(num); // typeof str is "object" not "string"
      5.   const str = num + ''; // invokes num.valueOf()
      6.   const str = num.toString(); // isn’t guaranteed to return a string
      7.  
      8.   // good
      9.   const str = String(num);

      【布尔值】使用 !!：

      1.   const age = 0;
      2.  
      3.   // bad
      4.   const hasAge = new Boolean(age);
      5.   const hasAge = Boolean(age);
      6.  
      7.   // good
      8.   const hasAge = !!age;

    • 2.2.3【推荐】使用 parseInt() 方法时总是带上基数。eslint: radix

      parseInt 方法的第一个参数是待转换的字符串，第二个参数是转换基数。当第二个参数省略时，parseInt 会根据第一个参数自动判断基数：

      • 如果以 0x 开头，则使用 16 作基数
      • 如果以 0 开头，则使用 8 作基数。正是这条规则经常导致错误，ES5 规范中直接将这条规则移除，即 ES5 及之后的执行环境以 0 开头也会使用 10 作为基数
      • 其他情况则使用 10 作基数

      虽然从 ES5 开始就移除了自动以 8 作基数的规则，但有时难以保证所有的浏览器和 JS 执行环境都支持了这一特性。了解更多

      因此，推荐始终给 parseInt() 方法加上基数，除非可以保证代码的执行环境不受上述特性的影响。

      1. // bad
      2. parseInt('071'); // => ES5 前的执行环境中得到的是 57
      3.  
      4. // good
      5. parseInt('071', 10); // => 71

    • 2.2.4【强制】避免不必要的布尔类型转换。eslint: no-extra-boolean-cast

      在 if 等条件语句中，将表达式的结果强制转换成布尔值是多余的：

      1. // bad
      2. if (!!foo) {
      3.   // ...
      4. }
      5.  
      6. while (!!foo) {
      7.   // ...
      8. }
      9.  
      10. const a = !!flag ? b : c;
      11.  
      12. // good
      13. if (foo) {
      14.   // ...
      15. }
      16.  
      17. while (foo) {
      18.   // ...
      19. }
      20.  
      21. const a = flag ? b : c;

    • 2.2.5【强制】字符串优先使用单引号。eslint: quotes

      1. // bad
      2. const name = "tod";
      3.  
      4. // 模板字符串中应包含变量或换行，否则需用单引号
      5. const name = `tod`; 
      6.  
      7. // good
      8. const name = 'tod';

    • 2.2.6【推荐】使用模板字符串替代字符串拼接。eslint: prefer-template

      模板字符串让代码更简洁，可读性更强

      1. // bad
      2. function getDisplayName({ nickName, realName }) {
      3.   return nickName + ' (' + realName + ')';
      4. }
      5.  
      6. // good
      7. function getDisplayName({ nickName, realName }) {
      8.   return `${nickName} (${realName})`;
      9. }

    • 2.2.7【强制】禁止不必要的转义字符。eslint: no-useless-escape

      转义字符会大大降低代码的可读性，因此尽量不要滥用它们。

      1. // bad
      2. const foo = '\'this\' \i\s \"quoted\"';
      3.  
      4. // good
      5. const foo = '\'this\' is "quoted"';
      6. const foo = `'this' is "quoted"`;

    • 2.2.8【推荐】不要在普通字符串中出现模板字符串占位语法。eslint: no-template-curly-in-string

    • 2.2.9【强制】使用 Number.isNaN()，而不是直接与 NaN 进行比较。eslint: use-isnan
    • 2.2.10【强制】同 typeof 表达式结果进行比较的值必须是有效的字符串。eslint: valid-typeof
    • 2.2.11【强制】禁止使用多行字符串。eslint: no-multi-str
    • 2.2.12【强制】禁用八进制字面量。eslint: no-octal
    • 2.2.13【强制】禁止在字符串字面量中使用八进制转义序列。eslint: no-octal-escape
    • 2.2.15【强制】禁止使用 new Symbol。eslint: no-new-symbol
    • 2.2.16【推荐】创建 Symbol 时需要传入参数，以便区分。eslint: symbol-description

    2.3 数组

    • 2.3.1【强制】使用字面量创建数组。eslint: no-array-constructor

      不要使用 new Array() 和 Array() 创建数组，除非为了构造某一长度的空数组。

      1. // bad
      2. const a = new Array(1, 2, 3);
      3. const b = Array(1, 2, 3);
      4.  
      5. // good
      6. const a = [1, 2, 3];
      7. const b = new Array(500); // 构造长度为 500 的空数组

    • 2.3.2【强制】某些数组方法的回调函数中必须包含 return 语句。eslint: array-callback-return

      以下数组方法：map, filter, from, every, find, findIndex, reduce, reduceRight, some, sort 的回调函数中必须包含 return 语句，否则可能会产生误用或错误。

      一个常见的误用是，本该用 forEach 的场景却用了 map：

      1. // 欲将 ['a', 'b', 'c'] 转换成 {a: 0, b: 1, c: 2}
      2. const myArray = ['a', 'b', 'c'];
      3. const myObj = {};
      4.  
      5. // bad - map 应该用于构建一个新数组，单纯想遍历数组应使用 forEach
      6. myArray.map((item, index) => {
      7.   myObj[item] = index;
      8. });
      9.  
      10. // good
      11. myArray.forEach((item, index) => {
      12.   myObj[item] = index;
      13. });

      某些方法漏掉 return 还可能引起错误：

      1. // 欲将 ['a', 'b', 'c'] 转换成 {a: 0, b: 1, c: 2}
      2. const myArray = ['a', 'b', 'c'];
      3.  
      4. // bad => Uncaught TypeError: Cannot set property 'b' of undefined
      5. const myObj = myArray.reduce((memo, item, index) => {
      6.   memo[item] = index;
      7. }, {});
      8.  
      9. // good
      10. const myObj = myArray.reduce((memo, item, index) => {
      11.   memo[item] = index;
      12.   return memo;
      13. }, {});

    • 2.3.3【参考】使用扩展运算符 … 处理数组。

      ES6 提供了扩展运算符 ...，可以简化一些数组操作。

      数组拼接：

      1. // bad
      2. const array1 = [1, 2].concat(array);
      3.  
      4. // good
      5. const array1 = [1, 2, ...array]

      数组复制：

      1. // bad
      2. const array1 = [];
      3. for (let i = 0; i < array.length; i += 1) {
      4.   array1[i] = array[i];
      5. }
      6.  
      7. // bad
      8. const array1 = array.map(item => item);
      9.  
      10. // good
      11. const array1 = [...array];

      将类数组结构（有 Iterator 接口的对象）转换为数组：

      1. // bad
      2. const foo = document.querySelectorAll('.foo');
      3.  
      4. // good
      5. const nodes = Array.from(foo);
      6.  
      7. // good
      8. const nodes = [...foo];
      9. const uniqueNodes = [...new Set(foo)]; // 可以利用 Set 和 ... 将数组去重

      特殊的，遍历可迭代对象时，使用 Array.from 而不是 ...，以免创建一个临时数组：

      1. // bad
      2. const baz = [...foo].map(bar);
      3.  
      4. // good
      5. const baz = Array.from(foo, bar);

    • 2.3.4【推荐】使用解构获取数组元素。

      使用 ES6 提供的解构方法获取数组元素：

      1. // bad
      2. const arr = [1, 2, 3, 4];
      3. const first = arr[0];
      4. const second = arr[1];
      5.  
      6. // good
      7. const arr = [1, 2, 3, 4];
      8. const [first, second] = arr;

      函数有多个返回值时，应使用对象解构而不是数组解构，因为数组解构需要考虑返回值的位置：

      1. // bad
      2. function giveMeDivPosition(div) {
      3.   return [left, right, top, bottom];
      4. }
      5. const [left, _, top] = giveMeDivPosition(div);
      6.  
      7. // good
      8. function giveMeDivPosition(div) {
      9.   return { left, right, top, bottom };
      10. }
      11. const { left, top } = giveMeDivPosition(div);

    • 2.3.5【强制】禁用稀疏数组。eslint: no-sparse-arrays

    2.4 对象

    • 2.4.1【强制】使用字面量创建对象。eslint: no-new-object

      1. // bad
      2. const obj = new Object();
      3.  
      4. // good
      5. const obj = {};

    • 2.4.2【强制】使用对象属性和方法的简写语法。eslint: object-shorthand

      ES6 提供了对象属性和方法的简写语法，可以使代码更加简洁：

      1. const value = 'foo';
      2.  
      3. // bad
      4. const atom = {
      5.   value: value,
      6.   addValue: function (value) {
      7.     return value + ' added';
      8.   },
      9. };
      10.  
      11. // good
      12. const atom = {
      13.   value,
      14.   addValue(value) {
      15.     return value + ' added';
      16.   },
      17. };

    • 2.4.3【参考】将对象的简写属性写在一起。

      将简写的属性写在一起，置于对象的起始或末尾，可以提高代码整洁性。当然，如果你出于属性的含义或其他考虑进行排序也是允许的。

      1. const anakinSkywalker = 'Anakin Skywalker';
      2. const lukeSkywalker = 'Luke Skywalker';
      3.  
      4. // bad
      5. const obj = {
      6.   episodeOne: 1,
      7.   twoJediWalkIntoACantina: 2,
      8.   lukeSkywalker,
      9.   episodeThree: 3,
      10.   mayTheFourth: 4,
      11.   anakinSkywalker,
      12. };
      13.  
      14. // good
      15. const obj = {
      16.   lukeSkywalker,
      17.   anakinSkywalker,
      18.   episodeOne: 1,
      19.   twoJediWalkIntoACantina: 2,
      20.   episodeThree: 3,
      21.   mayTheFourth: 4,
      22. };

    • 2.4.4【强制】对象字面量的属性名不要用引号包裹，除非包含特殊字符。eslint: quote-props

      这样更加简洁，也有助于语法高亮和一些 JS 引擎的优化。

      1. // bad
      2. const bad = {
      3.   'foo': 3,
      4.   'bar': 4,
      5.   'data-blah': 5,
      6.   'one two': 12,
      7. };
      8.  
      9. // good
      10. const good = {
      11.   foo: 3,
      12.   bar: 4,
      13.   'data-blah': 5,
      14.   'one two': 12,
      15. };

    • 2.4.5【强制】优先使用 . 访问对象的属性。eslint: dot-notation

      这样可以提高代码可读性。[] 仅应在访问动态属性名或包含特殊字符的属性名时被使用。

      1. const obj = {
      2.   active: true,
      3.   [getDynamicKey()]: 'foo',
      4.   'data-bar': 'bar',
      5. };
      6.  
      7. // bad
      8. const isActive = obj['active'];
      9.  
      10. // good
      11. const isActive = obj.active;
      12. const foo = obj[getDynamicKey()];
      13. const bar = obj['data-bar'];

    • 2.4.6【推荐】使用扩展运算符 … 处理对象。

      替代 Object.assign 方法，来进行对象的浅拷贝：

      1. // very bad - original 会被影响
      2. const original = { a: 1, b: 2 };
      3. const copy = Object.assign(original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }  original => { a: 1, b: 2, c: 3 }
      4. delete copy.a; // copy => { b: 2, c: 3 }  original => { b: 2, c: 3 }
      5.  
      6. // bad
      7. const original = { a: 1, b: 2 };
      8. const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
      9.  
      10. // good
      11. const original = { a: 1, b: 2 };
      12. const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

      获取排除某些属性的新对象：

      1. // good
      2. const copy = { a: 1, b: 2, c: 3 };
      3. const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

    • 2.4.7【推荐】使用解构。eslint: prefer-destructuring

      获取对象的同名属性、多个属性时，使用解构让代码更简洁，也可以减少为了使用属性而创建的临时引用。

      1. // bad
      2. function getFullName(user) {
      3.   const firstName = user.firstName;
      4.   const lastName = user.lastName;
      5.  
      6.   return `${firstName} ${lastName}`;
      7. }
      8.  
      9. // good
      10. function getFullName(user) {
      11.   const { firstName, lastName } = user;
      12.   return `${firstName} ${lastName}`;
      13. }
      14.  
      15. // best
      16. function getFullName({ firstName, lastName }) {
      17.   return `${firstName} ${lastName}`;
      18. }

    • 2.4.8【参考】对象的动态属性名应直接写在字面量定义中。

      ES6 允许在新建对象字面量时使用表达式作为属性名，这样可以将所有属性定义在一个地方。

      1. function getKey(k) {
      2.   return `a key named ${k}`;
      3. }
      4.  
      5. // bad
      6. const obj = {
      7.   id: 1,
      8.   name: 'tod',
      9. };
      10. obj[getKey('foo')] = 'foo';
      11.  
      12. // good
      13. const obj = {
      14.   id: 1,
      15.   name: 'tod',
      16.   [getKey('foo')]: 'foo',
      17. };

    • 2.4.9【强制】不要直接在对象上调用 Object.prototypes 上的方法。eslint: no-prototype-builtins

      不要直接在对象上调用 Object.prototypes 上的方法，例如 hasOwnProperty、propertyIsEnumerable、isPrototypeOf。

      这些方法可能会被对象上的属性覆盖，导致错误：

      1. const obj = {
      2.   foo: 'foo',
      3.   hasOwnProperty: false,
      4. };
      5. const objNull = Object.create(null);
      6.  
      7. // bad => Uncaught TypeError: obj.hasOwnProperty is not a function
      8. console.log(obj.hasOwnProperty('foo'));
      9. console.log(objNull.hasOwnProperty('foo'));
      10.  
      11. // good
      12. console.log(Object.prototype.hasOwnProperty.call(obj, 'foo'));
      13. console.log(Object.prototype.hasOwnProperty.call(objNull, 'foo'));

    • 2.4.10【强制】对象中禁止出现重复命名的 key。eslint: no-dupe-keys

    • 2.4.11【强制】禁止将全局对象 Math、JSON、Reflect 当作函数进行调用。eslint: no-obj-calls
    • 2.4.15【强制】禁止在解构 / import / export时进行无用的重命名。eslint: no-useless-rename

    2.5 函数

    • 2.5.1【强制】不要使用 Function 构造函数创建函数。eslint: no-new-func

      使用 new Function 创建函数会像 eval() 方法一样执行字符串，带来安全隐患

      1. // bad
      2. const sum = new Function('a', 'b', 'return a + b');
      3.  
      4. // good
      5. const sum = (a, b) => (a + b);

    • 2.5.2【强制】不要在块中使用函数声明。eslint: no-inner-declarations

      在非函数块（如 if、while 等）中，不要使用函数声明：

      1. // bad - 函数声明不是块作用域而是函数作用域，因此在块外也能使用函数，容易引起误解
      2. if (true) {
      3.   function test() {
      4.     console.log('test');
      5.   }
      6. }
      7. test(); // => test
      8.  
      9. // good - 函数表达式可以清晰地说明函数能否在块外使用
      10. // 不能在块外使用
      11. if (true) {
      12.   const test = function () {
      13.     console.log('test');
      14.   };
      15. }
      16. test(); // => Uncaught ReferenceError: test is not defined
      17.  
      18. // 能在块外使用
      19. let test;
      20. if (true) {
      21.   test = function () {
      22.     console.log('test');
      23.   };
      24. }
      25. test(); // => test

    • 2.5.3【参考】使用函数表达式替代函数声明。

      这样可以保证函数不能在定义前被调用。

      函数声明会被提升到当前作用域的顶部，因此函数可以在声明语句前就被调用，这会影响代码的可读性与可维护性。

      1. // bad
      2. function foo() {
      3.   // ...
      4. }
      5.  
      6. // good
      7. const foo = () => {
      8.   // ...
      9. };
      10.  
      11. const foo = function () {
      12.   // ...
      13. };
      14.  
      15. // 有些规范提出，应该给函数表达式起一个不同于被赋值变量名的名字，以达到易于调试、查看错误堆栈等目的
      16. // 事实上，代码在目前浏览器中或者经过 Babel 转码后，匿名函数表达式也能够方便地查看堆栈。所以除非你出于某些目的想给函数起一个不同于被赋值变量的名字，否则直接使用匿名函数表达式
      17. const foo = function foo_more_descriptive_name() {
      18.   // ...
      19. };

    • 2.5.4【强制】回调函数使用箭头函数而不是匿名函数。eslint: prefer-arrow-callback

      ES6 提供的箭头函数可以解决 this 指向的问题，而且语法更简洁。

      1. // bad
      2. [1, 2, 3].map(function (x) {
      3.   const y = x + 1;
      4.   return x * y;
      5. });
      6.  
      7. // good
      8. [1, 2, 3].map((x) => {
      9.   const y = x + 1;
      10.   return x * y;
      11. });

    • 2.5.5【参考】箭头函数编码风格。eslint: arrow-parens arrow-body-style

      箭头函数参数的小括号、函数体的大括号在某些时候可以省略，这可能导致编码风格不统一，因此建议如下的编码风格：

      • 函数体风格

        当函数体只包含一条 return 语句时，可以省略函数体大括号和 return，以使代码更简洁。

        我们推荐使用这个 ES6 提供的语法糖，它可以让书写和阅读更简洁。但你也可以选择始终加上大括号和 return，以方便后续在函数体内增加语句。

        1. // good - 函数体包含多条语句时，始终加上大括号
        2. [1, 2, 3].map((number) => {
        3.   const nextNumber = number + 1;
        4.   return `A string containing the ${nextNumber}.`;
        5. });
        6.  
        7. // good - 函数体只包含一条 `return` 语句时，可以省略大括号和 `return`，这样代码更简洁
        8. [1, 2, 3].map(number => `A string containing the ${number + 1}.`);
        9.  
        10. // good - 也可以选择始终不省略大括号，不使用简写语法糖，以方便后续在函数体内增加语句
        11. [1, 2, 3].map((number) => {
        12.   return `A string containing the ${number + 1}.`;
        13. });

        当 return 的内容为对象或者有多行时，需要用小括号包裹：

        1. // bad - Uncaught SyntaxError: Unexpected token
        2. [1, 2, 3].map((item) => {
        3.   foo: item,
        4.   bar: item + 1,
        5. });
        6.  
        7. // good
        8. [1, 2, 3].map((item) => ({
        9.   foo: item,
        10.   bar: item + 1,
        11. }));
        12.  
        13. // bad
        14. ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
        15.     httpMagicObjectWithAVeryLongName,
        16.     httpMethod,
        17.   )
        18. );
        19.  
        20. // good
        21. ['get', 'post', 'put'].map(httpMethod => (
        22.   Object.prototype.hasOwnProperty.call(
        23.     httpMagicObjectWithAVeryLongName,
        24.     httpMethod,
        25.   )
        26. ));

      • 函数参数风格

        当函数只有一个参数，且函数体为 return 简写语法时，可以省略包裹参数的小括号以使代码更简洁。

        我们建议仅在这种情况下省略包裹参数的小括号，其余情况都不要省略小括号。但你也可以选择始终加上小括号，以方便后续可能要增加参数。

        1. // good - 未使用 return 简写语法时，参数始终加上小括号
        2. [1, 2, 3].map((number) => {
        3.   const nextNumber = number + 1;
        4.   return `A string containing the ${nextNumber}.`;
        5. });
        6.  
        7. // good - 使用 return 简写语法、且只有一个参数时，可以省略参数的小括号，这样代码更简洁
        8. [1, 2, 3].map(x => x * x);
        9.  
        10. // good - 也可以选择始终不省略参数的小括号，以方便后续可能要增加参数
        11. [1, 2, 3].map((x) => x * x);

    • 2.5.6【强制】不要将函数参数命名为 arguments。

      这会覆盖掉函数作用域中的 arguments 对象。

      1. // bad
      2. function foo(name, options, arguments) {
      3.   // ...
      4. }
      5.  
      6. // good
      7. function foo(name, options, args) {
      8.   // ...
      9. }

    • 2.5.7【推荐】使用 rest 操作符替代 arguments 对象。eslint: prefer-rest-params

      ES6 提供了 rest 操作符 ...，与 arguments 相比可以更清晰地聚合函数的剩余参数。此外， ... 得到的是一个真正的数组，而 arguments 得到的则是类数组结构。

      1. // bad
      2. function foo(a, b) {
      3.   const args = Array.prototype.slice.call(arguments, foo.length);
      4.   console.log(args);
      5. }
      6. foo(1, 2, 3, 4); // => [3, 4]
      7.  
      8. // good
      9. function foo(a, b, ...args) {
      10.   console.log(args);
      11. }
      12. foo(1, 2, 3, 4); // => [3, 4]

    • 2.5.8【推荐】使用扩展运算符替代 apply()。eslint: prefer-spread

      1. // bad
      2. const args = [1, 2, 3, 4];
      3. Math.max.apply(Math, args);
      4.  
      5. // good
      6. const args = [1, 2, 3, 4];
      7. Math.max(...args);

    • 2.5.9【推荐】使用默认参数语法。

      ES6 中引入了默认参数语法，相比之前为参数赋默认值的方法更加简洁、可读性更好。重新对参数赋值是不推荐的行为，且当参数的布尔类型转换结果是 false 时可能会错误地被赋予默认值。

      因此，当函数参数需要默认值时，使用默认参数语法，而不是去修改参数：

      1. // bad
      2. const multiple = (a, b) => {
      3.   a = a || 0;
      4.   b = b || 0;
      5.   return a * b;
      6. }
      7.  
      8. // good
      9. const multiple = (a = 0, b = 0) => {
      10.   return a * b;
      11. }

    • 2.5.10【推荐】有默认值的函数参数需要放到参数列表的最后。

      否则你将无法享受到默认参数的便利，只能通过传 undefined 触发参数使用默认值。

      1. // bad
      2. function multiply(a = 1, b) {
      3.   return a * b;
      4. }
      5. const x = multiply(42); // => NaN
      6. const y = multiply(undefined, 42); // => 42
      7.  
      8. // good
      9. function multiply(a, b = 1) {
      10.   return a * b;
      11. }
      12. const x = multiply(42); // => 42

    • 2.5.11【推荐】不要修改函数参数。eslint: no-param-reassign

      不要修改引用类型的参数，这可能导致作为入参的原变量发生变化：

      1. // bad
      2. const f1 = function f1(obj) {
      3.   obj.key = 1;
      4. }
      5. const originalObj = { key: 0 };
      6. f1(originalObj);
      7. console.log(originalObj); // => { key: 1 }
      8.  
      9. // good
      10. const f2 = function f2(obj) {
      11.   const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
      12. }

      更不要给参数重新赋值，这可能导致意外的行为和内核优化问题：

      1. // bad
      2. function foo(bar, baz) {
      3.   if (!baz) {
      4.     bar = 1;
      5.   }
      6. }
      7.  
      8. // good
      9. function foo(bar, baz) {
      10.   let qux = bar;
      11.   if (!baz) {
      12.     qux = 1;
      13.   }
      14. }

    • 2.5.12【强制】立即执行函数表达式（IIFE）需要用小括号包裹。eslint: wrap-iife

      IIFE 是一个独立的执行单元，将它用小括号包裹可以更清晰的体现这点。需要提醒的是，由于 ES6 模块语法的引入，你可能不再需要使用 IIFE 了。

      1. // bad
      2. const x = function () { return { y: 1 }; }();
      3.  
      4. // good
      5. const x = (function () { return { y: 1 }; }());

    • 2.5.13【推荐】函数的复杂度不应过高。SonarJs: javascript:FunctionComplexity javascript:S3776

      过高的复杂度意味着代码难以维护和测试。我们推荐函数的复杂度不要超过以下阈值：

      • 圈复杂度不超过 10
      • 认知复杂度不超过 15

    • 2.5.14【推荐】函数的参数不应过多。SonarJs: javascript:ExcessiveParameterList

      如果函数的参数过多，将不利于函数的维护和调用。这时你需要考虑是否函数做了太多的事情，是否有必要对其进行拆分。

      如果必须使用过多的参数，可以考虑用对象代替参数列表：

      1. // bad
      2. function doSomething(param1, param2, param3, param4, param5, param6, param7, param8) {
      3.   // ...
      4. }
      5. doSomething(1, 2, 3, 4, 5, 6, 7, 8);
      6.  
      7. // good
      8. function doSomething({ param1, param2, param3, param4, param5, param6, param7, param8 }) {
      9.   // ...
      10. }
      11. doSomething({ param1: 1, param2: 2, param3: 3, param4: 4, param5: 5, param6: 6, param7: 7, param8: 8 });

    • 2.5.15【推荐】generator 函数内应该有 yield 语句。eslint: require-yield

      如果一个 generator 中没有 yield 语句，那么这个 generator 就不是必须的。

      1. // bad
      2. function* foo() {
      3.   return 10;
      4. }
      5.  
      6. // good
      7. function* foo() {
      8.   yield 5;
      9.   return 10;
      10. }

    • 2.5.16【参考】优先使用 JS 提供的高阶函数进行迭代运算。

      需要迭代运算时，应优先使用 JS 提供的高阶函数，减少直接使用 for 循环（包括 for-in 和 for-of）。

      如使用 map() / every() / filter() / find() / findIndex() / reduce() / some() / … 来迭代数组，使用 Object.keys() / Object.values() / Object.entries() 方法来迭代对象

      1. const numbers = [1, 2, 3, 4, 5];
      2.  
      3. // bad
      4. let sum = 0;
      5. for (let num of numbers) {
      6.   sum += num;
      7. }
      8. console.log(sum); // => 15;
      9.  
      10. // good
      11. let sum = 0;
      12. numbers.forEach((num) => {
      13.   sum += num;
      14. });
      15. console.log(sum); // => 15;
      16.  
      17. // best
      18. const sum = numbers.reduce((total, num) => total + num, 0);
      19. console.log(sum); // => 15;
      20.  
      21. // bad
      22. const increasedByOne = [];
      23. for (let i = 0; i < numbers.length; i++) {
      24.   increasedByOne.push(numbers[i] + 1);
      25. }
      26.  
      27. // good
      28. const increasedByOne = [];
      29. numbers.forEach((num) => {
      30.   increasedByOne.push(num + 1);
      31. });
      32.  
      33. // best
      34. const increasedByOne = numbers.map(num => num + 1);

    • 2.5.17【强制】不要使用 async 函数作为 Promise 的 executor。eslint: no-async-promise-executor

    • 2.5.19【强制】函数的参数列表中禁止出现重复命名的参数。eslint: no-dupe-args
    • 2.5.20【强制】不要对函数声明重新赋值。eslint: no-func-assign
    • 2.5.23【强制】禁止使用 arguments.caller 和 arguments.callee。eslint: no-caller
    • 2.5.25【强制】禁止不必要的 .bind() 调用。eslint: no-extra-bind
    • 2.5.26【强制】禁止在循环中的函数内出现外部作用域中定义且会发生变化的变量，以防止闭包副作用。eslint: no-loop-func
    • 2.5.27【强制】禁止单独 new 一个构造函数而不用于赋值或比较。eslint: no-new
    • 2.5.29【强制】禁止不必要的 return await。eslint: no-return-await

    • 2.5.31【强制】避免箭头函数可能与比较操作符产生混淆的情况。eslint: no-confusing-arrow

      1. // bad - 可能让人误以为是 a >= 1 ? 2 : 3
      2. let x = a => 1 ? 2 : 3;
      3.  
      4. // good
      5. let x = a => (1 ? 2 : 3);

    • 2.5.32【强制】禁止在调用构造函数时省略小括号。eslint: new-parens

    2.6 类

    • 2.6.1【推荐】使用 class 语句声明类，而不是使用 prototype。

      class 语句是 ES6 中引入的用于声明类的语法糖，更加简洁易维护。

      1. // bad
      2. function Person() {
      3.   this.age = 1;
      4. }
      5. Person.prototype.growOld = function () {
      6.   this.age += 1;
      7. }
      8.  
      9. // good
      10. class Person {
      11.   constructor() {
      12.     this.age = 1;
      13.   }
      14.   growOld() {
      15.     this.age += 1;
      16.   }
      17. }

    • 2.6.2【推荐】使用 extends 语句进行类的继承。

      extends 是用于原型继承的内建方法，不会破坏 instanceof。

      1. // bad
      2. const inherits = require('inherits');
      3. function PeekableQueue(contents) {
      4.   Queue.apply(this, contents);
      5. }
      6. inherits(PeekableQueue, Queue);
      7. PeekableQueue.prototype.peek = function () {
      8.   return this.queue[0];
      9. };
      10.  
      11. // good
      12. class PeekableQueue extends Queue {
      13.   peek() {
      14.     return this.queue[0];
      15.   }
      16. }

    • 2.6.3【强制】避免不必要的 construtor。eslint: no-useless-constructor

      ES6 class 会提供一个默认的 construtor，空 construtor 或者只调用父类的 construtor 是不必要的。

      1. // bad - 以下两种 construtor 可以省略
      2. class Parent {
      3.   constructor() {
      4.   }
      5.  
      6.   method() {
      7.     // ...
      8.   }
      9. }
      10.  
      11. class Child extends Parent {
      12.   constructor (value) {
      13.     super(value);
      14.   }
      15.  
      16.   method() {
      17.     // ...
      18.   }
      19. }
      20.  
      21. // good
      22. class Parent {
      23.   method() {
      24.     // ...
      25.   }
      26. }
      27.  
      28. class Child extends Parent {
      29.   method() {
      30.     // ...
      31.   }
      32. }

    • 2.6.4【强制】子类的 construtor 中必须使用 super，非子类的 construtor 中不能使用 super。eslint: constructor-super

      1. // bad - 非子类的 constructor 不能使用 super
      2. class Parent {
      3.   constructor() {
      4.     super();
      5.     this.name = 'parent';
      6.   }
      7. }
      8.  
      9. // good
      10. class Parent {
      11.   constructor() {
      12.     this.name = 'parent';
      13.   }
      14. }
      15.  
      16. // bad - 子类的 constructor 必须使用 super
      17. class Child extends Parent {
      18.   constructor() {
      19.     this.name = 'child';
      20.   }
      21. }
      22.  
      23. // good
      24. class Child extends Parent {
      25.   constructor (value) {
      26.     super(value);
      27.     this.name = 'foo';
      28.   }
      29. }

    • 2.6.5【强制】在 constructor 中，禁止在调用 super() 前使用 this 或 super 关键字。eslint: no-this-before-super

      1. // bad - this 必须在调用 super() 后使用
      2. class Child extends Parent {
      3.   constructor (value) {
      4.     this.name = 'foo';
      5.     super(value);
      6.   }
      7. }
      8.  
      9. // good
      10. class Child extends Parent {
      11.   constructor (value) {
      12.     super(value);
      13.     this.name = 'foo';
      14.   }
      15. }

    • 2.6.6【强制】避免重复的类成员命名。eslint: no-dupe-class-members

      重复的类成员声明最终生效的将是最后一个：

      1. // bad
      2. class Foo {
      3.   bar() { console.log('bar'); }
      4.   bar() { console.log('baz'); }
      5. }
      6. const foo = new Foo();
      7. foo.bar(); // => baz
      8.  
      9. // good
      10. class Foo {
      11.   bar() { console.log('bar'); }
      12. }

    2.7 模块

    • 2.7.1【推荐】使用 ES6 modules 而非其他非标准的模块系统。eslint: import/no-amd

      使用 ES6 modules (import/export)，而不是其他非标准的模块系统，如 CommonJS、AMD、CMD。

      ES6 modules 作为标准代表着未来，让我们拥抱未来吧。

      1. // bad
      2. const React = require('react');
      3. module.exports = React.Component;
      4.  
      5. // good
      6. import React, { Component } from 'react';
      7. export default Component;

    • 2.7.2【强制】不要用多个 import 引入同一模块。eslint: import/no-duplicates no-duplicate-imports

      多条 import 语句引入了同一模块会降低可维护性，你需要将它们合成一条语句。

      1. // bad
      2. import React from 'react';
      3. import { Component }  from 'react';
      4.  
      5. // good
      6. import React, { Component } from 'react';

    • 2.7.3【强制】import 语句需要放到模块的最上方。eslint: import/first

      由于 import 语句会被变量提升，将它们放到模块的最上方以防止异常行为。

      1. // bad
      2. import foo from 'foo';
      3. foo.init();
      4.  
      5. import bar from 'bar';
      6. bar.init();
      7.  
      8. // good
      9. import foo from 'foo';
      10. import bar from 'bar';
      11.  
      12. foo.init();
      13. bar.init();

    • 2.7.4【推荐】当模块内只有一个 export 时，使用 default export。eslint: import/prefer-default-export

      1. // bad - 代码中只有一个 export 时，不使用命名的 export
      2. export const foo = 'foo';
      3.  
      4. // good
      5. export default 'foo';

    • 2.7.5【参考】不要在 import 时直接 export。

      虽然一行代码更简洁，但这不利于代码的可读性和一致性。

      1. // bad
      2. export { Com as Component } from 'react';
      3.  
      4. // good
      5. import { Component } from 'react';
      6.  
      7. export default Component;

    • 2.7.6【参考】import 语句的排序。eslint: import/order

      import 语句需按以下规则排序：

      • 先 import 第三方模块，再 import 自己工程里的模块
      • 先 import 绝对路径，再 import 相对路径
      1. // bad
      2. import foo from 'components/foo';
      3. import './index.scss';
      4. import React from 'react';
      5.  
      6. // good
      7. import React from 'react';
      8. import foo from 'components/foo';
      9. import './index.scss';

    • 2.7.7【强制】不要产生循环引用和自引用。eslint: import/no-cycle import/no-self-import

      `javascript
      // bad - 产生了循环引用
      // foo.js 中
      import bar from ‘./bar’;

      // bar.js 中
      import foo from ‘./foo’;

    // bad - 引用了自己
    // foo.js 中
    import foo from ‘./foo’;

    // index.js 中
    import index from ‘.’;

    1.  
    2. ### 2.8 操作符
    3.  
    4. - 2.8.1【推荐】使用严格相等运算符。eslint: [eqeqeq](https://eslint.org/docs/rules/eqeqeq)
    5.  
    6.   非严格相等运算符（`==` 和 `!=`）会在比较前将被比较值转换为相同类型，对于不熟悉 JS 语言特性的人来说，这可能造成不小的隐患。[了解更多](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)
    7.  
    8.   因此，一般情况下我们应该使用严格比较运算符（ `===` 和 `!==`）进行比较。如果要比较的两个值类型不同，应该显性地将其转换成相同类型再进行严格比较，而不是依赖于 `==` 和 `!=` 的隐式类型转换。
    9.  
    10.   ```javascript
    11.   const id = '83949';
    12.  
    13.   // bad - 为了兼容 id 可能是字符串的情况，而有意使用 == 与数字比较
    14.   if (id == 83949) {
    15.     // do something
    16.   }
    17.  
    18.   // good - 如果 id 可能是字符串，应该先将其进行类型转换，再使用 === 进行比较
    19.   if (Number(id) === 83949) {
    20.     // do something
    21.   }

    • 2.8.2【推荐】不要使用一元自增自减运算符。eslint: no-plusplus

      不要使用一元自增自减运算符（++ 和 --），除非在 for 循环条件中。

      ++ 和 -- 会带来值是否会提前变化以及由自动添加分号机制造成理解成本，推荐使用 num += 1 来代替 num++。但出于习惯，在 for 循环的条件中依然可以使用自增自减运算符。

      1. let num = 1;
      2.  
      3. // bad
      4. num++;
      5. --num;
      6.  
      7. // good
      8. num += 1;
      9. num -= 1;

    • 2.8.3【强制】不要使用 void 运算符。eslint: no-void

      在很老版本的 JS 中，undefined 值是可变的，因此使用 void 语句一般是用来得到一个 undefined 值。而在新版本的 JS 中，上面的问题已不复存在。因此出于程序可读性的考虑，禁止使用 void 运算符。

      1. // bad
      2. const foo = void 0;
      3.  
      4. // good
      5. const foo = undefined;

    • 2.8.4【强制】不要使用嵌套的三元表达式。eslint: no-nested-ternary

      嵌套的三元表达式会降低代码可读性。

      1. // bad
      2. const foo = bar ? baz : qux === quxx ? bing : bam;
      3.  
      4. // good
      5. const qu = qux === quxx ? bing : bam;
      6. const foo = bar ? baz : qu;

    • 2.8.5【强制】避免不必要的三元表达式。eslint: no-unneeded-ternary

      1. // bad
      2. const foo = a ? a : b;
      3. const bar = c ? true : false;
      4. const baz = c ? false : true;
      5.  
      6. // good
      7. const foo = a || b;
      8. const bar = !!c;
      9. const baz = !c;

    • 2.8.6【强制】混合使用多种操作符时，用小括号包裹分组。eslint: no-mixed-operators

      这可以更清晰地表达代码意图，提高可读性。四则运算符（+, -, *, /）可以不包裹，因为大多数人熟知它们的优先级。了解更多

      1. // bad
      2. const foo = a && b < 0 || c > 0 || d + 1 === 0;
      3.  
      4. // good
      5. const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
      6.  
      7. // bad
      8. const bar = a ** b - 5 % d;
      9.  
      10. // good
      11. const bar = (a ** b) - (5 % d);
      12.  
      13. // bad - 有些新手可能误以为执行顺序是 (a || b) && c
      14. if (a || b && c) {
      15.   return d;
      16. }
      17.  
      18. // good
      19. if (a || (b && c)) {
      20.   return d;
      21. }
      22.  
      23. // good - 四则运算可以不用小括号包裹
      24. const bar = a + b / c * d;

    • 2.8.7【强制】不要与负零进行比较。eslint: no-compare-neg-zero

    • 2.8.8【强制】禁止对关系运算符左边的运算元使用否定操作符。eslint: no-unsafe-negation
    • 2.8.9【强制】禁止使用逗号操作符，除非用于 for 循环条件或明确用小括号包裹。eslint: no-sequences
    • 2.8.10【推荐】不要使用按位操作符。eslint: no-bitwise

    2.9 控制语句

    • 2.9.1【强制】不要让 case 语句落空。eslint: no-fallthrough

      使用 break、return 或 throw 来结束 case 语句，不要让 case 语句落空。

      1.   // bad
      2.   switch(foo) {
      3.     case 1:
      4.       doSomething();
      5.     case 2:
      6.       doSomethingElse();
      7.     default:
      8.       doSomething();
      9.   }
      10.  
      11.   // good
      12.   switch(foo) {
      13.     case 1:
      14.       doSomething();
      15.       break;
      16.     case 2:
      17.       doSomethingElse();
      18.       break;
      19.     default:
      20.       doSomething();
      21.   }

    • 2.9.2【推荐】switch 语句需要始终包含 default 分支。eslint: default-case

      在使用 switch 语句时，有时会出现因开发者忘记设置 default 而导致错误，因此建议总是给出 default。如果有意省略 default，请在 switch 语句末尾用 // no default 注释指明：

      1. // bad
      2. let foo;
      3. switch (bar) {
      4.   case 1:
      5.     foo = 2;
      6.     break;
      7. }
      8.  
      9. // good
      10. let foo;
      11. switch (bar) {
      12.   case 1:
      13.     foo = 2;
      14.     break;
      15.   default:
      16.     foo = 0;
      17. }
      18.  
      19. // good - 如果有意省略 default，请在 switch 语句末尾用 `// no default` 注释指明
      20. let foo = 0;
      21. switch (bar) {
      22.   case 1:
      23.     foo = 2;
      24.     break;
      25.   // no default
      26. }

    • 2.9.3【参考】switch 语句应包含至少 3 个条件分支。SonarJs: javascript:S1301

      switch 语句在有许多条件分支的情况下可以使代码结构更清晰。但对于只有一个或两个条件分支的情况，更适合使用 if 语句，if 语句更易于书写和阅读。

      1. // bad
      2. let foo;
      3. switch (bar) {
      4.   case 1:
      5.     foo = 2;
      6.     break;
      7.   default:
      8.     foo = 0;
      9. }
      10.  
      11. // good
      12. let foo;
      13. if (bar === 1) {
      14.   foo = 2;
      15. } else {
      16.   foo = 0;
      17. }

    • 2.9.4【强制】for 循环中的计数器应朝着正确方向移动。eslint: for-direction

      当 for 循环中更新子句的计数器朝着错误的方向移动时，循环的终止条件将永远无法达到，这会导致死循环的出现。这时要么是程序出现了错误，要么应将 for 循环改为 while 循环。

      1. // bad
      2. for (let i = 0; i < length; i--) {
      3.   // do something
      4. }
      5.  
      6. // good
      7. for (let i = 0; i < length; i++) {
      8.   // do something
      9. }

    • 2.9.5【推荐】for-in 循环中需要对 key 进行验证。eslint: guard-for-in

      使用 for-in 循环时需要避免对象从原型链上继承来的属性也被遍历出来，因此保险的做法是对 key 是否是对象自身的属性进行验证：

      1. // bad
      2. for (const key in foo) {
      3.   doSomething(key);
      4. }
      5.  
      6. // good
      7. for (const key in foo) {
      8.   if (Object.prototype.hasOwnProperty.call(foo, key)) {
      9.     doSomething(key);
      10.   }
      11. }

    • 2.9.6【强制】不要出现空代码块。eslint: no-empty

      不要让代码中出现空代码块，这会使阅读者感到困惑。如果必须使用空块，需在块内写明注释：

      1. // bad
      2. if (condition) {
      3.   thing1();
      4. } else {
      5. }
      6.  
      7. // good
      8. if (condition) {
      9.   thing1();
      10. } else {
      11.   // TODO I haven’t determined what to do.
      12. }

    • 2.9.7【参考】控制语句的嵌套层级不要过深。SonarJs: javascript:NestedIfDepth

      控制语句的嵌套层级不要超过 4 级，否则将难以阅读和维护：

      1. // bad
      2. if (condition1) {
      3.   // depth = 1
      4.   if (condition2) {
      5.     // depth = 2
      6.     for (let i = 0; i < 10; i++) {
      7.       // depth = 3
      8.       if (condition4) {
      9.         // depth = 4
      10.         if (condition5) {
      11.           // bad - depth = 5
      12.         }
      13.         return;
      14.       }
      15.     }
      16.   }
      17. }

    • 2.9.8【参考】如果一个 if 语句的结果总是返回一个 return 语句，那么最后的 else 是不必要的。eslint: no-else-return

      1. // bad
      2. function foo() {
      3.   if (x) {
      4.     return x;
      5.   } else {
      6.     return y;
      7.   }
      8. }
      9.  
      10. // good
      11. function foo() {
      12.   if (x) {
      13.     return x;
      14.   }
      15.  
      16.   return y;
      17. }

    • 2.9.9【参考】条件表达式的计算结果。

      条件表达式（例如 if 语句的条件）的值为通过抽象方法 ToBoolean 进行强制转换所得，其计算结果遵守下面的规则：

      • 对象、数组 被计算为 true
      • Undefined 被计算为 false
      • Null 被计算为 false
      • 布尔值 被计算为 布尔的值
      • 数字 如果是 +0、-0 或 NaN 被计算为 false，否则为 true
      • 字符串 如果是空字符串 '' 被计算为 false，否则为 true
      1. if ({}) { // => true
      2. }
      3.  
      4. if ([]) { // => true
      5. }
      6.  
      7. if (undefined || null) { // => false
      8. }
      9.  
      10. if (0) { // => false
      11. }
      12.  
      13. if ('0') { // => true
      14. }
      15.  
      16. if ('') { // => false
      17. }

    • 2.9.10【强制】不要在条件表达式中使用赋值语句。eslint: no-cond-assign

    • 2.9.12【强制】switch 语句中禁止出现重复的 case。eslint: no-duplicate-case
    • 2.9.13【强制】不要在 return 等语句之后出现不可达的代码。eslint: no-unreachable
    • 2.9.14【强制】禁止在 finally 中出现控制流语句。eslint: no-unsafe-finally
    • 2.9.15【强制】case 或 default 字句出现词法声明时，必须用块包裹。eslint: no-case-declarations
    • 2.9.16【推荐】不要使用 label。eslint: no-labels
    • 2.9.19【强制】禁止标签与变量同名。eslint: no-label-var
    • 2.9.20【推荐】在条件判断中使用 color === ‘red’ 而不是 ‘red’ === color。eslint: yoda
    • 2.9.21【强制】禁止 if 作为唯一语句出现在 else 中，此时应写成 else if。eslint: no-lonely-if

    2.10 其他

    • 2.10.1【强制】禁止使用 eval。eslint: no-eval

      eval 语句存在安全风险，可能导致注入攻击。

      1. // bad
      2. const obj = { x: 'foo' };
      3. const key = 'x';
      4. const value = eval('obj.' + key);
      5.  
      6. // good
      7. const obj = { x: 'foo' };
      8. const key = 'x';
      9. const value = obj[key];

    • 2.10.2【强制】禁止使用 debugger。eslint: no-debugger

      debugger 语句会让程序暂停，并在当前位置开启调试器。它通常在程序调试阶段使用，不应发布到线上。

      1. // bad
      2. function isTruthy(x) {
      3.   debugger;
      4.   return Boolean(x);
      5. }

    • 2.10.3【推荐】禁止使用 alert。eslint: no-alert

      alert 语句会使浏览器弹出原生警告框，这可能让人感觉你的程序出错了。如果需要对用户弹出警告信息，好的做法是使用第三方的弹窗组件或自己定义警告框样式。同理，confirm 和 prompt 语句也不应被使用。

      1. // bad
      2. alert('Oops!');
      3.  
      4. // good - 使用自定义的 Alert 组件
      5. Alert('Oops!');

    • 2.10.4【推荐】生产环境禁止使用 console。eslint: no-console

      console 语句通常在调试阶段使用，发布上线前，应该去掉代码里所有的 console 语句。

      1. // bad
      2. console.log('Some debug messages..');
      3.  
      4. // good - 如果你非要使用 console 语句，可以考虑自己进行封装以确保不要在生产环境暴露调试信息
      5. const utils = {
      6.   log: (msg) => {
      7.     if (window.env !== 'product') {
      8.       console.log(msg);
      9.     }
      10.   },
      11. };
      12.  
      13. utils.log('Some debug messages..');

    • 2.10.5【强制】禁止对原生对象或只读的全局对象进行赋值。eslint: no-global-assign

      JS 执行环境中会包含一些全局变量和原生对象，如浏览器环境中的 window，node 环境中的 global 、process，Object，undefined 等。除了像 window 这样的众所周知的对象，JS 还提供了数百个内置全局对象，你可能在定义全局变量时无意对它们进行了重新赋值，因此最好的做法是不要定义全局变量。

      1. // bad
      2. window = {};
      3. Object = null;
      4. undefined = 1;

    • 2.10.6【强制】getter 需要有返回值。getter-return

      get 语法用于将对象属性绑定到查询该属性时将被调用的函数，函数的返回值即查询的对象属性值：

      1. // bad
      2. const object = {
      3.   log: [1, 2, 3],
      4.   get latest() {
      5.   },
      6. }
      7.  
      8. // good
      9. const object = {
      10.   log: [1, 2, 3],
      11.   get latest() {
      12.     return this.log[this.log.length - 1];
      13.   },
      14. }

    • 2.10.7【强制】禁止在正则中使用空字符集 []。eslint: no-empty-character-class

    • 2.10.8【强制】禁止对 catch 的入参重新赋值。eslint: no-ex-assign
    • 2.10.9【强制】禁止在 RegExp 构造函数中使用无效的正则表达式。eslint: no-invalid-regexp
    • 2.10.12【强制】禁止在正则表达式中出现多个连续空格。eslint: no-regex-spaces
    • 2.10.13【强制】禁止使用类 eval 的方法，如 setTimeout 第一个参数传入字符串。eslint: no-implied-eval
    • 2.10.14【强制】禁止使用 iterator 属性。eslint: no-iterator
    • 2.10.15【强制】禁止使用不必要的代码块。eslint: no-lone-blocks
    • 2.10.16【强制】禁止使用 proto 属性。eslint: no-proto
    • 2.10.17【强制】禁止使用 javascript:url。eslint: no-script-url
    • 2.10.22【强制】禁止使用 with。eslint: no-with

    3 注释

    注释的目的：提高代码的可读性，从而提高代码的可维护性
    注释的原则：如无必要，勿增注释（As short as possible）；如有必要，尽量详尽（As long as necessary）

    • 3.1【参考】单行注释使用 //。eslint: line-comment-position no-inline-comments lines-around-comment

      单行注释使用 // 语法，建议遵循如下风格以提高可读性：

      注释应单独一行写在被注释对象的上方，不要追加在某条语句的后面：line-comment-position no-inline-comments

      1. // bad
      2. const active = true;  // is current tab
      3.  
      4. // good
      5. // is current tab
      6. const active = true;

      注释行上方需要有一个空行（除非注释行上方是一个块的顶部），以增加可读性：lines-around-comment

      1. // bad - 注释行上方需要一个空行
      2. function getType() {
      3.   console.log('fetching type...');
      4.   // set the default type to 'no type'
      5.   const type = this.type || 'no type';
      6.  
      7.   return type;
      8. }
      9.  
      10. // good
      11. function getType() {
      12.   console.log('fetching type...');
      13.  
      14.   // set the default type to 'no type'
      15.   const type = this.type || 'no type';
      16.  
      17.   return type;
      18. }
      19.  
      20. // bad - 注释行上面是一个块的顶部时不需要空行
      21. function getType() {
      22.  
      23.   console.log('fetching type...');
      24.   // set the default type to 'no type'
      25.   const type = this.type || 'no type';
      26.  
      27.   return type;
      28. }
      29.  
      30. // good
      31. function getType() {
      32.   // set the default type to 'no type'
      33.   const type = this.type || 'no type';
      34.  
      35.   return type;
      36. }

    • 3.2【推荐】多行注释使用 /* … */，而不是多行的 //。eslint: multiline-comment-style

      1. // bad
      2. // make() returns a new element
      3. // based on the passed in tag name
      4. function make(tag) {
      5.   // ...
      6.  
      7.   return element;
      8. }
      9.  
      10. // good
      11. /*
      12.  * make() returns a new element
      13.  * based on the passed-in tag name
      14.  */
      15. function make(tag) {
      16.   // ...
      17.  
      18.   return element;
      19. }

    • 3.3【强制】注释内容和注释符之间需留有一个空格。eslint: spaced-comment

      注释内容和注释符之间需留有一个空格，以增加可读性：

      1.   // bad
      2.   //is current tab
      3.   const active = true;
      4.  
      5.   // good
      6.   // is current tab
      7.   const active = true;
      8.  
      9.   // bad
      10.   /*
      11.    *make() returns a new element
      12.    *based on the passed-in tag name
      13.    */
      14.   function make(tag) {
      15.     // ...
      16.  
      17.     return element;
      18.   }
      19.  
      20.   // good
      21.   /*
      22.    * make() returns a new element
      23.    * based on the passed-in tag name
      24.    */
      25.   function make(tag) {
      26.     // ...
      27.  
      28.     return element;
      29.   }

    • 3.4【推荐】合理使用特殊注释标记。SonarJs: javascript:S1134 javascript:S1135

      有时我们发现某个可能的 bug，但因为一些原因还没法修复；或者某个地方还有一些待完成的功能，这时我们需要使用相应的特殊标记注释来告知未来的自己或合作者。最常用的特殊标记有两种：

      • // FIXME: 说明问题是什么
      • // TODO: 说明还要做什么或者问题的解决方案

      一个我们不愿看到却很普遍的情况是，我们给代码标记 FIXME 或 TODO 后却一直没找到时间处理。所以当你做了特殊标记，你应该为它负责，在某个时间把它解决。

      1. class Calculator extends Abacus {
      2.   constructor() {
      3.     super();
      4.  
      5.     // FIXME: shouldn’t use a global here
      6.     total = 0;
      7.  
      8.     // TODO: total should be configurable by an options param
      9.     this.total = 0;
      10.   }
      11. }

    • 3.5【参考】文档类注释使用 jsdoc 规范。eslint: valid-jsdoc

      文档类注释，如函数、类、文件、事件等，推荐使用 jsdoc 规范或类 jsdoc 的规范。

      例如：

      1. /**
      2.  * Book类，代表一个书本.
      3.  * @constructor
      4.  * @param {string} title - 书本的标题.
      5.  * @param {string} author - 书本的作者.
      6.  */
      7. function Book(title, author) {
      8.   this.title=title;
      9.   this.author=author;
      10. }
      11.  
      12. Book.prototype={
      13.   /**
      14.    * 获取书本的标题
      15.    * @returns {string|*}
      16.    */
      17.   getTitle:function(){
      18.   return this.title;
      19.   },
      20.  
      21.   /**
      22.    * 设置书本的页数
      23.    * @param pageNum {number} 页数
      24.    */
      25.   setPageNum:function(pageNum){
      26.   this.pageNum=pageNum;
      27.   }
      28. };

    • 3.6【参考】无用的代码注释应被即时删除。SonarJs: javascript:CommentedCode

      无用的注释代码会使程序变得臃肿并降低可读性，应被即时删除。你可以通过版本控制系统找回被删除的代码。

    4 命名

    命名的原则：同注释一样，As short as possible, but as long as necessary

    • 4.1【参考】使用小驼峰风格命名原始类型、对象、函数、实例。eslint: camelcase

      1. // bad
      2. const this_is_my_string = 'foo';
      3. const this_is_my_object = {};
      4. function this_is_my_function() {}
      5.  
      6. // good
      7. const thisIsMyString = 'foo';
      8. const thisIsMyObject = {};
      9. function thisIsMyFunction() {}

    • 4.2【强制】使用大驼峰风格命名类和构造函数。eslint: new-cap

      1. // bad
      2. function user(options) {
      3.   this.name = options.name;
      4. }
      5.  
      6. const bad = new user({
      7.   name: 'nope',
      8. });
      9.  
      10. // good
      11. class User {
      12.   constructor(options) {
      13.     this.name = options.name;
      14.   }
      15. }
      16.  
      17. const good = new User({
      18.   name: 'yup',
      19. });

    • 4.3【参考】全部大写字母&单词间用下划线分割的命名模式（UPPERCASE_VARIABLES）。

      全大写字母、单词间使用下划线分割的命名模式（UPPERCASE_VARIABLES），仅用于命名常量，且该常量需同时满足如下条件：

      • 使用 const 关键字声明
      • 用于 export，而不是本文件内

      ES6 后 const 关键字用于声明常量，被广泛使用，如果所有用 const 声明的值都用 UPPERCASE_VARIABLES 模式命名会使可读性变差，是没有必要的。因此我们约定 UPPERCASE_VARIABLES 命名模式只用于 export 给其他文件用的常量，如果只在同文件内使用，依然使用正常的命名风格。

      1. // bad - 在本文件中使用的常量，不需使用 UPPERCASE_VARIABLES 风格
      2. const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';
      3.  
      4. // bad
      5. export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';
      6.  
      7. // good
      8. export const THIS_IS_CONSTANT = '一个常量';

      此外，如果 export 一个对象，只有对象本身需要使用 UPPERCASE_VARIABLES ，对象属性的 key 仍然使用正常命名风格：

      1. // bad - unnecessarily uppercases key while adding no semantic value
      2. export const AN_OBJECT = {
      3.   KEY: 'value',
      4. };
      5.  
      6. // good
      7. export const AN_OBJECT = {
      8.   key: 'value',
      9. };

    • 4.4【参考】模块相关的命名规范。

      使用小驼峰（camelCase）命名 export 的函数：

      1. function makeStyleGuide() {
      2.   // ...
      3. }
      4.  
      5. export default makeStyleGuide;

      使用大驼峰（PascalCase）命名 export 的 class、函数库、字面量对象：

      1. const AnObject = {
      2.   foo: {
      3.     // ...
      4.   },
      5. };
      6.  
      7. export default AnObject;

      文件的命名最好和默认的 export 一致：

      1. // 文件1
      2. class CheckBox {
      3.   // ...
      4. }
      5. export default CheckBox;
      6.  
      7. // 文件2
      8. export default function fortyTwo() { return 42; }
      9.  
      10. // 在另一个文件中引入2个文件
      11. // bad
      12. import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
      13. import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
      14.  
      15. // bad
      16. import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
      17. import forty_two from './forty_two'; // snake_case import/filename, camelCase export
      18.  
      19. // good
      20. import CheckBox from './CheckBox'; // PascalCase export/import/filename
      21. import fortyTwo from './fortyTwo'; // camelCase export/import/filename

    • 4.5【参考】命名不要以下划线开头或结尾。eslint: no-underscore-dangle

      JS 没有私有属性或私有方法的概念，这样的命名可能会让人误解。

      1. // bad
      2. this.__firstName__ = 'Panda';
      3. this.firstName_ = 'Panda';
      4. this._firstName = 'Panda';
      5.  
      6. // good
      7. this.firstName = 'Panda';

    5 关于 ES5

    这个章节是为还在使用 ES5 及之前版本 JS 的同学准备。因为本规约以 ES6 编写，你可以通过阅读本章节来了解 ES5 中有哪些需要额外注意的地方。

    • 5.1【参考】在模块顶部声明严格模式。eslint: strict

      如果你的项目还在使用 ES5，推荐始终在模块顶部声明严格模式，这会让你的代码更加健壮。（ES6 代码无需声明 use strict，因为经过 Babel 转换会自动添加）

      1. (function () {
      2.   'use strict';
      3.  
      4.   // ...
      5. }());

    • 5.2【推荐】ES5 中的变量声明。eslint: block-scoped-var

      使用 var 进行声明：

      1. // good
      2. var foo = 'foo';

      需注意，var 声明的变量不是块作用域而是函数作用域：

      1. // 将打印 2, 2, 2，而非 0, 1, 2
      2. for (var i = 0; i < 3; ++i) {
      3.   var iteration = i;
      4.   setTimeout(function() { console.log(iteration); }, i * 1000);
      5. }

      虽然 var 是函数作用域，但推荐把它当作块作用域使用，不要在块外使用块内声明的变量：(eslint: block-scoped-var)

      1. // bad
      2. function doIf() {
      3.   if (foo) {
      4.     var build = true;
      5.   }
      6.  
      7.   console.log(build);
      8. }
      9.  
      10. // good
      11. function doIf() {
      12.   var build;
      13.  
      14.   if (foo) {
      15.     build = true;
      16.   }
      17.  
      18.   console.log(build);
      19. }

      另外，var 声明的变量会被提升到其作用域顶部：

      1. // 变量声明会被提升到函数顶部，但赋值不会被提升
      2. function example() {
      3.   console.log(declaredButNotAssigned); // => undefined
      4.   console.log(notDeclared); // => throws a ReferenceError
      5.   var declaredButNotAssigned = true;
      6. }

      即便如此，我们还是推荐在变量使用前再进行声明，而不是统一在作用域开始处声明，以增强可读性。当然，如果你担心变量提升问题的隐患，也可以选择统一在作用域开始处进行声明。

      不要在声明前就使用变量，这样做可能给人带来疑惑和隐患。eslint: no-use-before-define

      1. // bad
      2. console.log(foo); // => undefined
      3. var foo = 'foo';
      4.  
      5. // good
      6. var foo = 'foo';
      7. console.log(foo); // => foo

    • 5.3【强制】ES5 环境下，对于逗号分隔的多行结构，不要加上最后一个行末逗号。eslint: comma-dangle

      这样做会在 IE6/7 和 IE9 怪异模式下引起问题。另外，多余的逗号在某些 ES3 的实现里会增加数组的长度。

      1. // bad
      2. var hero = {
      3.   firstName: 'Kevin',
      4.   lastName: 'Flynn',
      5. };
      6.  
      7. // good
      8. var hero = {
      9.   firstName: 'Kevin',
      10.   lastName: 'Flynn'
      11. };

    • 5.4【参考】使用 Array 的 slice 方法进行数组复制和类数组对象转换。

      数组复制：

      1. var items = [1, 2, 3];
      2.  
      3. // bad
      4. var itemsCopy = [];
      5. for (var i = 0; i < items.length; i++) {
      6.   itemsCopy[i] = items[i];
      7. }
      8.  
      9. // good
      10. var itemsCopy = items.slice();

      将类数组对象转换成数组：

      1. function trigger() {
      2.   var args = Array.prototype.slice.call(arguments);
      3.   // ...
      4. }

    • 5.5【推荐】不要使用保留字作为对象的属性名。

      不要使用保留字作为对象的属性名，它们在 IE8 中不工作

      1. // bad
      2. var superman = {
      3.   class: 'alien',
      4.   default: { clark: 'kent' },
      5.   private: true
      6. };
      7.  
      8. // good
      9. var superman = {
      10.   type: 'alien',
      11.   defaults: { clark: 'kent' },
      12.   hidden: true
      13. };

    6 配套工具

    TypeScript 编码规约

    (WC-TS)-TypeScript 编码规约

    前言

    本规约涉及 TypeScript 的编码风格、最佳实践，编码风格部分与 JS 规约保持一致。

    配套工具

    @ali/tslint-config-ali"target="_blank">tslint-config-ali：集团 TS 规约配套 TSLint 规则包

    参与和反馈

    对规约有任何意见和建议，欢迎到这里提 issue，或到规约站点版的对应条目中留言讨论：）

    1 编码风格

    类型无关的约定均继承于 JavaScript 编码规约

    1.1 缩进

    • 1.1.1【强制】使用 2 个空格缩进，并垂直对齐。tslint: indent [ align](TSLint core rules align)

      统一使用 2 个空格缩进，不要使用 4 个空格或 tab 缩进，并垂直对齐

      1. // bad
      2. function foo() {
      3. ∙∙∙∙let name;
      4. }
      5.  
      6. // good
      7. function foo() {
      8. ∙∙let name;
      9. }

    1.2 分号

    • 1.2.1【强制】使用分号。tslint: semicolon

      统一以分号结束语句，可以避免 JS 引擎自动分号插入机制的怪异行为，在语义上也更加明确。

      自动分号插入机制（即 Automatic Semicolon Insertion，简称 ASI） 是当 JS 遇到不带分号的语句时判断是否自动添加分号的机制，它在个别情况下的行为比较怪异，可能导致意想不到的效果。此外随着 JS 新特性的增加，异常的情况可能变得更加复杂。

      1. // bad - 导致 Uncaught ReferenceError 报错
      2. const luke = {}
      3. const leia = {}
      4. [luke, leia].forEach((jedi) => {
      5.   jedi.father = 'vader'
      6. })
      7.  
      8. // good
      9. const luke = {};
      10. const leia = {};
      11. [luke, leia].forEach((jedi) => {
      12.   jedi.father = 'vader';
      13. });
      14.  
      15. // bad - 导致 Uncaught ReferenceError 报错
      16. const reaction = 'No! That's impossible!'
      17. (async function meanwhileOnTheFalcon() {
      18. }())
      20. // good
      21. const reaction = 'No! That's impossible!';
      22. (async function meanwhileOnTheFalcon() {
      23. }());
      24.  
      25. // bad - 函数将返回 `undefined` 而不是换行后的值
      26. function foo() {
      27.   return
      28.     'Result want to be returned'
      29. }
      30.  
      31. // good
      32. function foo() {
      33.   return 'Result want to be returned';
      34. }

    1.3 逗号

    • 1.3.1【强制】用逗号分隔的多行结构，不使用行首逗号，始终在尾部添加逗号。tslint: trailing-comma

      包括数组和对象字面量、解构赋值、命名导入和导出、函数参数等，解构的rest和函数的rest参数除外。

      这样可以使增删行更加容易，也会使 git diffs 更清晰。Babel 等编译器会在编译后的代码里帮我们去掉最后额外的逗号，因此不必担心在旧浏览器中的问题。

      1.   // bad - 没有结尾逗号时，新增一行的 git diff 示例
      2.   const hero = {
      3.        firstName: 'Florence',
      4.   -    lastName: 'Nightingale'
      5.   +    lastName: 'Nightingale',
      6.   +    inventorOf: ['coxcomb chart', 'modern nursing']
      7.   };
      8.  
      9.   // good - 有结尾逗号时，新增一行的 git diff 示例
      10.   const hero = {
      11.        firstName: 'Florence',
      12.        lastName: 'Nightingale',
      13.   +    inventorOf: ['coxcomb chart', 'modern nursing'],
      14.   };
      1.   // bad
      2.   const hero = {
      3.     firstName: 'Dana',
      4.     lastName: 'Scully'
      5.   };
      6.  
      7.   const heroes = [
      8.     'Batman',
      9.     'Superman'
      10.   ];
      11.  
      12.   function createHero(
      13.     firstName,
      14.     lastName,
      15.     inventorOf
      16.   ) {
      17.     // ...
      18.   }
      19.  
      20.   createHero(
      21.     firstName,
      22.     lastName,
      23.     inventorOf
      24.   );
      25.  
      26.   // good
      27.   const hero = {
      28.     firstName: 'Dana',
      29.     lastName: 'Scully',
      30.   };
      31.  
      32.   const heroes = [
      33.     'Batman',
      34.     'Superman',
      35.   ];
      36.  
      37.   function createHero(
      38.     firstName,
      39.     lastName,
      40.     inventorOf,
      41.   ) {
      42.     // ...
      43.   }
      44.  
      45.   createHero(
      46.     firstName,
      47.     lastName,
      48.     inventorOf,
      49.   );
      50.  
      51.   // good - 需注意，使用扩展运算符的元素后面不能加逗号
      52.   function createHero(
      53.     firstName,
      54.     lastName,
      55.     inventorOf,
      56.     ...heroArgs
      57.   ) {
      58.     // ...
      59.   }

      不使用行首逗号

      1.   // bad
      2.   const story = [
      3.       once
      4.     , upon
      5.     , aTime
      6.   ];
      7.  
      8.   // good
      9.   const story = [
      10.     once,
      11.     upon,
      12.     aTime,
      13.   ];
      14.  
      15.   // bad
      16.   const hero = {
      17.       firstName: 'Ada'
      18.     , lastName: 'Lovelace'
      19.     , superPower: 'computers'
      20.   };
      21.  
      22.   // good
      23.   const hero = {
      24.     firstName: 'Ada',
      25.     lastName: 'Lovelace',
      26.     superPower: 'computers',
      27.   };

    1.4 块

    • 1.4.1【强制】不要使用空代码块。tslint: no-empty

      不要让代码中出现空代码块，这会使阅读者感到困惑。如果必须使用空块，需在块内写明注释。

      1. // bad
      2. if (condition) {
      3.   thing1();
      4. } else {
      5. }
      6.  
      7. // good
      8. if (condition) {
      9.   thing1();
      10. } else {
      11.   // TODO I haven’t determined what to do.
      12. }

    • 1.4.2【强制】代码块始终需用大括号包裹。tslint: curly

      多行代码块必须用大括号包裹：

      1. // bad
      2. if (foo)
      3.   bar();
      4.   baz(); // 这一行并不在 if 语句里
      5.  
      6. // good
      7. if (foo) {
      8.   bar();
      9.   baz();
      10. }

      代码块只有一条语句时，可以省略大括号，并跟控制语句写在同一行。但出于一致性和可读性考虑，不推荐这样做：

      1. // bad
      2. if (foo)
      3.   return false;
      4.  
      5. // bad - 允许但不推荐
      6. if (foo) return false;
      7.  
      8. // good
      9. if (foo) {
      10.   return false;
      11. }

    • 1.4.3【强制】对于非空的代码块，大括号的换行方式采用 Egyptian Brackets 风格， 指定的标记和后续相关的表达式在同一行， 比如 catch finally else 和前面的花括号。tslint: one-line

      对于非空的代码块，大括号的换行方式采用 Egyptian Brackets 风格，具体规则如下：

      • 左大括号 { 前面不换行，后面换行
      • 右大括号 } 前面换行
      • 右大括号 } 后面是否换行有两种情况：
        • 如果 } 终结了整个语句，如条件语句、函数或类的主体，则需要换行
        • 如果 } 后面存在 else、catch、while 等语句，或存在逗号、分号、右小括号（)），则不需要换行
      1. // bad - else 应与 if 的 } 放在同一行
      2. if (foo) {
      3.   thing1();
      4. }
      5. else
      6.   thing2();
      7. }
      8.  
      9. // good
      10. if (foo) {
      11.   thing1();
      12. } else {
      13.   thing2();
      14. }

    • 1.4.4【推荐】不要声明空的 interface。tslint: no-empty-interface

      1. // bad
      2. interface A {}
      3.  
      4. // good
      5. interface B {
      6.   value: number;
      7. }

    1.5 空格

    • 1.5.1【强制】空格风格。tslint: whitespace

      块的左大括号 { 前有一个空格：

      1. // bad
      2. function test(){
      3.   console.log('test');
      4. }
      5.  
      6. // good
      7. function test() {
      8.   console.log('test');
      9. }
      10.  
      11. // bad
      12. dog.set('attr',{
      13.   age: '1 year',
      14.   breed: 'Bernese Mountain Dog',
      15. });
      16.  
      17. // good
      18. dog.set('attr', {
      19.   age: '1 year',
      20.   breed: 'Bernese Mountain Dog',
      21. });

      控制语句（if、while 等）的左小括号 ( 前有一个空格：

      1. // bad
      2. if(isJedi) {
      3.   fight ();
      4. }
      5.  
      6. // good
      7. if (isJedi) {
      8.   fight();
      9. }

      声明函数时，函数名和参数列表之间无空格：

      1. // bad
      2. function fight () {
      3.   console.log ('Swooosh!');
      4. }
      5.  
      6. // good
      7. function fight() {
      8.   console.log('Swooosh!');
      9. }

      小括号内部两侧无空格：

      1. // bad
      2. function bar( foo ) {
      3.   return foo;
      4. }
      5.  
      6. // good
      7. function bar(foo) {
      8.   return foo;
      9. }
      10.  
      11. // bad
      12. if ( foo ) {
      13.   console.log( foo );
      14. }
      15.  
      16. // good
      17. if (foo) {
      18.   console.log(foo);
      19. }

      方括号内部两侧无空格：

      1. // bad
      2. const foo = [ 1, 2, 3 ];
      3. console.log(foo[ 0 ]);
      4.  
      5. // good
      6. const foo = [1, 2, 3];
      7. console.log(foo[0]);

      大括号内部两侧有空格：

      1. // bad
      2. const foo = {clark: 'kent'};
      3.  
      4. // good
      5. const foo = { clark: 'kent' };

      运算符两侧有空格，除了一元运算符：

      1. // bad
      2. const x=y+5;
      3.  
      4. // good
      5. const x = y + 5;
      6.  
      7. // bad
      8. const isRight = result === 0? false: true;
      9.  
      10. // good
      11. const isRight = result === 0 ? false : true;
      12.  
      13. // bad - 一元运算符与操作对象间不应有空格
      14. const x = ! y;
      15.  
      16. // good
      17. const x = !y;

      定义对象字面量时， key, value 之间有且只有一个空格，不允许所谓的「水平对齐」：

      1. // bad
      2. {
      3.   a:            'short',
      4.   looooongname: 'long',
      5. }
      6.  
      7. // bad
      8. {
      9.   a           : 'short',
      10.   looooongname: 'long',
      11. }
      12.  
      13. // good
      14. {
      15.   a: 'short',
      16.   looooongname: 'long',
      17. }

    • 1.5.2【推荐】在使用长方法链式调用时进行缩进。tslint: newline-per-chained-call

      在使用多个（大于两个）方法链式调用时进行换行缩进，把点 . 放在行首以强调这是方法调用而不是新语句：

      1. // bad
      2. $('#items').find('.selected').highlight().end().find('.open').updateCount();
      3.  
      4. // bad
      5. $('#items').
      6.   find('.selected').
      7.     highlight().
      8.     end().
      9.   find('.open').
      10.     updateCount();
      11.  
      12. // good
      13. $('#items')
      14.   .find('.selected')
      15.   .highlight()
      16.   .end()
      17.   .find('.open')
      18.   .updateCount();
      19.  
      20. // bad
      21. const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
      22.     .attr('width', (radius + margin) * 2).append('svg:g')
      23.     .attr('transform', `translate(${radius + margin},${radius + margin})`)
      24.     .call(tron.led);
      25.  
      26. // good
      27. const leds = stage.selectAll('.led')
      28.   .data(data)
      29.   .enter()
      30.   .append('svg:svg')
      31.   .classed('led', true)
      32.   .attr('width', (radius + margin) * 2)
      33.   .append('svg:g')
      34.   .attr('transform', `translate(${radius + margin},${radius + margin})`)
      35.   .call(tron.led);
      36.  
      37. // good - 大于 2 个方法的链式调用才需要进行换行
      38. const leds = stage.selectAll('.led').data(data);

    • 1.5.3【强制】建议删除行尾的空格。tslint: no-trailing-whitespace

      1. // bad
      2. let a = 1;∙
      3. // good
      4. let a = 1;

    • 1.5.4【强制】type 声明中冒号前不需要空格。tslint: typedef-whitespace

      1.     // bad
      2.     type value : number;
      3.  
      4.     // good
      5.     type value: number;

    • 1.5.5【强制】紧邻括号的内侧不使用空格。tslint: space-within-parens

      1. // bad
      2. foo( 'bar' );
      3. var x = ( 1 + 2 ) * 3;
      4.  
      5. // good
      6. foo('bar');
      7. var x = (1 + 2) * 3;

    • 1.5.6【强制】函数的括号之前不需要加空格，使用 async 的箭头函数除外。tslint: space-before-function-paren

      1. // bad
      2. function f () {}
      3.  
      4. // good
      5. function f() {}

    1.6 空行

    • 1.6.1【推荐】在文件末尾保留一行空行。tslint: eofline

      在非空文件中保留拖尾换行是一种常见的 UNIX 风格。它的好处同输出文件到终端一样，方便在串联和追加文件时不会打断 shell 的提示。

      我们统一在文件末尾保留一行空行，即用一个换行符结束文件：

      1. // bad - 文件末尾未保留换行符
      2. import { foo } from './Foo';
      3. // ...
      4. export default foo;
      5.  
      6. // bad - 文件末尾保留了2个换行符
      7. import { foo } from './Foo';
      8. // ...
      9. export default foo;↵
      10. ↵
      11.  
      12. // good
      13. import { foo } from './Foo';
      14. // ...
      15. export default foo;↵

    1.7 最大字符数和最大行数

    • 1.7.1【推荐】单行最大字符数：100。tslint: max-line-length

      过长的单行代码不易阅读和维护，需要进行合理换行。

      我们推荐单行代码最多不要超过 100 个字符，除了以下两种情况：

      • 字符串和模板字符串
      • 正则表达式
      1. // bad
      2. const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;
      3.  
      4. // good
      5. const foo = jsonData
      6.   && jsonData.foo
      7.   && jsonData.foo.bar
      8.   && jsonData.foo.bar.baz
      9.   && jsonData.foo.bar.baz.quux
      10.   && jsonData.foo.bar.baz.quux.xyzzy;
      11.  
      12. // bad
      13. $.ajax({ method: 'POST', url: 'https://foo.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));
      14.  
      15. // good
      16. $.ajax({
      17.   method: 'POST',
      18.   url: 'https://foo.com/',
      19.   data: { name: 'John' },
      20. })
      21.   .done(() => console.log('Congratulations!'))
      22.   .fail(() => console.log('You have failed this city.'));

    • 1.7.2【推荐】文件最大行数：1000。tslint: max-file-line-count

      过长的文件不易阅读和维护，最好对其进行拆分。

    • 1.7.4【推荐】函数最大行数：80。

      过长的函数不易阅读和维护，最好对其进行拆分。

    2 语言特性

    2.1 变量声明

    • 2.1.1【强制】禁止使用 var 关键词，使用 const 或 let 声明变量。tslint: no-var-keyword

      从 ES6 开始，可以使用 let 和 const 关键字在块级作用域下声明变量。块级作用域在很多其他编程语言中都有使用，这样声明的变量不会污染全局命名空间。

      不要使用 var：

      1. // bad
      2. var foo = 'foo';
      3. var bar;
      4.  
      5. // good
      6. const foo = 'foo';
      7. let bar;

      更不要什么都不用（这将产生全局变量，从而污染全局命名空间）：

      1. // bad
      2. foo = 'foo';
      3.  
      4. // good
      5. const foo = 'foo';

    • 2.1.2【强制】优先考虑使用 const 代替 let。tslint: prefer-const

      声明变量时，应优先使用 const，只有当变量会被重新赋值时才使用 let：

      1. // bad - 声明后未发生重新赋值，应使用 const
      2. let flag = true;
      3. if (flag) {
      4.   console.log(flag);
      5. }
      6.  
      7. // good - 声明后发生重新赋值，let 使用正确
      8. let flag = true;
      9. if (flag) {
      10.   flag = false;
      11. }

      需注意，数组和对象是一个引用，对数组某项和对象某属性的修改并不是重新赋值，因此多数情况下应用 const 声明：

      1. // bad
      2. let arr = [];
      3. let obj = {};
      4. arr[0] = 'foo';
      5. obj.name = 'bar';
      6.  
      7. // good
      8. const arr = [];
      9. const obj = {};
      10. arr.push('foo');
      11. obj.name = 'bar';

    • 2.1.3【强制】一条声明语句声明一个变量。tslint: one-variable-per-declaration

      这样做更易于追加新的声明语句（你不需要总去把最后的 ; 改成 , 了），也更易于进行单步调试。

      1. // bad
      2. const foo = 1,
      3.       bar = 2;
      4.  
      5. // good
      6. const foo = 1;
      7. const bar = 2;

    • 2.1.4【推荐】声明的变量必须被使用。

      TypeScript 原生支持

      声明而未使用的变量、表达式可能带来潜在的问题，也会给维护者造成困扰，应将它们删除。

      1.   // bad - 未使用变量 foo
      2.   const foo = 1;
      3.  
      4.   // good
      5.   const foo = 1;
      6.   doSomethingWith(foo);
      7.  
      8.   // bad - 只修改变量不认为是被使用
      9.   let bar = 1;
      10.   bar = 2;
      11.   bar += 1;
      12.  
      13.   // good
      14.   let bar = 1;
      15.   bar = 2;
      16.   bar += 1;
      17.   doSomethingWith(foo);
      18.  
      19.   // bad - 未使用参数 y
      20.   function getX(x, y) {
      21.     return x;
      22.   }
      23.  
      24.   // good
      25.   function getXPlusY(x, y) {
      26.     return x + y;
      27.   }

    • 2.1.5【强制】变量不要与外层作用域已存在的变量同名。tslint: no-shadowed-variable

      如果变量与外层已存在变量同名，会降低可读性，也会导致内层作用域无法读取外层作用域的同名变量。

      1. // bad
      2. const foo = 1;
      3. if (someCondition) {
      4.   const foo = 2;
      5.   console.log(foo); // => 2
      6. }
      7.  
      8. // good
      9. const foo = 1;
      10. if (someCondition) {
      11.   const bar = 2;
      12.   console.log(bar); // => 2
      13.   console.log(foo); // => 1
      14. }

    • 2.1.6【强制】禁止在一个块作用域内重复声明一个变量和函数。tslint: no-duplicate-variable

      在 ES5 中，尽管使用 var 重复声明不会报错，但这样做会令人疑惑，降低程序的可维护性。同理，函数的声明也不要与已存在的变量和函数重名：

      1. // bad
      2. var a = 'foo';
      3. var a = 'bar';
      4. function a() {}
      5. console.log(a); // => 'bar'
      6.  
      7. // good
      8. var a = 'foo';
      9. var b = 'bar';
      10. function c() {}
      11. console.log(a); // => 'foo'
      12.  
      13. // bad - arg 已作为函数参数声明
      14. function myFunc(arg) {
      15.   var arg = 'foo';
      16.   console.log(arg);
      17. }
      18. myFunc('bar'); // => 'foo'
      19.  
      20. // good
      21. function myFunc(arg) {
      22.   var otherName = 'foo';
      23.   console.log(arg);
      24. }
      25. myFunc('bar'); // => 'bar'

      在 ES6 中，使用 const 或 let 重复声明变量会直接报错：

      1. // bad
      2. const a = 'foo';
      3. function a() {} // => Uncaught SyntaxError: Identifier 'a' has already been declared
      4.  
      5. // good
      6. const a = 'foo';
      7. function b() {}
      8.  
      9. // bad - arg 已作为函数参数声明
      10. function myFunc(arg) {
      11.   const arg = 'foo';
      12.   console.log(arg);
      13. }
      14. myFunc('bar'); // => Uncaught SyntaxError: Identifier 'arg' has already been declared
      15.  
      16. // good
      17. function myFunc(arg) {
      18.   const otherName = 'foo';
      19.   console.log(arg);
      20. }
      21. myFunc('bar'); // => 'bar'

    • 2.1.7【强制】【ESLint】禁止连续赋值。eslint: no-multi-assign

      变量的连续赋值让人难以阅读和理解，并且可能导致意想不到的结果（如产生全局变量）。

      1. // bad - 本例的结果是 let 仅对 a 起到了预想效果，b 和 c 都成了全局变量
      2. (function test() {
      3.   let a = b = c = 1; // 相当于 let a = (b = (c = 1));
      4. })();
      5.  
      6. console.log(a); // throws ReferenceError
      7. console.log(b); // 1
      8. console.log(c); // 1
      9.  
      10. // good
      11. (function test() {
      12.   let a = 1;
      13.   let b = a;
      14.   let c = a;
      15. })();
      16.  
      17. console.log(a); // throws ReferenceError
      18. console.log(b); // throws ReferenceError
      19. console.log(c); // throws ReferenceError

    • 2.1.8【强制】禁止对通过var/let或者解构赋值的变量初始化赋值 undefined。tslint: no-unnecessary-initializer

      因为 Javascript 中默认就是 undefined

    • 2.1.9【推荐】变量命名使用小驼峰或者全大写，避免使用关键词。tslint: variable-name

      避免使用关键词 any, Number, number, String, string, Boolean, boolean, Undefined, undefined 等

      1. // bad
      2. const Tom = 'tom';
      3. // good
      4. const HEIGHT = 100;
      5. const myName = 'tom';

    2.2 原始类型

    • 2.2.1【强制】不要使用 new Number/String/Boolean。tslint: no-construct

      使用 new Number/String//Boolean 声明不会有任何好处，还会导致变量成为 object 类型，可能引起 bug。

      1. // bad
      2. const num = new Number(0);
      3. const str = new String('foo');
      4. const bool = new Boolean(false);
      5. console.log(typeof num, typeof str, typeof bool); // => object, object, object
      6. if (num) { // true（对象相当于 true）
      7. }
      8. if (bool) { // true（对象相当于 true）
      9. }
      10.  
      11. // good
      12. const num = 0;
      13. const str = 'foo';
      14. const bool = false;
      15. console.log(typeof num, typeof str, typeof bool); // => number, string, boolean
      16. if (num) { // false（0 相当于 false）
      17. }
      18. if (bool) { // false
      19. }

    • 2.2.2【推荐】使用 parseInt() 方法时总是带上基数。tslint: radix

      parseInt 方法的第一个参数是待转换的字符串，第二个参数是转换基数。当第二个参数省略时，parseInt 会根据第一个参数自动判断基数：

      • 如果以 0x 开头，则使用 16 作基数
      • 如果以 0 开头，则使用 8 作基数。正是这条规则经常导致错误，ES5 规范中直接将这条规则移除，即 ES5 及之后的执行环境以 0 开头也会使用 10 作为基数
      • 其他情况则使用 10 作基数

      虽然从 ES5 开始就移除了自动以 8 作基数的规则，但有时难以保证所有的浏览器和 JS 执行环境都支持了这一特性。了解更多

      因此，推荐始终给 parseInt() 方法加上基数，除非可以保证代码的执行环境不受上述特性的影响。

      1. // bad
      2. parseInt('071'); // => ES5 前的执行环境中得到的是 57
      3.  
      4. // good
      5. parseInt('071', 10); // => 71

    • 2.2.3【强制】【ESLint】避免不必要的布尔类型转换。eslint: no-extra-boolean-cast

      在 if 等条件语句中，将表达式的结果强制转换成布尔值是多余的：

      1. // bad
      2. if (!!foo) {
      3.   // ...
      4. }
      5.  
      6. while (!!foo) {
      7.   // ...
      8. }
      9.  
      10. const a = !!flag ? b : c;
      11.  
      12. // good
      13. if (foo) {
      14.   // ...
      15. }
      16.  
      17. while (foo) {
      18.   // ...
      19. }
      20.  
      21. const a = flag ? b : c;

    • 2.2.4【强制】字符串优先使用单引号。tslint: quotemark

      1. // bad
      2. const name = "tod";
      3. const name = `tod`; // 模板字符串中应包含变量或换行，否则需用单引号
      4.  
      5. // good
      6. const name = 'tod';

    • 2.2.5【推荐】使用模板字符串替代字符串拼接。tslint: prefer-template

      模板字符串让代码更简洁，可读性更强

      1. // bad
      2. function getDisplayName({ nickName, realName }) {
      3.   return nickName + ' (' + realName + ')';
      4. }
      5.  
      6. // good
      7. function getDisplayName({ nickName, realName }) {
      8.   return `${nickName} (${realName})`;
      9. }

    2.3 对象

    • 2.3.1【强制】使用对象属性和方法的简写语法。tslint: object-literal-shorthand

      ES6 提供了对象属性和方法的简写语法，可以使代码更加简洁：

      1. const value = 'foo';
      2.  
      3. // bad
      4. const atom = {
      5.   value: value,
      6.   addValue: function (value) {
      7.     return value + ' added';
      8.   },
      9. };
      10.  
      11. // good
      12. const atom = {
      13.   value,
      14.   addValue(value) {
      15.     return value + ' added';
      16.   },
      17. };

    • 2.3.2【强制】对象的属性名不要用引号包裹，除非包含特殊字符。tslint: object-literal-key-quotes

      这样更加简洁，也有助于语法高亮和一些 JS 引擎的优化。

      1. // bad
      2. const bad = {
      3.   'foo': 3,
      4.   'bar': 4,
      5.   'data-blah': 5,
      6.   'one two': 12,
      7. };
      8.  
      9. // good
      10. const good = {
      11.   foo: 3,
      12.   bar: 4,
      13.   'data-blah': 5,
      14.   'one two': 12,
      15. };

    • 2.3.3【强制】禁止不必要的使用字符串进行属性访问。tslint: no-string-literal

      允许一些特殊性情况，比如 obj['prop-erty']

      1. // bad
      2. obj['property']
      3.  
      4. // good
      5. obj.property

    2.4 条件和遍历

    • 2.4.1【推荐】for…in 语句使用 if 进行过滤，同时推荐使用 for…of。tslint: forin

      1. // bad
      2. for (let key in someObject) {
      3.   // code here
      4. }
      5.  
      6. // good
      7. for (let key of someObject) {
      8.     if (someObject.hasOwnProperty(key)) {
      9.        // code here
      10.      }
      11. }

    • 2.4.2【强制】仅允许在 do/for/while/switch 中使用 label。tslint: label-position

      JavaScript中的标签只能与break或continue结合使用，用于循环流控制的结构

    • 2.4.3【强制】不允许条件语句内进行赋值。tslint: no-conditional-assignment

      常见于 do-while, for, if, while

      1. // bad
      2. if (var1 = var2)

    • 2.4.4【强制】禁止在 switch 语句中出现重复的 case。tslint: no-duplicate-switch-case

      属于重复的代码，甚至带来代码执行两次的风险

    • 2.4.5【强制】不要直接 throw 字符串。tslint: no-string-throw

      1. // bad
      2. // 抛出一个字符串缺少任何堆栈跟踪信息和其他重要的数据属性
      3. if (!productToAdd) {
      4.     throw ('How can I add new product when no value provided?');
      5. }
      6.  
      7. // good
      8. // 抛出典型函数的错误，无论是同步还是异步
      9. if (!productToAdd) {
      10.     throw new Error('How can I add new product when no value provided?');
      11. }

    • 2.4.6【强制】禁止在 finally 中使用控制流程的语句。tslint: no-unsafe-finally

      例如 return, continue, break and throws 等

      1. // bad
      2. try {
      3.   // tryCode - Block of code to try
      4. } catch(err) {
      5.   // catchCode - Block of code to handle errors
      6. } finally {
      7.   // finallyCode - Block of code to be executed regardless of the try / catch result
      8.   throw new Error('something');
      9. }
      10.  
      11. // good
      12. try {
      13.   // tryCode - Block of code to try
      14. } catch(err) {
      15.   // catchCode - Block of code to handle errors
      16.   throw new Error('something');
      17. } finally {
      18.   // finallyCode - Block of code to be executed regardless of the try / catch result
      19. }

    • 2.4.7【推荐】switch 语句中添加一个 default case。tslint: switch-default

      1. // bad
      2. switch (p){
      3.   case 1:
      4.     // come code 
      5.     break;
      6.   case ...
      7. }
      8.  
      9. // good
      10. switch (p){
      11.   case 1:
      12.     // come code 
      13.     break;
      14.   case ...
      15.   default:
      16.     // other code
      17. }

    • 2.4.8【推荐】使用 === and !== 代替 == and !=。tslint: triple-equals

      和 null 比较时仍允许使用 == and !=

      1. // bad
      2. a == b;
      3.  
      4. // good
      5. a === b;

    • 2.4.9【强制】使用 isNaN() 函数来检查 NaN 引用，而不是和 NaN 对比较。tslint: use-isnan

      1. // bad
      2. if (myVar === NaN)
      3.  
      4. // good
      5. do if (isNaN(myVar))

    • 2.4.10【强制】禁止和 boolean 字面量进行对比。tslint: no-boolean-literal-compare

      1. // bad
      2. if(x === true){...}
      3.  
      4. // good
      5. if(x){...}

    2.5 函数

    • 2.5.1【推荐】优先使用箭头函数，允许有独立的函数声明和具名的函数表达式，不允许匿名函数。tslint: only-arrow-functions

      1. // bad
      2. function (a){
      3.   return a;
      4. }
      5.  
      6. function(){}
      7.  
      8. // good
      9. const identity = a => a
      10.  
      11. function myName(name) {
      12.   return `my name is ${name}`;
      13. }

    • 2.5.2【强制】禁止直接使用函数的构造函数。tslint: function-constructor

      1. // bad
      2. let doesNothing = new Function();
      3.  
      4. // good
      5. let doesNothing = () => {};

    • 2.5.3【强制】使用箭头函数代替 bind。tslint: unnecessary-bind

      1. // bad
      2. constructor(){
      3.   this.onClick.bind(this);
      4. }
      5. onClick(){}
      6.  
      7. // good
      8. onClick = () => {}

    2.6 类

    • 2.6.1【推荐】类成员声明需要添加访问修饰符，public 除外。tslint: member-access

      TypeScript 中默认是 public，不必再强调，其他的修饰符则需要写明

      1. // bad
      2. public value: number;
      3.  
      4. // good
      5. value: number;
      6. private name: string;

    • 2.6.2【强制】static 类成员放在类的最前面。tslint: member-ordering

      增加可读性

    • 2.6.3【强制】不要使用内部的 module 和 namespace 组织代码。tslint: no-namespace [ no-internal-module](TSLint core rules no-internal-module)

      TypeScript 中的 module 和 namespace 是可以用来对代码进行逻辑组织的方式，推荐统一使用 ES6 的 import/export 语法进行代码组织。
      对于扩充外部模块定义的语法 declare module ‘xxx’ 依然可以使用。

      1. // bad
      2. module a {
      3. }
      4.  
      5. // good
      6. import { a } from './a';

    • 2.6.4【强制】不允许对 this 创建引用，能用箭头函数的就用箭头函数。tslint: no-this-assignment

      1. // bad
      2. const self = this;
      3.  
      4. setTimeout(function () {
      5.   self.doWork();
      6. });
      7. // good
      8. setTimeout(() => {
      9.   this.doWork();
      10. });

    • 2.6.5【强制】在同一个 constructor 中只能出现一次 super。tslint: no-duplicate-super

      super调用一次即可

    • 2.6.6【强制】删除空的或者不必要的 constructor。tslint: unnecessary-constructor

      如果没有用到则可以不写

    • 2.6.7【强制】类名和接口名首字母大写。tslint: class-name

      1. // bad
      2. class myClass { }
      3. interface myInterface { }
      4.  
      5. // good
      6. class MyClass { }
      7. interface MyInterface { }

    2.7 模块

    • 2.7.1【推荐】禁止使用 require 来引用模块。tslint: no-require-imports [ no-var-requires](TSLint core rules no-var-requires)

      统一使用 ES6 语法

      1. // bad
      2. var module = require('module');
      3.  
      4. import foo = require('foo');
      5.  
      6. // good
      7. import foo from 'foo'; // priority

    • 2.7.2【强制】禁止对同一模块多次 import 引入。tslint: no-duplicate-imports

      同一个模块不需要多次引入

    2.8 其他

    • 2.8.1【强制】禁止使用逗号运算符。tslint: ban-comma-operator

      1. // bad
      2. foo((bar, baz));
      3.  
      4. // good
      5. foo(baz);
      1. // bad
      2. switch (foo) {
      3.    case 1, 2:
      4.        return true;
      5. }
      6. // good
      7. switch (foo) {
      8.    case 1:
      9.    case 2:
      10.       return true;
      11. }

    • 2.8.2【推荐】不推荐使用按位运算。tslint: no-bitwise

      主要有： &, &=, |, |=, ^, ^=, <<, <<=, >>, >>=, >>>, >>>=, and ~

      一般情况下很少用到

    • 2.8.3【推荐】不保留 console 语句。tslint: no-console

      正式环境不推荐保留console语句，当然可以使用构建工具去除

    • 2.8.4【强制】不允许使用 debugger。tslint: no-debugger

      正式环境不允许存在 debugger

    • 2.8.5【强制】禁止使用 eval。tslint: no-eval

      可能存在被利用遭受xss攻击的风险

    • 2.8.6【强制】删除未使用的表达式语句。tslint: no-unused-expression

      可能存在潜在的风险

    3 类型

    3.1 类型定义

    • 3.1.1【推荐】定义数组类型时，若数组元素为基础类型，则推荐使用 T[] 形式定义。tslint: array-type

      1. // bad
      2. function (arr: Array<number>) {
      3. }
      4.  
      5. // good
      6. function (arr: number[]) {
      7. }

    • 3.1.2【强制】当需要强制转换类型时必须只用 as Type 。tslint: no-angle-bracket-type-assertion

      在 .tsx 文件中只有 as 语法生效，为保持类型转换风格一致，强制统一使用 as Type 方式转换类型，避免使用 。

      1. // bad
      2. <number>foo
      3.  
      4. // good
      5. foo as number

    • 3.1.3【参考】尽量减少 any 类型声明。tslint: no-any

      允许适度的使用 as any 方法进行类型转换，或将变量类型声明为 any

    • 3.1.4【参考】尽量不要对 any 类型数据进行操作，定义接口来声明结构。tslint: no-unsafe-any

      如果数据来源不能控制（来自第三方 API 等），则在类型声明时建议使用泛型或 Partial 语法，保证代码中读取的结构一定存在。

      1. // bad
      2. const obj = JSON.parse(str) as any;
      3. const result = obj.a.b;
      4.  
      5. // good
      6. interface JSONResult {
      7.   a: {
      8.     b: number;
      9.   }
      10. }
      11. const obj = JSON.parse(str) as JSONResult;
      12. const result = obj.a.b;

    • 3.1.5【推荐】对于可以自动推导的类型无需显式声明。tslint: no-inferrable-types

      对 number string boolean 类型的变量进行初始化时，不需要进行类型声明，因为编译器可以轻松推断出来。

      1. // bad
      2. const str: string = 'str';
      3.  
      4. // good
      5. const str = 'str';

    • 3.1.6【强制】禁止使用  方式引用文件和模块。tslint: no-reference [ no-reference-import](TSLint core rules no-reference-import)

      禁止使用  引入模块

      禁止使用 ///  引入声明文件

      推荐使用 ES6 的 import 语法引入定义文件，

      1. // bad
      2. /// <reference path='react/index.d.ts' />
      3.  
      4. // good
      5. import React from 'react';

    • 3.1.7【强制】函数重载的定义要连续。tslint: adjacent-overload-signatures

      1. // bad
      2. function pickCard(x: {suit: string; card: number; }[]): number;
      3. function insert(x: number): number[];
      4. function pickCard(x: number): {suit: string; card: number; };
      5.  
      6. // good
      7. function pickCard(x: {suit: string; card: number; }[]): number;
      8. function pickCard(x: number): {suit: string; card: number; };
      9. function pickCard(x: any): any {
      10. // 具体实现
      11. // some code
      12. }

    • 3.1.8【推荐】重载函数保持简洁，尽量使用 union 或者 optional/rest 参数统一可能合并的函数。tslint: unified-signatures

    1.   // bad
    2.   function f(a: number, b: string): object;
    3.   function f(a: number, b?: string, c?: string): object;
    4.   function f(a: number, b?: string, c?: string) {
    5.     return {
    6.       x: a,
    7.       y: b,
    8.       z: c,
    9.     };
    10.   }
    11.  
    12.   // good
    13.   function f(a: number, ...args: string[]): object;
    14.   function f(a: number, b?: string, c?: string) {
    15.     return {
    16.       x: a,
    17.       y: b,
    18.       z: c,
    19.     };
    20.   }

    • 3.1.9【强制】类型定义避免使用特定类型，默认不要使用包装类型。tslint: ban-types

      Object ==> object

      Function ==> () => void

      Boolean ==> boolean

      Number ==> number

      String ==> string

      Symbol ==> symbol

    • 3.1.10【强制】类型声明里的属性值以分号结尾。tslint: type-literal-delimiter

      1. // bad
      2. interface ComProps {
      3.   value: number
      4.   name: string
      5. }
      6. // good
      7. interface ComProps {
      8.   value: number;
      9.   name: string;
      10. }

    3.2 模块定义

    14 其他

    • 14.1【强制】引用的第三方依赖，一定要在 package.json 中声明。tslint: no-implicit-dependencies

      如果没有在 package.json 声明，则在使用云构建时无法加载到依赖包

    • 14.2【强制】强制使用 UTF-8 编码。tslint: encoding

      统一编码

    git版本管理/编辑器设置

    1、 代码规范

    为保持前端项目编码风格统一，降低跨项目协调开发难度，同时规范个人编码习惯和提高个人编码能力，公司前端项目搭建及开发时，须配置ESLint与stylelint规范，具体见以下文档：

    ESLint（javaScript/html）规范

    1.     'eqeqeq': [ 0, 'allow-null' ], /**要求使用 === 和 !== */
    2.     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', /**禁用 debugger */
    3.     'quotes': [ 'error', 'single' ], /**要求使用单引号 */
    4.     'linebreak-style': [ 0, 'error', 'windows' ], /**强制使用一致的换行风格 */
    5.     'no-use-before-define': [ 'error', {
    6.       'functions': true,
    7.       'classes': true
    8.     } ], /**禁止在变量定义之前使用它们 */
    9.     'no-param-reassign': [ 'error', { 'props': false } ], /**禁止对 function 的参数进行重新赋值 */
    10.     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', /**禁用 console */
    11.     //TODO:
    12.     'comma-dangle': [ 'error', 'never' ], /**禁止使用拖尾逗号 */
    13.     'indent': [ 'error', 2 ], /**2个空格缩进 */
    14.     'max-len': [ 'error', { 'code': 1000 } ], /**强制一行的最大长度1000 */
    15.     'no-mixed-spaces-and-tabs': [ 'error', 'smart-tabs' ], /**使用 空格 和 tab 混合缩进 */
    16.     'no-ternary': 'off', /**允许使用三元表达式 */
    17.     'no-nested-ternary': 'off', /**允许使用嵌套的三元表达式 */
    18.     'prefer-template': 'error', /**建议使用模板字面量而非字符串‘+’拼接 */
    19.     'arrow-parens': [ 'error', 'as-needed' ], /**必要时，要求箭头函数的参数使用圆括号 */
    20.     'arrow-spacing': 'error', /**箭头函数的箭头之前或之后要有空格 */
    21.     'require-await': 'off', /**禁止使用不带 await 表达式的 async 函数 */
    22.     // TODO:
    23.     'array-bracket-spacing': [ 'error', 'never' ], /**方括号内部两侧无空格 */
    24.     'no-trailing-spaces': 'error', /**禁止使用行尾空白 */
    25.     'no-const-assign': 'error', /**不允许改变用const声明的变量 */
    26.     'no-this-before-super': 'error', /**在构造函数中禁止在调用super()之前使用this或super 【大多用于React中类的继承】*/
    27.     'no-useless-rename': 'error', /**禁止在 import 和 export 和解构赋值时将引用重命名为相同的名字 */
    28.     'template-curly-spacing': [ 'error', 'always' ], /**模板字符串中,花括号内要有一个或多个空格 */
    29.     'newline-per-chained-call': [ 'error', { 'ignoreChainWithDepth': 3 } ], /**要求方法链中每3个调用必须有一个换行符 */
    30.     'no-lonely-if': 'error', /**禁止 if 语句作为唯一语句出现在 else 语句块中 */
    31.     'no-mixed-operators': 'error', /**禁止混合使用不同的操作符，如错误用法:let foo = a && b || c || d; */
    32.     'no-whitespace-before-property': 'error', /**禁止属性前有空白 */
    33.     'wrap-regex': 'error', /**要求正则表达式要被小括号()包裹起来 */
    34.     'eol-last': [ 'error', 'always' ], /**要求文件末尾须保留一行空行 */
    35.     'require-await': 'error', /**禁止使用不带 await 表达式的 async 函数 */
    36.     'no-redeclare': 'error', /**不要重复声明变量和函数 */
    37.     'no-multi-spaces': 'error', /**禁止出现多个空格 */
    38.     'no-unreachable': 'error', /**禁止在 return、throw、continue 和 break 语句后出现不可达代码 */
    39.     'vue/max-attributes-per-line': [ 'error', {
    40.       'singleline': 4,
    41.       'multiline': {
    42.         'max': 1,
    43.         'allowFirstLine': false
    44.       }
    45.     } ], /**dom标签同行最多写4个属性，超过后须换行；换行后的属性，同行最多写1个属性 */
    46.     'vue/singleline-html-element-content-newline': 'off', /**空标签换行||不换行都可以 */
    47.     'vue/name-property-casing': [0, 'PascalCase' | 'kebab-case'], /**属性首字母大小写不限 */
    48.     'no-param-reassign': 'off',
    49.     'no-use-before-define': 'off',
    50.     'no-tabs': 'error', /**不允许Tab缩进标签 */
    51.     'semi': ['error', 'always', { 'omitLastInOneLineBlock': true }], /**统一使用分号结束语句 */
    52.     'no-unexpected-multiline': 'error', /**避免意外的多行表达式 */
    53.     'no-extra-semi': 'error', /**禁用不必要的分号 */
    54.     'semi-style': ['error', 'last'], /**分号必须写在行尾 */
    55.     'comma-style': ['error', 'last'], /**用逗号分隔的多行结构，将逗号放到行尾 */
    56.     'brace-style': ['error'], /**大括号换行采用 1TBS 风格,具体如：
    57.                               左大括号 { 前面不换行，后面换行；
    58.                               右大括号 } 前面换行；
    59.                               右大括号 } 后面是否换行有两种情况：
    60.                                 如果 } 终结了整个语句，如条件语句、函数或类的主体，则需要换行
    61.                                 如果 } 后面存在 else、catch、while 等语句，或存在逗号、分号、右小括号（)），则不需要换行、
    62.                             */
    63.     'nonblock-statement-body-position': ['error', 'beside'], /**省略大括号的单行语句前不要换行 */
    64.     'dot-location': ['error', 'property'], /**在点号之前换行 */
    65.     'newline-per-chained-call': ['error', { 'ignoreChainWithDepth': 4 }], /**在长方法链式调用时进行换行，最多一行存在4个 */
    66.     // TODO:
    67.     'function-paren-newline': ['error', 'multiline'], /**函数的小括号需遵循一致的换行风格 */
    68.     'implicit-arrow-linebreak': ['error', 'beside'], /**隐式返回的箭头函数体前不要换行 */
    69.     'space-before-blocks': 'error', /**空格风格... */
    70.     'keyword-spacing': ['error', { 'before': true }], /**控制语句的关键字，如 if、else、else if 等，前后各一个空格 */
    71.     'func-call-spacing': ['error', 'never'], /**函数名与调用它的括号间无空格 */
    72.     'space-before-function-paren': ['error', {
    73.       'anonymous': 'ignore',
    74.       'named': 'never',
    75.       'asyncArrow': 'never'
    76.     }], /**声明函数时，对于命名函数，参数的小括号前无空格；对于匿名函数和 async 箭头函数，参数的小括号前有空格 */
    77.     'space-in-parens': ['error', 'never'], /**小括号内部两侧无空格 */
    78.     'computed-property-spacing': ['error', 'never'], /**不允许括号和括号内的值之间有空格 */
    79.     'block-spacing': 'error', /**在同一行上的开放块标记和下一个标记内保持一致的间距 */
    80.     // TODO:
    81.     'template-curly-spacing': 'error', /**模板字符串中的大括号，内部两侧无空格 */
    82.     'template-tag-spacing': 'error', /**模板字符串的 tag 语法，tag 后面无空格 */
    83.     'space-infix-ops': 'error', /**操作符两侧有空格 */
    84.     'space-unary-ops': 'error', /**一元运算符之后/之前的空格保持一致 */
    85.     'rest-spread-spacing': ['error', 'never'], /**强制rest和spread运算符及其表达式之间保持一致的间距 */
    86.     'semi-spacing': 'error', /**分号的前面无空格，后面有空格（语句末尾的分号后面无空格） */
    87.     'comma-spacing': ['error', { 'before': false, 'after': true }], /**逗号的前面无空格，后面有空格 */
    88.     'key-spacing': ['error', { 'beforeColon': false }], /**key, value 之间有且只有一个空格，不允许所谓的「水平对齐」 */
    89.     'padded-blocks': ['error', 'never'], /**块的开始和结束不能是空行 */
    90.     'no-multiple-empty-lines': ['error', { 'max': 2, 'maxEOF': 1 }], /**禁止出现多个（大于 2 个）连续空行, 在文件末尾强制执行最大数量为2行的连续空行 */
    91.     'curly': ['error'], /**多行语句必须用大括号包裹，单行语句推荐用大括号包裹 */
    92.     'no-floating-decimal': 'error', /**不要省略小数点前或小数点后的 0 */
    93.     'no-undef': ['off', { 'typeof': true }], /**不要使用未声明的变量... */
    94.     'no-var': 'error', /**使用 const 或 let 声明变量，不要使用 var */
    95.     'prefer-const': 'off', /**正确地使用 const 和 let，(声明变量时，应优先使用 const，只有当变量会被重新赋值时才使用 let) */
    96.     'no-unused-vars': 'error', /**声明的变量必须被使用 */
    97.     'no-shadow': ['error', { 'hoist': 'never' }], /**禁止变量与外层作用域已存在的变量同名 */
    98.     'no-multi-assign': 'error', /**禁止连续赋值 */
    99.     'no-shadow-restricted-names': 'error', /**禁止使用保留字命名变量 */
    100.     'no-undef-init': 'error', /**不要将变量初始化成 undefined */
    101.     'no-class-assign': 'error', /**禁止对类声明变量重新赋值 */
    102.     'no-const-assign': 'error', /**禁止修改 const 声明的变量 */
    103.     'use-isnan': 'error', /**不允许与“NaN”进行比较 */
    104.     'valid-typeof': ['error', { 'requireStringLiterals': true }], /**同 typeof 表达式结果进行比较的值必须是有效的字符串 */
    105.     'no-multi-str': 'error', /**禁止使用多行字符串 */
    106.     'no-octal': 'error', /**禁用八进制字面量 */
    107.     'no-octal-escape': 'error', /**禁止在字符串字面量中使用八进制转义序列 */
    108.     'no-useless-concat': 'error', /**禁止不必要的字符串拼接 */
    109.     'no-array-constructor': 'error', /**使用字面量创建数组 */
    110.     'no-sparse-arrays': 'error', /**禁用稀疏数组 */
    111.     'no-new-object': 'error', /**使用字面量创建对象 */
    112.     'object-shorthand': [0, 'consistent'], /**[待定...]使用对象属性和方法的简写语法 */
    113.     'quote-props': ['error', 'as-needed'], /**对象字面量的属性名不要用引号包裹，除非包含特殊字符 */
    114.     'no-prototype-builtins': 'error', /**不要直接在对象上调用 Object.prototypes 上的方法 */
    115.     'no-dupe-keys': 'error', /**对象中禁止出现重复命名的 key */
    116.     'no-obj-calls': 'error', /**禁止将全局对象 Math、JSON、Reflect 当作函数进行调用 */
    117.     'no-empty-pattern': 'error', /**不要在解构中出现空模式 */
    118.     'no-useless-computed-key': 'error', /**对象的属性名不要使用无必要的计算属性 */
    119.     'no-useless-rename': 'error', /**禁止在解构 / import / export时进行无用的重命名 */
    120.     'wrap-iife': ['error', 'outside'], /**立即执行函数表达式（IIFE）需要用小括号包裹 */
    121.     'no-func-assign': 'error', /**不要对函数声明重新赋值 */
    122.     'no-useless-return': 'error', /**禁止多余的 return; 语句 */
    123.     'no-confusing-arrow': 'error', /**避免箭头函数可能与比较操作符产生混淆的情况 */
    124.     'no-duplicate-imports': ['error', { 'includeExports': true }], /**不要用多个 import 引入同一模块 */
    125.     'no-unneeded-ternary': 'error', /**避免不必要的三元表达式 */
    126.     'no-fallthrough': 'error', /**不要让 case 语句落空 */
    127.     'no-empty': 'error', /**不要出现空代码块 */
    128.     'no-duplicate-case': 'error', /**switch 语句中禁止出现重复的 case */
    129.     'no-eval': 'error', /**禁止使用 eval,eval 语句存在安全风险，可能导致注入攻击 */
    130.     'spaced-comment': ['error', 'always'], /**注释内容和注释符之间需留有一个空格 */
    131.     'no-global-assign': 'error', /**禁止对原生对象或只读的全局对象进行赋值 */
    132.     'no-invalid-regexp': 'error', /**禁止在 RegExp 构造函数中使用无效的正则表达式 */
    133.     'no-regex-spaces': 'error', /**禁止在正则表达式中出现多个连续空格 */
    134.     'no-proto': 'error', /**禁止使用 proto 属性 */
    135.     'no-script-url': 'error', /**禁止使用 javascript:url，避免脚本恶意注入 */
    136.     'no-delete-var': 'error', /**禁止 delete 变量 */

    StyleLint（css）规范

    StyleLint规范具体见Visual Studio Code代码编辑器插件

    2、visual studio code 编辑器配置自动格式化ESLint和StyleLint，并自动修复
    • 安装vscode 插件 stylelint;
    • vscode setting.json文件中添加以下配置：
    1. "editor.codeActionsOnSave": {
    2.     "source.fixAll": true,
    3.     "source.fixAll.stylelint": true,
    4. },
    5. "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    6. "editor.formatOnSave": true,
    7. "editor.formatOnType": true,
    8. "stylelint.enable": true,
    9. "css.validate": true,
    10. "less.validate": true,
    11. "scss.validate": true,
    12.  
    13. "eslint.format.enable": true,
    14. "eslint.alwaysShowStatus": true,
    15. "eslint.codeAction.showDocumentation": {
    16.     "enable": true
    17. },
    3、git的开发和发版规则

    背景：
    目前是多客户端开发、有pc\小程序，后期可能还会引进其他。pc端平台有公车5.0、机关大后勤、运维平台等、小程序有公车4.0和5.0。虽然开发技术不一样，目前有些业务开发是单人开发，考虑都后期前端融合，会多人涉及多平台业务线开发，为了后期统一管理并可维护，代码版本管理也需要有规范性，减少因代码丢失、冲突等问题引发的项目问题：

    推荐使用终端命令管理版本，标准项目版本管理流程，如下：

    1. commit说明规范：
    2. fix： 修复bug
    3. 如：git commit -m "fix:修复了...bug问题"
    4. feat： 开发新需求、功能
    5. 如：git commit -m "feat：开发了...新需求"
    6. docs： 只修改了文档，不影响代码
    7. 如：git commit -m "docs：修改...文档"
    8. style： 调整代码格式，未修改代码逻辑（比如修改空格、格式化、缺少分号等）
    9. 如：git commit -m "style：修改了...样式"
    10. config： 修改项目配置
    11. 如：git commit -m "config：修改了...项目配置"
    12. merge： git代码合并（解决冲突时...）
    13. 如：git commit -m "merge：解决冲突..."
    4、分支创建规则

    • 所有代码分支须创建和使用须遵循以下规则：

      1. 基于master（当期稳定版分支）分支创建新分支，分支命名规则为：

        【需求】 feat_功能名简称_创建日期

        【bug】 fix_bug概括名简称_创建日期

        【hotfix】hotfix_功能名简称_创建日期

      2. 分支代码提测/发版流程：

        如，当期需求分支在feat_test_xxx，

        【提测流程】：feat_test_xxx提merge请求到test（受保护）分支；

        【发版流程】：test分支提merge请求到master（受保护）分支；

        【紧急hotfix发版流程】：hotfix_xxx_xxx分支提merge请求到master

      3. 代码提交流程：

        即：git push origin branch_xxx之前，必须先pull（即：git pull origin dev）一下远程dev代码，完整操作流程如下：

    1. $ git checkout dev
    2.  
    3. $ git pull origin dev
    4.  
    5. $ git checkout -b branch_yangjinpeng #branch_yangjinpeng分支名自己定
    6.  
    7. 开发新功能...
    8.  
    9. 开发完成后...
    10.  
    11. $ git status -s             #检查所有git缓存区文件是否时自己需要提交的
    12.  
    13. $ git add .                  #添加需要提交的文件到git缓存区
    14.  
    15. $ git commit -m "feat:新组建Base_XXX开发，其他说明xxxxxx"
    16.  
    17. $ git pull origin dev    #避免将冲突提交到远程，在本地解决完与主分支的冲突然后再提交
    18.  
    19. 冲突解决完成...
    20.  
    21. $ git add .
    22.  
    23. $ git commit -m "fix:解决冲突，其他说明xxxxxx"
    24.  
    25. $ git push origin dev
    1.       至此结束一个git版本管理流程
    3.       再继续新组件开发，重新走流程：git checkout dev

  • 相关阅读:
    因高额网络费用，Arbitrum 奥德赛活动暂停，Nitro 发行迫在眉睫
    【STL】map/multimap容器
    hand-springcloud
    开发工程师必备————【Day1】网络编程
    R的seurat和python的scanpy对比学习
    音视频开发14 FFmpeg 视频 相关格式分析 -- H264 NALU格式分析
    探索LangChain Prompt模板：构建高效语言模型交互的秘诀
    推荐20套适合python下django框架的毕业设计毕设课题
    redux太繁琐？一文入门学会使用mobx简化项目的状态管理
    《TCP/IP网络编程》阅读笔记--Timewait状态和Nagle算法
  • 原文地址：https://blog.csdn.net/yanby921005/article/details/133137544