摘要：空格空格設(shè)置路徑格式化操作時(shí)，會(huì)自動(dòng)在比如方法的右括號(hào)前，賦值語句的等號(hào)兩側(cè)等等這些位置自動(dòng)加上一個(gè)空格，如果我們寫代碼時(shí)漏掉這些空格時(shí)。這樣，就方便我對別人的代碼也直接通過格式化操作來自動(dòng)進(jìn)行風(fēng)格規(guī)范處理。

在開始講 Angular 各個(gè)核心知識(shí)點(diǎn)之前，想先來講講開發(fā)工具 WebStorm 的一些配置以及相應(yīng)配置文件如 tslint.json 的配置。

因?yàn)槲覀€(gè)人比較注重代碼規(guī)范、代碼風(fēng)格，而對于這些規(guī)范，我只有一個(gè)觀點(diǎn)：一切需要依賴開發(fā)人員的主觀意識(shí)去遵守的規(guī)范都沒有多大意義。

以前做 Android 開發(fā)時(shí)會(huì)借助 AndroidStudio 來強(qiáng)制遵守一些規(guī)范，現(xiàn)在前端項(xiàng)目我用的是 WebStorm 開發(fā)，這兩個(gè)開發(fā)工具本質(zhì)上同源，所以很多功能都差不多。

那么，這篇就來講一講，如何對 WebStorm 進(jìn)行一些設(shè)置，讓它可以更好的輔助我們遵守風(fēng)格規(guī)范，同時(shí)，理清一些比如 tslint.json 的配置，來讓開發(fā)工具實(shí)時(shí)檢測我們寫的代碼是否有很好的遵守規(guī)范。

風(fēng)格規(guī)范

Angular 項(xiàng)目的很多文件都是通過 Angular-CLI 工具的 ng 命令來生成的，生成時(shí)就有默認(rèn)一些代碼風(fēng)格，而且，WebStorm 默認(rèn)也有一些代碼風(fēng)格，也許有人覺得直接使用默認(rèn)的風(fēng)格來即可。

但對于默認(rèn)的一些風(fēng)格規(guī)范，我不是很贊同，比如說：

name: string = dasu

簡單的在某個(gè)類中聲明這么一個(gè) name 變量，類型是 string，初始值為 dasu，但默認(rèn)的 tslint.json 配置的代碼風(fēng)格會(huì)報(bào)錯(cuò)，因?yàn)樗ㄗh我們，既然已經(jīng)初始化為字符串類型了，就沒有必要再去聲明變量的類型了。

對于這種默認(rèn)風(fēng)格，我個(gè)人并不贊同，因?yàn)閭€(gè)人習(xí)慣了 Java 的風(fēng)格，對于變量的類型聲明已經(jīng)習(xí)慣了，更何況，這個(gè)初始值有可能在未來被去掉，那么，這時(shí)候豈不是還要去加上類型說明？

所以，我個(gè)人還是比較習(xí)慣聲明變量的類型，不管有沒有對其進(jìn)行初始化。

以上只是個(gè)簡單的例子，默認(rèn)的一些代碼風(fēng)格，我個(gè)人都不是很習(xí)慣，所以，下面列舉我的個(gè)人代碼風(fēng)格，供大伙借鑒、參考。

不多，只有幾點(diǎn)而已，因?yàn)榇蠖嘀苯邮褂媚J(rèn)的代碼風(fēng)格，只是默認(rèn)的一些風(fēng)格中，我不是很習(xí)慣的情況下，才會(huì)對其進(jìn)行修改。

命名方面

• 私有屬性和方法以 _ 一個(gè)下劃線開頭，并添加 private 修飾符
• 公有屬性和方法使用默認(rèn)的不加修飾符
• 與組件對應(yīng)的模板 html 綁定事件相關(guān)的方法，以 on 為前綴
• 組件的輸出屬性（@Output) 不以 on 為前綴
• 表格數(shù)據(jù)的 *ngFor 指令時(shí)，建議以 item 命名每一項(xiàng)，如 *ngFor="let item of page?.result" 這樣便于各個(gè)頁面的代碼直接復(fù)制粘貼

格式

• HTML 中使用 "" 雙引號(hào)，ts 中使用 單引號(hào)
• HTML 和 ts 的縮進(jìn)都使用 4 個(gè)空格
• 局部變量允許使用 let，并不一定強(qiáng)制使用 const
• 所有變量聲明時(shí)直接指明其類型

tslint.json

創(chuàng)建一個(gè)新的 Angular 項(xiàng)目時(shí)，會(huì)自動(dòng)生成項(xiàng)目的腳手架，里面包括了各種各樣的文件，其中有一份是 tslint.json 文件，是用來給 WebStorm 實(shí)時(shí)對代碼進(jìn)行 lint 檢測時(shí)的代碼風(fēng)格配置。

