使用騰訊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自動導入的內容爲單引號

   
   
   webstorm-punctation.gif

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

   
   
   webstorm-spaces.gif

   默認自動生成格式：

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

   想要格式：

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

3. 其餘配置自行百度

4. 實際開發過程當中能夠先不啓用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等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。