Angular: 執行ng lint后如何快速修改錯誤


當我第一次被分配到“修正執行ng lint語句后的錯誤”這項任務前,我就被導師提前告知這是一個很無聊的任務,當我開始后,我發現其實有一些辦法可以加快這個無聊單調的工作。接下來,我就分享一下我的經驗。

首先還是要來講一講 ng lint 的相關知識:

  1. 通過Angular CLI的執行語句 ng new XXX 創建新項目后,目錄中會包含一個tslint.json文件,這個文件就是用來定義一個統一的代碼風格。
  2. 有一些錯誤可以通過 ng lint -fix 自動解決,這個過程也許比較漫長。能自動修復的錯誤包括:missing whitespace, Missing semicolon, " should be ', misplaced 'else', file should end with a newline, trailing whitespace, Unnecessary semicolon, Identifier 'XXX' is never reassigned 等。 

但是再次執行 ng lint 后仍然還有很多錯誤沒有被修正,這時候我們就得手動消滅錯誤

如果你有很多錯誤的話,你會發現檢測出的錯誤會使你眼花繚亂,因為也許是好幾百條甚至上千條的信息以文件名及行的順序列出,一個錯誤一行,有完整的錯誤所在位置[行,列],但是沒有根據相同錯誤歸類,而我認為,按錯誤種類一一解決是最有效率的方式了。

我的訣竅就是利用Word或Pages等文檔軟件進行錯誤信息的簡化(也可順便通過編號得知錯誤個數讓自己心中有數),然后再利用Excel篩選出同類錯誤,從最容易修改的錯誤着手。另外,我使用的代碼文件編輯器是Sublime Text 3,下面也會涉及到這個軟件的某些功能的使用,故在此說明一下。

 

具體流程

1. 錯誤信息的簡化

把所有的錯誤信息復制到文檔中,換成清晰的字體格式,然后可以刪除沒必要的重復路徑的信息,可以利用查找替換的功能將所有路徑重復的前面部分用空格或無替換就能刪掉這些令人眼花的信息。然后可以選中所有后點數字列表模式,最后一行的數字當然就是錯誤總數啦。

2. 將信息存儲在Excel智能表格中

將文檔中所有信息復制到Excel中,因為在Excel中轉行就會使信息保存到下一行,所以這些信息就自然而然的被分到了一個N*1的表格中了,趁着復制的內容還是全選狀態時點擊表格模式(Format as Table),這是這些信息就在一個智能的表格中了。你還能選擇表格的風格,有一些好看的模版可以直接使用,選擇自己喜歡的顏色也有利於心情愉悅。

3. 篩選出同類錯誤

接下來就可以掃一眼有什么錯誤是你覺得能簡單消滅的,然后點擊表格自動生成的header右側的小箭頭,然后在跳出來的窗口中的search中輸入自己想要解決的錯誤。

 

4. 我的解決順序以及每個錯誤涉及到的原理和解決方法

1)== should be ===,!= should be !==

這一點確保了辨別相同時等號兩邊的類型必須相同。比如 '2' == 2 的結果是true, '2' === 2 的結果就是false了。所以寫代碼時要養成用===來寫判別的習慣,如果真的有左側是string的數字,右側是number的數字,則可以用 +'2' === 2 或者 Number('2') === 2 的形式書寫。當然,如果你已經確定左側的變量與右側你想用於比較的值是同一種類型的話,就不需要類型的轉換了。!=與!==涉及到的概念一致。有一個快速解決此類問題的訣竅:通過右擊選中項目app文件夾選擇在該文件中查找,然后輸入  ==  (記得左右兩邊的空格),然后就可以快速查看每一處是否都可以之間改成===,如果可以,那么就可以用一鍵替換的方式直接將  ==  換成  ===  。當然,能用此方法的前提就是已經執行果ng lint命令了,這樣才能確保每個==左右都有一個空格,才可以在查找時不出差錯。

2)Too much space after 'import', Too much space before 'from'

這類錯誤就沒什么好講的,就把所有指出的地方的多個空格都改成一個空格就好了。我在該這類錯誤時發現我們公司的項目代碼中有好多component的import部分有很多相同的部分,因為都是復制來復制去的,所以多余的空格也到處都是,結果這個錯誤解決后,我的錯誤總數瞬間少了很多。

3)comment must start with a space

這類問題也沒有技術含量,但是也沒有什么快速的方法可以解決,就在所有指出的代碼行中第一個雙斜杠//后加一個空格。

4)variable "XXX" used before declaration

需要將提到的變量的聲明移至使用到該變量的地方前面,最簡單的方法就是將變量的聲明都放在最前面。

5)exceeds maximum line length of 140

這類問題只是定義了每行字數的最大值,140可以換成自定義的任何數字。在ts文件的最開始可以加上 // tslint:disable:max-line-length 則可以忽略此文件中每行字數限制問題,有時候,有些文件確實不適合限制每行的字數。

6)Missing radix parameter

當你使用 parseInt(string, radix) 函數時,如果你沒有定義radix就會出現這個錯誤。這個函數是將一個string轉換成數字,radix就是表示進制,比如 parseInt('10', 10) 就是將字符10轉換成十進制的數字10。

7)Implement lifecycle hook interface ...

當你使用了ngAfterViewInit, ngDestroy之類的lifecycle hook后卻沒有implement時,就會發生此類問題。解決辦法很簡單,只需要把對應的implements上就好啦,比如,如果你使用了ngDestroy,那你就需要import OnDestroy並且implements它。

8)This import is blacklisted, import a submodule instead

我遇到的錯誤發生的地方主要在 import { Observable } from 'rxjs/Rx'; ,進過搜索后,找到的解決辦法就是將它改成 import { Observable } from 'rxjs/Observable'; 。但是用相似方法去修改 import { Subject } from 'rxjs/Rx'; 時卻導致了項目別的錯誤,目前還不清楚原因。

9)The selector of the component XXX should have prefix app / The selector of the component XXX should be named kebab-case and include dash

這兩類錯誤都出自component定義selector名稱時不符合標准。按照默認的標准,selector的名字應當如"app-example", "app-another-example",當然你也可以在tslint.json文件中自定義app以外的前綴。

 

后記:當然,還有很多錯誤沒有列出,也許是我的項目恰巧沒有出現的錯誤,也許是我還沒來得及修改。如果后期有修改別的錯誤的話,我會更新這篇文章。歡迎看到這里的讀者評論補充或糾錯。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM