TSLint核心規(guī)則及相關(guān)庫
TSLint已經(jīng)提供了一些核心規(guī)則，但是還不夠竖般，于是有人用TSLint提供的自定義接口又自定義了許多規(guī)則。如：
- tslint-eslint-rules——ionic項目默認(rèn)使用這個
- codelyzer——angular項目默認(rèn)使用這個
- 還有很多
騰訊團(tuán)隊開源項目tslint-config-alloy
現(xiàn)在有了大量校驗規(guī)則茶鹃，如何使用如何配置呢涣雕。我們使用了騰訊團(tuán)隊的開源項目tslint-config-alloy，它的配置原則：
- 能夠幫助發(fā)現(xiàn)代碼錯誤的規(guī)則闭翩，全部開啟
- 配置不應(yīng)該依賴于某個具體項目挣郭，而應(yīng)盡可能的合理
- 幫助保持團(tuán)隊的代碼風(fēng)格統(tǒng)一，而不是限制開發(fā)體驗
如果覺得tslint-config-alloy提供的配置不合理疗韵，我們就可以在本文最開始提到的tslint.json文件(ionic項目根目錄下)中覆蓋它的配置
如何使用tslint-config-alloy
-
項目安裝依賴：npm install --save-dev tslint-eslint-rules tslint-config-alloy
其中tslint-eslint-rules是規(guī)則的實現(xiàn)兑障，它的規(guī)則已經(jīng)繼承了tslint，其中tslint-config-alloy是規(guī)則的配置蕉汪，我們的配置繼承這里的配置旺垒。
-
配置tslint.json內(nèi)容如下
其中rulesDirectory指定規(guī)則的實現(xiàn)目錄，可以配置多個肤无，如你自定義的規(guī)則的目錄先蒋；其中extends指定我們繼承的配置，這里繼承tslint-config-alloy宛渐，我們可以在rules中添加配置和覆蓋tslint-config-alloy提供的配置竞漾。
{
"extends": "tslint-config-alloy",
"rules": {
"no-parameter-properties":false, // 禁止給類的構(gòu)造函數(shù)的參數(shù)添加修飾符
"triple-equals":false,
"no-debugger": false,
// 禁止行尾有空格
"no-trailing-whitespace": false,
"member-ordering":false,
"no-this-assignment": [true, {"allowed-names": ["^self$","^that$"], "allow-destructuring": true}],
// 必須使用箭頭函數(shù)，除非是單獨(dú)的函數(shù)聲明或是命名函數(shù)
"only-arrow-functions": [
false,
"allow-declarations",
"allow-named-functions"
],
// 禁止出現(xiàn)空代碼塊窥翩，允許 catch 是空代碼塊
"no-empty": [
false,
"allow-empty-catch"
],
// 禁止無用的類型斷言
"no-unnecessary-type-assertion": false,
// 使用 return; 而不是 return undefined;
"return-undefined": false,
// 禁止對 array 使用 for in 循環(huán)
"no-for-in-array": false,
"comment-format": [true, "check-space"], // 單行注釋格式化規(guī)則
},
"rulesDirectory": [
"node_modules/tslint-eslint-rules/dist/rules"
]
}
tslint代碼風(fēng)格規(guī)則和ide默認(rèn)的格式化代碼風(fēng)格存在沖突如何解決
這時候要么在tslint.json重新定義規(guī)則业岁，要么修改ide配置，如：
-
webstorm設(shè)置import自動導(dǎo)入的內(nèi)容為單引號
webstorm-punctation.gif -
webstorm設(shè)置import自動導(dǎo)入大括號兩邊添加空格
webstorm-spaces.gif默認(rèn)自動生成格式：
import {AbstractControl} from '@angular/forms';想要格式：
import { AbstractControl } from '@angular/forms'; 其他配置自行百度
實際開發(fā)過程中可以先不啟用TSLint寇蚊，每次提交代碼前或測試開發(fā)的代碼時在啟用并修復(fù)問題
TSLint注釋標(biāo)記
-
ts文件中使用以下注釋來臨時忽略規(guī)則出現(xiàn)的錯誤笔时，參考這里
/* tslint:disable */——忽略該行以下所有代碼出現(xiàn)的錯誤提示
/* tslint:enable */——當(dāng)前ts文件重新啟用tslint
// tslint:disable-line——忽略當(dāng)前行代碼出現(xiàn)的錯誤提示
// tslint:disable-next-line——忽略下一行代碼出現(xiàn)的錯誤提示
常用的tslint配置項
{
// 禁止給類的構(gòu)造函數(shù)的參數(shù)添加修飾符
"no-parameter-properties": false,
// 禁止使用 debugger
"no-debugger": false,
// 禁止行尾有空格
"no-trailing-whitespace": false,
// 禁止無用的表達(dá)式
"no-unused-expression": true,
// 定義過的變量必須使用
"no-unused-variable": true,
// 變量必須先定義后使用
"no-use-before-declare": true,
// 禁止使用 var
"no-var-keyword": true,
// 必須使用 === 或 !==，禁止使用 == 或 !=仗岸，與 null 比較時除外
"triple-equals": true,
// 指定類成員的排序規(guī)則
"member-ordering": false,
// 禁止將 this 賦值給其他變量允耿，除非是解構(gòu)賦值
"no-this-assignment": [
false,
{
"allowed-names": [
"^self$",
"^that$"
],
"allow-destructuring": true
}
],
// 必須使用箭頭函數(shù)借笙，除非是單獨(dú)的函數(shù)聲明或是命名函數(shù)
"only-arrow-functions": [
true,
"allow-declarations",
"allow-named-functions"
],
// 禁止出現(xiàn)空代碼塊，允許 catch 是空代碼塊
"no-empty": [
true,
"allow-empty-catch"
],
// 禁止無用的類型斷言
"no-unnecessary-type-assertion": true,
// 使用 return; 而不是 return undefined;
"return-undefined": true,
// 禁止對 array 使用 for in 循環(huán)
"no-for-in-array": true,
"comment-format": [
true,
"check-space"
],
// 單行注釋格式化規(guī)則
// 定義函數(shù)時如果用到了覆寫较锡，則必須將覆寫的函數(shù)寫到一起
"adjacent-overload-signatures": true,
// 禁止對函數(shù)的參數(shù)重新賦值
"no-parameter-reassignment": true,
// if 后面必須有 {业稼，除非是單行 if
"curly": [
true,
"ignore-same-line"
],
// for in 內(nèi)部必須有 hasOwnProperty
"forin": true,
// 禁止在分支條件判斷中有賦值操作
"no-conditional-assignment": true,
// 禁止使用 new 來生成 String, Number 或 Boolean
"no-construct": true,
// 禁止 super 在一個構(gòu)造函數(shù)中出現(xiàn)兩次
"no-duplicate-super": true,
// 禁止在 switch 語句中出現(xiàn)重復(fù)測試表達(dá)式的 case
"no-duplicate-switch-case": true,
// 禁止出現(xiàn)重復(fù)的變量定義或函數(shù)參數(shù)名
"no-duplicate-variable": [
true,
"check-parameters"
],
// 禁止使用 eval
"no-eval": true,
// 禁止對對象字面量進(jìn)行類型斷言（斷言成 any 是允許的）
"no-object-literal-type-assertion": true,
// 禁止沒必要的 return await
"no-return-await": true,
// 禁止在數(shù)組中出現(xiàn)連續(xù)的逗號，如 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 必須傳入第二個參數(shù)
"radix": true,
// 必須使用 isNaN(foo) 而不是 foo === NaN
"use-isnan": true,
//
//
// 可維護(hù)性
// 這些規(guī)則可以增加代碼的可維護(hù)性
//
// 禁止函數(shù)的循環(huán)復(fù)雜度超過 20，https://en.wikipedia.org/wiki/Cyclomatic_complexity
"cyclomatic-complexity": [
true,
20
],
// 禁止使用廢棄（被標(biāo)識了 @deprecated）的 API
"deprecation": true,
// 一個縮進(jìn)必須用四個空格替代
"indent": [
true,
"spaces",
4
],
// 禁止出現(xiàn)重復(fù)的 import
"no-duplicate-imports": true,
// 禁止一個文件中出現(xiàn)多個相同的 namespace
"no-mergeable-namespace": true,
// 文件類型必須時 utf-8
"encoding": true,
// import 語句中骡楼，關(guān)鍵字之間的間距必須是一個空格
"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,
// 禁止連續(xù)超過三行空行
"no-consecutive-blank-lines": [
true,
3
],
// 禁止使用特殊空白符（比如全角空格）
"no-irregular-whitespace": true,
// 禁止使用 JSDoc，因為 TypeScirpt 已經(jīng)包含了大部分功能
"no-redundant-jsdoc": true,
// 禁止使用三斜杠引入類型定義文件
"no-reference-import": true,
// 禁止變量定義時賦值為 undefined
"no-unnecessary-initializer": true,
// 小數(shù)必須以 0. 開頭鸟整，禁止以 . 開頭引镊，并且不能以 0 結(jié)尾
"number-literal-format": true,
// 必須使用 a = 而不是 a = {b: b}
"object-literal-shorthand": true,
// 變量申明必須每行一個吃嘿，for 循環(huán)的初始條件中除外
"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"
],
// 函數(shù)名前必須有空格
"space-before-function-paren": [
true,
"asyncArrow"
],
// 括號內(nèi)首尾禁止有空格
"space-within-parens": [
true,
0
],
// 禁止 finally 內(nèi)出現(xiàn) return, continue, break, throw 等
// finally 會比 catch 先執(zhí)行
"no-unsafe-finally": true
}
前端面試題每日更新梦重，歡迎參與討論兑燥，地址：https://github.com/daily-interview/fe-interview。
更多angular1/2/4/5琴拧、ionic1/2/3降瞳、react、vue蚓胸、微信小程序挣饥、nodejs等技術(shù)文章、視頻教程和開源項目沛膳，請關(guān)注微信公眾號——全棧弄潮兒扔枫。
image
腦筋急轉(zhuǎn)彎：
image
生活小竅門
image