我修改了部分默認(rèn)的配置，下面給出的是所有項(xiàng)的配置，其中帶有注釋的配置項(xiàng)，就是我增加或修改原本默認(rèn)的配置項(xiàng)，是基于我上面說的個(gè)人的一些習(xí)慣風(fēng)格而進(jìn)行的修改：

"rules": {
    "arrow-return-shorthand": true,
    "adjacent-overload-signatures": true, // override 函數(shù)是否集中放置 (新增)
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": false,  // 文件末尾是否需要空新行 (默認(rèn) true)
    "encoding": true,  // 文件編碼是否默認(rèn) UTF-8 (新增)
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      240 // 默認(rèn)140，我屏幕挺大的，所以并不反感某一行代碼過長，相反，很多代碼因?yàn)樽詣?dòng)換行后，我個(gè)人感覺更不習(xí)慣，還不如我手動(dòng)來選擇從某個(gè)地方換行
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-consecutive-blank-lines": [  // 空白行最多幾行 (新增)
      true,
      3
    ],
    "no-debugger": false,
    "no-duplicate-super": true,
    "no-duplicate-switch-case": true, // 是否禁止重復(fù) case (新增)
    "no-duplicate-imports": true,     // 是否禁止重復(fù) import (新增)
    "no-duplicate-variable": [        // 是否禁止重復(fù)變量聲明 (新增)
      true,
      "check-parameters"
    ],
    "no-conditional-assignment": true, // 禁止在分支條件判斷中有賦值操作 (新增)
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [  // 是否禁止在有初始值的變量聲明上，增加類型聲明 (默認(rèn) true)
      false,
      "ignore-params"
    ],
    "no-mergeable-namespace": true, // 是否禁止重復(fù)的命名空間 (新增)
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": false,      // 是否禁止末尾空格 (默認(rèn) true)
    "no-unnecessary-initializer": true,
    "no-unused-expression": false,  // 是否允許無用的表達(dá)式存在 (默認(rèn) true)
    "no-unused-variable": false,   // 是否允許無用的變量存在 (新增)
    "no-use-before-declare": true,
    "no-unsafe-finally": true,
    "no-for-in-array": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": false,  // 不強(qiáng)制使用 const，允許使用 let
    "quotemark": [  // 引號(hào)設(shè)置，ts 中單引號(hào)
      true,
      "single",
      "jsx-double",
      "avoid-escape",
      "avoid-template"
    ],
    "radix": true,
    "semicolon": [
      true,
      "always",
      "ignore-interfaces"
    ],
    "space-within-parens": [
      true,
      0
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "no-output-on-prefix": true,
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }

tslint.json 文件只是用來在執(zhí)行 ng lint 命令，或者代碼編程過程中，開發(fā)工具實(shí)時(shí)檢測，當(dāng)檢測到不符合風(fēng)格規(guī)范的代碼時(shí)，進(jìn)行報(bào)錯(cuò)處理。

雖然可以在執(zhí)行 ng lint --fix 時(shí)添加 --fix 參數(shù)來自動(dòng)修正一些風(fēng)格錯(cuò)誤，但這種方式很耗時(shí)，而是代碼編寫過程中，也沒法應(yīng)用。

所以，可以借助 Webstorm 的一些配置，一些小技巧，來進(jìn)行代碼的格式化操作，讓開發(fā)工具自動(dòng)幫我們將代碼整理成符合規(guī)范的風(fēng)格。

WebStorm 小技巧

下面介紹的這些配置項(xiàng)，都是為代碼的格式化操作（快捷鍵：Ctrl + Alt + L）服務(wù)的，意思也就是說，當(dāng)我們?yōu)楫?dāng)前文件進(jìn)行代碼格式化操作時(shí)，WebStorm 就會(huì)自動(dòng)按照我們的這些配置項(xiàng)來自動(dòng)整理代碼，將代碼整理成遵循規(guī)范的風(fēng)格。

標(biāo)點(diǎn)符號(hào)（引號(hào)，分號(hào)，逗號(hào)）

設(shè)置路徑：Settings -> Editor -> Code Style -> TypeScript -> Punctuation

這里配置項(xiàng)很少，就三個(gè)，分別是配置分號(hào)，引號(hào)和逗號(hào)。

• 第一行用來配置每行代碼末尾是否需要有 ; 分號(hào)，且格式化時(shí)是否對舊代碼（已經(jīng)過格式化的代碼）進(jìn)行處理。

• 第二行用來配置，代碼中是使用 單引號(hào)，還是 "" 雙引號(hào)（默認(rèn)是雙引號(hào)），且格式化時(shí)是否對舊代碼（已經(jīng)過格式化的代碼）進(jìn)行處理。

• 第三行用來配置是否需要保留，還是去掉數(shù)組或?qū)ο髮傩粤斜碇校詈笠豁?xiàng)末尾的逗號(hào)。

