当我第一次被分配到“修正执行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之外的前缀。
后记:固然,还有不少错误没有列出,也许是个人项目恰巧没有出现的错误,也许是我还没来得及修改。若是后期有修改别的错误的话,我会更新这篇文章。欢迎看到这里的读者评论补充或纠错。