當我第一次被分配到「修正執行ng lint語句後的錯誤」這項任務前，我就被導師提早告知這是一個很無聊的任務，當我開始後，我發現其實有一些辦法能夠加快這個無聊單調的工做。接下來，我就分享一下個人經驗。json
首先仍是要來說一講 ng lint 的相關知識：app
- 經過Angular CLI的執行語句 ng new XXX 建立新項目後，目錄中會包含一個tslint.json文件，這個文件就是用來定義一個統一的代碼風格。
-
有一些錯誤能夠經過 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，下面也會涉及到這個軟件的某些功能的使用，故在此說明一下。spa
具體流程
1. 錯誤信息的簡化
把全部的錯誤信息複製到文檔中，換成清晰的字體格式，而後能夠刪除不必的重複路徑的信息，能夠利用查找替換的功能將全部路徑重複的前面部分用空格或無替換就能刪掉這些使人眼花的信息。而後能夠選中全部後點數字列表模式，最後一行的數字固然就是錯誤總數啦。component
2. 將信息存儲在Excel智能表格中orm
將文檔中全部信息複製到Excel中，由於在Excel中轉行就會使信息保存到下一行，因此這些信息就天然而然的被分到了一個N*1的表格中了，趁着複製的內容仍是全選狀態時點擊表格模式(Format as Table)，這是這些信息就在一個智能的表格中了。你還能選擇表格的風格，有一些好看的模版能夠直接使用，選擇本身喜歡的顏色也有利於心情愉悅。blog
3. 篩選出同類錯誤rxjs
接下來就能夠掃一眼有什麼錯誤是你以爲能簡單消滅的，而後點擊表格自動生成的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之外的前綴。
後記：固然，還有不少錯誤沒有列出，也許是個人項目恰巧沒有出現的錯誤，也許是我還沒來得及修改。若是後期有修改別的錯誤的話，我會更新這篇文章。歡迎看到這裏的讀者評論補充或糾錯。