使用騰訊tslint-config-alloy輕鬆搞定ionic項目中TSLint配置

TSLint核心規則及相關庫

TSLint已經提供了一些核心規則，可是還不夠，因而有人用TSLint提供的自定義接口又自定義了許多規則。如：

• tslint-eslint-rules——ionic項目默認使用這個
• codelyzer——angular項目默認使用這個
• 還有不少

騰訊團隊開源項目tslint-config-alloy

如今有了大量校驗規則，如何使用如何配置呢。咱們使用了騰訊團隊的開源項目tslint-config-alloy，它的配置原則：

• 可以幫助發現代碼錯誤的規則，所有開啓
• 配置不該該依賴於某個具體項目，而應儘量的合理
• 幫助保持團隊的代碼風格統一，而不是限制開發體驗

若是以爲tslint-config-alloy提供的配置不合理，咱們就能夠在本文最開始提到的tslint.json文件(ionic項目根目錄下)中覆蓋它的配置

如何使用tslint-config-alloy

• 項目安裝依賴：npm install --save-dev tslint-eslint-rules tslint-config-alloy

  其中tslint-eslint-rules是規則的實現，它的規則已經繼承了tslint，其中tslint-config-alloy是規則的配置，咱們的配置繼承這裏的配置。

• 配置tslint.json內容以下

  其中rulesDirectory指定規則的實現目錄，能夠配置多個，如你自定義的規則的目錄；其中extends指定咱們繼承的配置，這裏繼承tslint-config-alloy，咱們能夠在rules中添加配置和覆蓋tslint-config-alloy提供的配置。

{
     "extends": "tslint-config-alloy",
     "rules": {
       "no-parameter-properties":false, // 禁止給類的構造函數的參數添加修飾符
       "triple-equals":false,
       "no-debugger": false,
       // 禁止行尾有空格
       "no-trailing-whitespace": false,
       "member-ordering":false,
       "no-this-assignment": [true, {"allowed-names": ["^self$","^that$"], "allow-destructuring": true}],
       // 必須使用箭頭函數，除非是單獨的函數聲明或是命名函數
       "only-arrow-functions": [
         false,
         "allow-declarations",
         "allow-named-functions"
       ],
       // 禁止出現空代碼塊，容許 catch 是空代碼塊
       "no-empty": [
         false,
         "allow-empty-catch"
       ],
       // 禁止無用的類型斷言
       "no-unnecessary-type-assertion": false,
       // 使用 return; 而不是 return undefined;
       "return-undefined": false,
       // 禁止對 array 使用 for in 循環
       "no-for-in-array": false,
       "comment-format": [true, "check-space"], // 單行註釋格式化規則
     },
     "rulesDirectory": [
       "node_modules/tslint-eslint-rules/dist/rules"
     ]
   }

tslint代碼風格規則和ide默認的格式化代碼風格存在衝突如何解決

這時候要麼在tslint.json從新定義規則，要麼修改ide配置，如：

1. webstorm設置import自動導入的內容爲單引號

1. webstorm設置import自動導入大括號兩邊添加空格

默認自動生成格式：

import {AbstractControl} from '@angular/forms';

想要格式：

import { AbstractControl } from '@angular/forms';

1. 其餘配置自行百度
2. 實際開發過程當中能夠先不啓用TSLint，每次提交代碼前或測試開發的代碼時在啓用並修復問題

TSLint註釋標記

• ts文件中使用如下注釋來臨時忽略規則出現的錯誤，參考這裏

  / tslint:disable /——忽略該行如下全部代碼出現的錯誤提示

  / tslint:enable /——當前ts文件從新啓用tslint

  // tslint:disable-line——忽略當前行代碼出現的錯誤提示

  // tslint:disable-next-line——忽略下一行代碼出現的錯誤提示

經常使用的tslint配置項

{
  // 禁止給類的構造函數的參數添加修飾符
  "no-parameter-properties": false,
  // 禁止使用 debugger
  "no-debugger": false,
  // 禁止行尾有空格
  "no-trailing-whitespace": false,
  // 禁止無用的表達式
  "no-unused-expression": true,
  // 定義過的變量必須使用
  "no-unused-variable": true,
  // 變量必須先定義後使用
  "no-use-before-declare": true,
  // 禁止使用 var
  "no-var-keyword": true,
  // 必須使用 === 或 !==，禁止使用 == 或 !=，與 null 比較時除外
  "triple-equals": true,
  // 指定類成員的排序規則
  "member-ordering": false,
  // 禁止將 this 賦值給其餘變量，除非是解構賦值
  "no-this-assignment": [
    false,
    {
      "allowed-names": [
        "^self$",
        "^that$"
      ],
      "allow-destructuring": true
    }
  ],
  // 必須使用箭頭函數，除非是單獨的函數聲明或是命名函數
  "only-arrow-functions": [
    true,
    "allow-declarations",
    "allow-named-functions"
  ],
  // 禁止出現空代碼塊，容許 catch 是空代碼塊
  "no-empty": [
    true,
    "allow-empty-catch"
  ],
  // 禁止無用的類型斷言
  "no-unnecessary-type-assertion": true,
  // 使用 return; 而不是 return undefined;
  "return-undefined": true,
  // 禁止對 array 使用 for in 循環
  "no-for-in-array": true,
  "comment-format": [
    true,
    "check-space"
  ],
  // 單行註釋格式化規則
  // 定義函數時若是用到了覆寫，則必須將覆寫的函數寫到一塊兒
  "adjacent-overload-signatures": true,
  // 禁止對函數的參數從新賦值
  "no-parameter-reassignment": true,
  // if 後面必須有 {，除非是單行 if
  "curly": [
    true,
    "ignore-same-line"
  ],
  // for in 內部必須有 hasOwnProperty
  "forin": true,
  // 禁止在分支條件判斷中有賦值操做
  "no-conditional-assignment": true,
  // 禁止使用 new 來生成 String, Number 或 Boolean
  "no-construct": true,
  // 禁止 super 在一個構造函數中出現兩次
  "no-duplicate-super": true,
  // 禁止在 switch 語句中出現重複測試表達式的 case
  "no-duplicate-switch-case": true,
  // 禁止出現重複的變量定義或函數參數名
  "no-duplicate-variable": [
    true,
    "check-parameters"
  ],
  // 禁止使用 eval
  "no-eval": true,
  // 禁止對對象字面量進行類型斷言（斷言成 any 是容許的）
  "no-object-literal-type-assertion": true,
  // 禁止不必的 return await
  "no-return-await": true,
  // 禁止在數組中出現連續的逗號，如 let foo = [,,]
  "no-sparse-arrays": true,
  // 禁止 throw 字符串，必須 throw 一個 Error 對象
  "no-string-throw": true,
  // switch 的 case 必須 return 或 break
  "no-switch-case-fall-through": true,
  // 使用實例的方法時，必須 bind 到實例上
  "no-unbound-method": [
    true,
    "ignore-static"
  ],
  // 使用 { ...foo, bar: 1 } 代替 Object.assign({}, foo, { bar: 1 })
  // 前者的類型檢查更完善
  "prefer-object-spread": true,
  // parseInt 必須傳入第二個參數
  "radix": true,
  // 必須使用 isNaN(foo) 而不是 foo === NaN
  "use-isnan": true,
  //
  //
  // 可維護性
  // 這些規則能夠增長代碼的可維護性
  //
  // 禁止函數的循環複雜度超過 20，https://en.wikipedia.org/wiki/Cyclomatic_complexity
  "cyclomatic-complexity": [
    true,
    20
  ],
  // 禁止使用廢棄（被標識了 @deprecated）的 API
  "deprecation": true,
  // 一個縮進必須用四個空格替代
  "indent": [
    true,
    "spaces",
    4
  ],
  // 禁止出現重複的 import
  "no-duplicate-imports": true,
  // 禁止一個文件中出現多個相同的 namespace
  "no-mergeable-namespace": true,
  // 文件類型必須時 utf-8
  "encoding": true,
  // import 語句中，關鍵字之間的間距必須是一個空格
  "import-spacing": true,
  // 接口能夠 implement extend 和 merge
  "interface-over-type-literal": true,
  // new 後面只必須有一個空格
  "new-parens": true,
  // 類型斷言必須使用 as Type，禁止使用 <Type>
  // <Type> 容易被理解爲 jsx
  "no-angle-bracket-type-assertion": true,
  // 禁止連續超過三行空行
  "no-consecutive-blank-lines": [
    true,
    3
  ],
  // 禁止使用特殊空白符（好比全角空格）
  "no-irregular-whitespace": true,
  // 禁止使用 JSDoc，由於 TypeScirpt 已經包含了大部分功能
  "no-redundant-jsdoc": true,
  // 禁止使用三斜槓引入類型定義文件
  "no-reference-import": true,
  // 禁止變量定義時賦值爲 undefined
  "no-unnecessary-initializer": true,
  // 小數必須以 0. 開頭，禁止以 . 開頭，而且不能以 0 結尾
  "number-literal-format": true,
  // 必須使用 a = {b} 而不是 a = {b: b}
  "object-literal-shorthand": true,
  // 變量申明必須每行一個，for 循環的初始條件中除外
  "one-variable-per-declaration": [
    true,
    "ignore-for-loop"
  ],
  // if 後的 { 禁止換行
  "one-line": true,
  // 必須使用單引號，jsx 中必須使用雙引號
  "quotemark": [
    true,
    "single",
    "jsx-double",
    "avoid-template",
    "avoid-escape"
  ],
  // 行尾必須有分號
  "semicolon": [
    true,
    "always",
    "ignore-interfaces"
  ],
  // 函數名前必須有空格
  "space-before-function-paren": [
    true,
    "asyncArrow"
  ],
  // 括號內首尾禁止有空格
  "space-within-parens": [
    true,
    0
  ],
  // 禁止 finally 內出現 return, continue, break, throw 等
  // finally 會比 catch 先執行
  "no-unsafe-finally": true
}

---

更多angular1/2/4/五、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。

---

前端最火框架排行榜——小程序二維碼