前言

• 在ionic2项目根目录下有一个文件，这个文件是做什么用的,怎么用.本文就此讲解一下
• 由于JavaScript语言的灵活性，每个程序员代码风格千差万别,为了统一代码风格于是就有人出了一些脚本工具，这些工具不仅能对代码风格进行统一而且还能对JavaScript代码中的一些陷阱给予提示
• JavaScript校验工具有很多，目前最流行的是，但是ionic项目使用的是TypeScript和JavaScript有点差异，于是有人模仿ESLint开发了用于校验TypeScript代码

先感受一下校验效果

• 如下图1定义了规则禁止使用 var声明变量，则在图2webstrom中可以看到,用var声明变量会有错误提示
  图1
  图2

关于TSLint

• 能干什么

1. TSLint提供一些广泛支持的核心校验规则
2. 预留了自定义规则的接口
3. 可以输出验证失败的规则清单
4. 可以自动修复部分验证规则
5. 提供了各种开发工具插件与其相集成

• TSLint已经提供了一些，但是还不够，于是有人用TSLint提供的自定义接口又自定义了许多规则。如：

1. ——ionic项目默认使用这个
2. ——angular项目默认使用这个
3. 还有好多如下图
   

• 现在有了大量校验规则，如何使用，也就是如何配置又是麻烦事了，起码需要理解每个规则的含义才能配置吧，并且都是英文啊，理解难度大。这个问题显而易见，所以有人已经帮我们配置好了。这就是，这里面的所有配置都有中文注释，它的配置原则：

1. 能够帮助发现代码错误的规则，全部开启
2. 配置不应该依赖于某个具体项目，而应尽可能的合理
3. 帮助保持团队的代码风格统一，而不是限制开发体验

• 如果觉得tslint-config-alloy提供的配置不合理，我们就可以在本文最开始提到的tslint.json文件(ionic项目根目录下)中覆盖它的配置

项目实战

• 环境依赖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"
  ]
}

• 
  

• 找个ts文件测试一下吧
  

如果你的项目是一个老项目，启用了TSLint会有大量错误

• 使用自动修复命令tslint --fix -c ./tslint.json 'src/**/*.ts'，如下图，其中Fixed是自动修复的文件，ERROR是不能自动修复只能手动修复的文件，Warning是校验规则实现不全，未来更新依赖可能会修复
  

• 手动修复代码

• 有些代码风格规则和ide默认的格式化代码风格存在冲突，这时候要么在tslint.json重新定义规则，要么修改ide配置，如：

1. webstorm设置import自动导入的内容为单引号
   
   
2. webstorm设置import自动导入大括号两边添加空格
   默认自动生成格式：
   import {AbstractControl} from '@angular/forms';
   想要格式：
   import { AbstractControl } from '@angular/forms';
   
3. 其他配置自行百度
4. 实际开发过程中可以先不启用TSLint，每次提交代码前或测试开发的代码时在启用并修复问题

TSLint注释标记

• ts文件中使用以下注释来临时忽略规则出现的错误，参考
  /* tslint:disable */——忽略该行以下所有代码出现的错误提示
  /* tslint:enable */——当前ts文件重新启用tslint
  

// tslint:disable-line——忽略当前行代码出现的错误提示

// tslint:disable-next-line——忽略下一行代码出现的错误提示

关于自定义规则

• 参考

• TSLint提供了一个（单行注释格式化规则）,如下

 "rules": {
    "comment-format": [true, "check-space"]
  }

• 当注释描述不以空格开头则报错，如下图，但是这个规则没有实现自动修复功能，所以我这里实现
  

  
  

• 使用配置
  

• 效果