在開始講 Angular 各個核心知識點之前，想先來講講開發工具 WebStorm 的一些配置以及相應配置文件如 tslint.json 的配置。因為我個人比較註重代碼規範、代碼風格，而對於這些規範，我只有一個觀點：一切需要依賴開發人員的主觀意識去遵守的規範都沒有多大意義。以前做 Androi ...

在開始講 Angular 各個核心知識點之前，想先來講講開發工具 WebStorm 的一些配置以及相應配置文件如 tslint.json 的配置。

因為我個人比較註重代碼規範、代碼風格，而對於這些規範，我只有一個觀點：一切需要依賴開發人員的主觀意識去遵守的規範都沒有多大意義。

以前做 Android 開發時會藉助 AndroidStudio 來強制遵守一些規範，現在前端項目我用的是 WebStorm 開發，這兩個開發工具本質上同源，所以很多功能都差不多。

那麼，這篇就來講一講，如何對 WebStorm 進行一些設置，讓它可以更好的輔助我們遵守風格規範，同時，理清一些比如 tslint.json 的配置，來讓開發工具實時檢測我們寫的代碼是否有很好的遵守規範。

風格規範

Angular 項目的很多文件都是通過 Angular-CLI 工具的 ng 命令來生成的，生成時就有預設一些代碼風格，而且，WebStorm 預設也有一些代碼風格，也許有人覺得直接使用預設的風格來即可。

但對於預設的一些風格規範，我不是很贊同，比如說：

name: string = 'dasu'

簡單的在某個類中聲明這麼一個 name 變數，類型是 string，初始值為 dasu，但預設的 tslint.json 配置的代碼風格會報錯，因為它建議我們，既然已經初始化為字元串類型了，就沒有必要再去聲明變數的類型了。

對於這種預設風格，我個人並不贊同，因為個人習慣了 Java 的風格，對於變數的類型聲明已經習慣了，更何況，這個初始值有可能在未來被去掉，那麼，這時候豈不是還要去加上類型說明？

所以，我個人還是比較習慣聲明變數的類型，不管有沒有對其進行初始化。

以上只是個簡單的例子，預設的一些代碼風格，我個人都不是很習慣，所以，下麵列舉我的個人代碼風格，供大伙借鑒、參考。

不多，只有幾點而已，因為大多直接使用預設的代碼風格，只是預設的一些風格中，我不是很習慣的情況下，才會對其進行修改。

命名方面

私有屬性和方法以 _ 一個下劃線開頭，並添加 private 修飾符
公有屬性和方法使用預設的不加修飾符
與組件對應的模板 html 綁定事件相關的方法，以 on 為首碼
組件的輸出屬性（@Output) 不以 on 為首碼
表格數據的 *ngFor 指令時，建議以 item 命名每一項，如 *ngFor="let item of page?.result" 這樣便於各個頁面的代碼直接複製粘貼

格式

HTML 中使用 "" 雙引號，ts 中使用 '' 單引號
HTML 和 ts 的縮進都使用 4 個空格
局部變數允許使用 let，並不一定強制使用 const
所有變數聲明時直接指明其類型

tslint.json

創建一個新的 Angular 項目時，會自動生成項目的腳手架，裡面包括了各種各樣的文件，其中有一份是 tslint.json 文件，是用來給 WebStorm 實時對代碼進行 lint 檢測時的代碼風格配置。

我修改了部分預設的配置，下麵給出的是所有項的配置，其中帶有註釋的配置項，就是我增加或修改原本預設的配置項，是基於我上面說的個人的一些習慣風格而進行的修改：

"rules": {
    "arrow-return-shorthand": true,
    "adjacent-overload-signatures": true, // override 函數是否集中放置 (新增)
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": false,  // 文件末尾是否需要空新行 (預設 true)
    "encoding": true,  // 文件編碼是否預設 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 // 預設140，我屏幕挺大的，所以並不反感某一行代碼過長，相反，很多代碼因為自動換行後，我個人感覺更不習慣，還不如我手動來選擇從某個地方換行
    ],
    "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, // 是否禁止重覆 case (新增)
    "no-duplicate-imports": true,     // 是否禁止重覆 import (新增)
    "no-duplicate-variable": [        // 是否禁止重覆變數聲明 (新增)
      true,
      "check-parameters"
    ],
    "no-conditional-assignment": true, // 禁止在分支條件判斷中有賦值操作 (新增)
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [  // 是否禁止在有初始值的變數聲明上，增加類型聲明 (預設 true)
      false,
      "ignore-params"
    ],
    "no-mergeable-namespace": true, // 是否禁止重覆的命名空間 (新增)
    "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,      // 是否禁止末尾空格 (預設 true)
    "no-unnecessary-initializer": true,
    "no-unused-expression": false,  // 是否允許無用的表達式存在 (預設 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,  // 不強制使用 const，允許使用 let
    "quotemark": [  // 引號設置，ts 中單引號
      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 文件只是用來在執行 ng lint 命令，或者代碼編程過程中，開發工具實時檢測，當檢測到不符合風格規範的代碼時，進行報錯處理。

雖然可以在執行 ng lint --fix 時添加 --fix 參數來自動修正一些風格錯誤，但這種方式很耗時，而是代碼編寫過程中，也沒法應用。

所以，可以藉助 Webstorm 的一些配置，一些小技巧，來進行代碼的格式化操作，讓開發工具自動幫我們將代碼整理成符合規範的風格。