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

angular ng lint 相关相关推荐

Angular NgModule 作用域相关问题
NgModule 是你使用 Angular 编写应用程序时遇到的第一个基本结构,但由于涉及不同的作用域范围,它也是最微妙和最复杂的.如果你想详细了解 NgModule 的相关知识,可以直接参考 Ang ...
Angular: ‘ng’ is not recognized as an internal or external command, operable program or batch file
今天,安装好 Angular CLI 框架后出现无法识别 ng 命令的情况.在网上搜了一些解决方案进行尝试后解决了这个问题.这里我将解决方案进行了整理,希望对看到这篇文章的小伙伴有所帮助. 问题描述 ...
angular ng zorro框架日期框无法自适应宽度的解决方法
如果我们使用ng zorro框架的日期框时,就会发现,日期框的宽度总是固定的,无法像输入框一样自适应父节点<nz-form-control [nzSpan]="12"> ...
ng命令汇总：Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...
Angular 常用ng指令详解
详解Angular ng内置指令我们依次从使用频率高到低来,重要性大小来说明各种指令. 1.ng-repeat 1.1 一般用法 <ul><li ng-repeat="c ...
Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...
在Angular专家Dan Wahlin的免费33部分课程中学习Angular
According to the Stack Overflow developer survey 2018, Angular is one of the most popular frameworks ...
PrimeNG01 angular集成PrimeNG
1 开发环境本博文基于angular5 2 步骤 2.1 创建angular5项目详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...
Angular项目目录结构
前言:不支持MakeDown的博客园调格式的话,真的写到快o(╥﹏╥)o了,所以老夫还是转战到CSDN吧,这边就不更新啦啦啦~ CSDN地址:https://blog.csdn.net/Night20 ...

angular ng lint 相关

angular ng lint 相关相关推荐

最新文章

热门文章