传送门
TSLlint，tslint-eslint-rules，tslint-config-alloy，eslint-config-alloy，ionic2_tabs
前言
- 在ionic2项目根目录下有一个tslint.json文件，这个文件是做什么用的,怎么用.本文就此讲解一下
- 由于JavaScript语言的灵活性，每个程序员代码风格千差万别,为了统一代码风格于是就有人出了一些脚本工具，这些工具不仅能对代码风格进行统一而且还能对JavaScript代码中的一些陷阱给予提示
- JavaScript校验工具有很多，目前最流行的是ESLint，但是ionic项目使用的是TypeScript和JavaScript有点差异，于是有人模仿ESLint开发了TSLint用于校验TypeScript代码
先感受一下校验效果
- 如下图1定义了规则
禁止使用 var声明变量，则在图2webstrom中可以看到,用var声明变量会有错误提示
图1
图2
关于TSLint
- TSLint能干什么
- TSLint提供一些广泛支持的核心校验规则
- 预留了自定义规则的接口
- 可以输出验证失败的规则清单
- 可以自动修复部分验证规则
- 提供了各种开发工具插件与其相集成
- TSLint已经提供了一些核心规则，但是还不够，于是有人用TSLint提供的自定义接口又自定义了许多规则。如：
- tslint-eslint-rules——ionic项目默认使用这个
- codelyzer——angular项目默认使用这个
- 还有好多如下图
- 现在有了大量校验规则，如何使用，也就是如何配置又是麻烦事了，起码需要理解每个规则的含义才能配置吧，并且都是英文啊，理解难度大。这个问题显而易见，所以有人已经帮我们配置好了。这就是tslint-config-alloy，这里面的所有配置都有中文注释，它的配置原则：
- 能够帮助发现代码错误的规则，全部开启
- 配置不应该依赖于某个具体项目，而应尽可能的合理
- 帮助保持团队的代码风格统一，而不是限制开发体验
- 如果觉得
tslint-config-alloy提供的配置不合理，我们就可以在本文最开始提到的tslint.json文件(ionic项目根目录下)中覆盖它的配置
扫盲：前面说tslint提供了大量规则,其实是说的是规则的实现,我们需要配置,但是还有人不知道什么是规则,什么是配置;如:
不允许使用var的规则的实现看这里，它的配置需要在tslint.json文件中配置'no-var-keyword': true，设置false则不校验,这就是配置
项目实战
-
环境依赖
node v7+或者yarn v1.0+
项目安装依赖：
cnpm install --save-dev tslint-eslint-rules tslint-config-alloy
其中
tslint-eslint-rules是规则的实现，它的规则已经继承了tslint，其中tslint-config-alloy是规则的配置，我们的配置继承这里的配置。
- ionic项目默认已经安装了tslint,最好在
node_modules目录中检查一下,未安装则安装：cnpm install --save-dev tslint
检查项目是否安装tslint
- 配置
tslint.json内容如下
{
"extends": "tslint-config-alloy",
"rules": {
},
"rulesDirectory": [
"node_modules/tslint-eslint-rules/dist/rules"
]
}
其中
rulesDirectory指定规则的实现目录，可以配置多个，如你自定义的规则的目录；其中extends指定我们继承的配置，这里继承tslint-config-alloy，我们可以在rules中添加配置和覆盖tslint-config-alloy提供的配置。更多详情看这里
-
webstorm启用tslint，其他ide参考这里
-
找个ts文件测试一下吧
如果你的项目是一个老项目，启用了TSLint会有大量错误
-
使用自动修复命令
tslint --fix -c ./tslint.json 'src/**/*.ts'，如下图，其中Fixed是自动修复的文件，ERROR是不能自动修复只能手动修复的文件，Warning是校验规则实现不全，未来更新依赖可能会修复
请认真阅读tslint-config-alloy内容，关闭或重写一些太严格的规则，如代码中允许出现
debugger，可以参考我的项目手动修复代码
有些代码风格规则和ide默认的格式化代码风格存在冲突，这时候要么在
tslint.json重新定义规则，要么修改ide配置，如：
- webstorm设置
import自动导入的内容为单引号
- webstorm设置
import自动导入大括号两边添加空格
默认自动生成格式：
import {AbstractControl} from '@angular/forms';
想要格式：
import { AbstractControl } from '@angular/forms';
- 其他配置自行百度
- 实际开发过程中可以先不启用TSLint，每次提交代码前或测试开发的代码时在启用并修复问题
TSLint注释标记
- ts文件中使用以下注释来临时忽略规则出现的错误，参考这里
/* tslint:disable */——忽略该行以下所有代码出现的错误提示
/* tslint:enable */——当前ts文件重新启用tslint
// tslint:disable-line——忽略当前行代码出现的错误提示
// tslint:disable-next-line——忽略下一行代码出现的错误提示
关于自定义规则
- 参考
- TSLint提供了一个comment-format（单行注释格式化规则）,如下
"rules": {
"comment-format": [true, "check-space"]
}
-
当注释描述不以空格开头则报错，如下图，但是这个规则没有实现自动修复功能，所以我这里实现
实现自定义规则，单行注释不以空格开头则自动添加空格，代码如下图，源码在这里
-
使用配置
-
效果
