Angular（03）-- lint風格規範和WebStorm小技巧

時間 2019-11-18

標籤 angular lint 風格規範 webstorm 技巧欄目 AngularJS 简体版

原文原文鏈接

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

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

之前作 Android 開發時會藉助 AndroidStudio 來強制遵照一些規範，如今前端項目我用的是 WebStorm 開發，這兩個開發工具本質上同源，因此不少功能都差很少。web

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

風格規範

Angular 項目的不少文件都是經過 Angular-CLI 工具的 ng 命令來生成的，生成時就有默認一些代碼風格，並且，WebStorm 默認也有一些代碼風格，也許有人以爲直接使用默認的風格來便可。編程

但對於默認的一些風格規範，我不是很贊同，好比說：json

name: string = 'dasu'數組

簡單的在某個類中聲明這麼一個 name 變量，類型是 string，初始值爲 dasu，但默認的 tslint.json 配置的代碼風格會報錯，由於它建議咱們，既然已經初始化爲字符串類型了，就沒有必要再去聲明變量的類型了。app

對於這種默認風格，我我的並不贊同，由於我的習慣了 Java 的風格，對於變量的類型聲明已經習慣了，更況且，這個初始值有可能在將來被去掉，那麼，這時候豈不是還要去加上類型說明？curl

因此，我我的仍是比較習慣聲明變量的類型，無論有沒有對其進行初始化。webstorm

以上只是個簡單的例子，默認的一些代碼風格，我我的都不是很習慣，因此，下面列舉個人我的代碼風格，供大夥借鑑、參考。

很少，只有幾點而已，由於大多直接使用默認的代碼風格，只是默認的一些風格中，我不是很習慣的狀況下，纔會對其進行修改。

命名方面

私有屬性和方法以 _ 一個下劃線開頭，並添加 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 的一些配置，一些小技巧，來進行代碼的格式化操做，讓開發工具自動幫咱們將代碼整理成符合規範的風格。