傳送門
TSLlint型奥，tslint-eslint-rules务蝠，tslint-config-alloy诅需，eslint-config-alloy信殊，ionic2_tabs
前言
- 在ionic2項(xiàng)目根目錄下有一個tslint.json文件，這個文件是做什么用的,怎么用.本文就此講解一下
- 由于JavaScript語言的靈活性伞广，每個程序員代碼風(fēng)格千差萬別,為了統(tǒng)一代碼風(fēng)格于是就有人出了一些腳本工具拣帽，這些工具不僅能對代碼風(fēng)格進(jìn)行統(tǒng)一而且還能對JavaScript代碼中的一些陷阱給予提示
- JavaScript校驗(yàn)工具有很多疼电，目前最流行的是ESLint，但是ionic項(xiàng)目使用的是TypeScript和JavaScript有點(diǎn)差異减拭，于是有人模仿ESLint開發(fā)了TSLint用于校驗(yàn)TypeScript代碼
先感受一下校驗(yàn)效果
- 如下圖1定義了規(guī)則
禁止使用 var聲明變量蔽豺，則在圖2webstrom中可以看到,用var聲明變量會有錯誤提示
圖1
圖2
關(guān)于TSLint
- TSLint能干什么
- TSLint提供一些廣泛支持的核心校驗(yàn)規(guī)則
- 預(yù)留了自定義規(guī)則的接口
- 可以輸出驗(yàn)證失敗的規(guī)則清單
- 可以自動修復(fù)部分驗(yàn)證規(guī)則
- 提供了各種開發(fā)工具插件與其相集成
- TSLint已經(jīng)提供了一些核心規(guī)則，但是還不夠拧粪，于是有人用TSLint提供的自定義接口又自定義了許多規(guī)則修陡。如：
- tslint-eslint-rules——ionic項(xiàng)目默認(rèn)使用這個
- codelyzer——angular項(xiàng)目默認(rèn)使用這個
- 還有好多如下圖
- 現(xiàn)在有了大量校驗(yàn)規(guī)則，如何使用既们，也就是如何配置又是麻煩事了濒析，起碼需要理解每個規(guī)則的含義才能配置吧，并且都是英文啊啥纸，理解難度大。這個問題顯而易見婴氮，所以有人已經(jīng)幫我們配置好了斯棒。這就是tslint-config-alloy，這里面的所有配置都有中文注釋主经，它的配置原則：
- 能夠幫助發(fā)現(xiàn)代碼錯誤的規(guī)則荣暮，全部開啟
- 配置不應(yīng)該依賴于某個具體項(xiàng)目，而應(yīng)盡可能的合理
- 幫助保持團(tuán)隊(duì)的代碼風(fēng)格統(tǒng)一罩驻，而不是限制開發(fā)體驗(yàn)
- 如果覺得
tslint-config-alloy提供的配置不合理穗酥，我們就可以在本文最開始提到的tslint.json文件(ionic項(xiàng)目根目錄下)中覆蓋它的配置
掃盲：前面說tslint提供了大量規(guī)則,其實(shí)是說的是規(guī)則的實(shí)現(xiàn),我們需要配置,但是還有人不知道什么是規(guī)則,什么是配置;如:
不允許使用var的規(guī)則的實(shí)現(xiàn)看這里，它的配置需要在tslint.json文件中配置'no-var-keyword': true惠遏，設(shè)置false則不校驗(yàn),這就是配置
項(xiàng)目實(shí)戰(zhàn)
-
環(huán)境依賴
node v7+或者yarn v1.0+
項(xiàng)目安裝依賴：
cnpm install --save-dev tslint-eslint-rules tslint-config-alloy
其中
tslint-eslint-rules是規(guī)則的實(shí)現(xiàn)砾跃，它的規(guī)則已經(jīng)繼承了tslint，其中tslint-config-alloy是規(guī)則的配置节吮，我們的配置繼承這里的配置抽高。
- ionic項(xiàng)目默認(rèn)已經(jīng)安裝了tslint,最好在
node_modules目錄中檢查一下,未安裝則安裝：cnpm install --save-dev tslint
檢查項(xiàng)目是否安裝tslint
- 配置
tslint.json內(nèi)容如下
{
"extends": "tslint-config-alloy",
"rules": {
},
"rulesDirectory": [
"node_modules/tslint-eslint-rules/dist/rules"
]
}
其中
rulesDirectory指定規(guī)則的實(shí)現(xiàn)目錄，可以配置多個透绩，如你自定義的規(guī)則的目錄翘骂；其中extends指定我們繼承的配置，這里繼承tslint-config-alloy帚豪，我們可以在rules中添加配置和覆蓋tslint-config-alloy提供的配置碳竟。更多詳情看這里
-
webstorm啟用tslint，其他ide參考這里
-
找個ts文件測試一下吧
如果你的項(xiàng)目是一個老項(xiàng)目狸臣，啟用了TSLint會有大量錯誤
-
使用自動修復(fù)命令
tslint --fix -c ./tslint.json 'src/**/*.ts'莹桅，如下圖，其中Fixed是自動修復(fù)的文件固棚，ERROR是不能自動修復(fù)只能手動修復(fù)的文件统翩，Warning是校驗(yàn)規(guī)則實(shí)現(xiàn)不全仙蚜，未來更新依賴可能會修復(fù)
請認(rèn)真閱讀tslint-config-alloy內(nèi)容，關(guān)閉或重寫一些太嚴(yán)格的規(guī)則厂汗，如代碼中允許出現(xiàn)
debugger委粉，可以參考我的項(xiàng)目手動修復(fù)代碼
有些代碼風(fēng)格規(guī)則和ide默認(rèn)的格式化代碼風(fēng)格存在沖突，這時候要么在
tslint.json重新定義規(guī)則娶桦，要么修改ide配置贾节，如：
- webstorm設(shè)置
import自動導(dǎo)入的內(nèi)容為單引號
- webstorm設(shè)置
import自動導(dǎo)入大括號兩邊添加空格
默認(rèn)自動生成格式：
import {AbstractControl} from '@angular/forms';
想要格式：
import { AbstractControl } from '@angular/forms';
- 其他配置自行百度
- 實(shí)際開發(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)的錯誤提示
關(guān)于自定義規(guī)則
- 參考
- TSLint提供了一個comment-format（單行注釋格式化規(guī)則）,如下
"rules": {
"comment-format": [true, "check-space"]
}
-
當(dāng)注釋描述不以空格開頭則報(bào)錯栗涂，如下圖，但是這個規(guī)則沒有實(shí)現(xiàn)自動修復(fù)功能祈争，所以我這里實(shí)現(xiàn)
實(shí)現(xiàn)自定義規(guī)則斤程，單行注釋不以空格開頭則自動添加空格，代碼如下圖菩混，源碼在這里
-
使用配置
-
效果