我的代碼風(fēng)格是 HTML 中使用 "" 雙引號(hào)，TypeScript 中使用 單引號(hào)，但使用工具自動(dòng)生成 ts 文件時(shí)，引號(hào)默認(rèn)是雙引號(hào)，或者某些時(shí)候某些因素下，代碼中出現(xiàn)一些雙引號(hào)，這時(shí)候，通過修改這個(gè)配置，在每次格式化代碼時(shí)，就都會(huì)自動(dòng)將雙引號(hào)轉(zhuǎn)成單引號(hào)，方便、高效。

空格

設(shè)置路徑：Settings -> Editor -> Code Style -> TypeScript -> Spaces

格式化操作時(shí)，會(huì)自動(dòng)在比如方法的 { 右括號(hào)前，賦值語句的 = 等號(hào)兩側(cè)等等這些位置自動(dòng)加上一個(gè)空格，如果我們寫代碼時(shí)漏掉這些空格時(shí)。

這個(gè)功能其實(shí)是根據(jù)這里的配置項(xiàng)來決定的，這里面默認(rèn)勾選了很多，基本符合常見的風(fēng)格規(guī)范：

對于空格，我沒有改掉默認(rèn)格式化時(shí)空格風(fēng)格，只是增加了幾種場景也需要自動(dòng)進(jìn)行空格處理，分別是：

• Within -> ES6 import/export braces

導(dǎo)入語句 {} 距離內(nèi)容之間增加一個(gè)空格，默認(rèn)是沒有的，如：

• Within -> Object literal braces 勾選
• Within -> Object literal type braces 勾選

這兩個(gè)是對象內(nèi)部的空格處理，默認(rèn)也是沒有的，如：

對齊和換行

設(shè)置路徑：Settings -> Editor -> Code Style -> TypeScript -> Wrapping and Braces

這里是設(shè)置一些對齊或者換行策略：

• Chained method calls 設(shè)置為 Wrap always
• Chained method calls -> Align when multiline 勾選
• Chained method calls -> : on new line 勾選

上面三個(gè)是用來設(shè)置方法鏈時(shí)，代碼的整理，默認(rèn)不做處理，可以改成格式化時(shí)，自動(dòng)將每層的方法調(diào)用進(jìn)行換行，并且對齊處理，個(gè)人建議。

• if() statement -> Force braces 設(shè)置為 always

這個(gè)是設(shè)置，即使 if 代碼塊內(nèi)只有簡單的一行代碼，也要自動(dòng)為其加上大括號(hào)處理，默認(rèn)是不做處理。

• Ternaty operation 設(shè)置為 Chop down if long
• Ternaty operation -> Align when multiline 勾選
• Ternaty operation -> ? and : signs on next line 勾選

這個(gè)是用來設(shè)置 ? : 運(yùn)算符的處理，上面的設(shè)置意思是，當(dāng)代碼過長時(shí)，自動(dòng)將 ? 和 : 的代碼換行，并對其處理，默認(rèn)是不做處理。

• Array initializer 設(shè)置為 Chop down if long
• Array initializer -> Align when multiline 勾選
• Array initializer -> New line after [ 勾選
• Array initializer -> Place ] on new line 勾選

這個(gè)是用來設(shè)置數(shù)組的處理，以上配置的意思是，當(dāng)數(shù)組過長時(shí)，自動(dòng)將每一項(xiàng)進(jìn)行換行并對其處理，[] 多帶帶占據(jù)一行：

[圖片上傳失敗...(image-e2d886-1553268791353)]

對于 Angular 中的 @NgModel 的文件來說，經(jīng)常會(huì)有這種風(fēng)格需要，所以就直接這么配置了。

• Objects -> Align 設(shè)置為 On Value
• Variable declarations 設(shè)置為 Chop down if long
• Variable declarations -> Align 設(shè)置為 when grouped

這個(gè)是用來設(shè)置變量或者對象的屬性列表的賦值語句的對齊模式，如：

同理，也可以設(shè)置 CSS 的樣式屬性的對齊方式：

以上，只是我的個(gè)人風(fēng)格習(xí)慣，大體上，我都直接按照默認(rèn)的風(fēng)格規(guī)范來遵守，但在個(gè)把一些項(xiàng)上，個(gè)人有不同的看法和習(xí)慣，所以修改掉了默認(rèn)的風(fēng)格配置。

另外，我比較習(xí)慣使用格式化代碼操作，而且一個(gè)項(xiàng)目中，代碼全是我自己寫的可能性也很小，別人寫的代碼或多或少都存在一些風(fēng)格規(guī)范問題，也沒辦法強(qiáng)制性要求他人必須遵守，所以，就瞎折騰了下 WebStorm 的相關(guān)配置。

這樣，就方便我對別人的代碼也直接通過格式化操作來自動(dòng)進(jìn)行風(fēng)格規(guī)范處理。

大家好，我是 dasu，歡迎關(guān)注我的公眾號(hào)（dasuAndroidTv），公眾號(hào)中有我的聯(lián)系方式，歡迎有事沒事來嘮嗑一下，如果你覺得本篇內(nèi)容有幫助到你，可以轉(zhuǎn)載但記得要關(guān)注，要標(biāo)明原文哦，謝謝支持~