angular ng lint 相关

首先还是要来讲一讲 ng lint 的相关知识:

通过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 reass

但是再次执行 ng lint 后仍然还有很多错误没有被修正,这时候我们就得手动消灭错误。
ng lint 常见错误
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以外的前缀。

ng lint命令
ng lint <options…>
Lints code in existing project.
aliases: l
–fix (Boolean) (Default: false) Fixes linting errors (may overwrite linted files).
aliases: -fix
–type-check (Boolean) (Default: false) Controls the type check for linting.
aliases: --typeCheck
–force (Boolean) (Default: false) Succeeds even if there was linting errors.
aliases: --force
–format (String) (Default: prose) Output format (prose, json, stylish, verbose, pmd, msbuild, checkstyle, vso, fileslist).
aliases: -t , --format

猜你喜欢

转载自blog.csdn.net/xunmeng2019/article/details/87871895
今日推荐