ionic2/3实战-使用tslint

传送门
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能干什么

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

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

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

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

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

• 如果觉得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配置，如：

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——忽略下一行代码出现的错误提示

关于自定义规则

• 参考

1. https://palantir.github.io/tslint/develop/custom-rules/
2. https://blog.fedepot.com/bian-xie-zi-ding-yi-tslint-rules/
3. https://webfe.kujiale.com/tslint-bp/

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

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

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

  
  
  
  

• 实现自定义规则，单行注释不以空格开头则自动添加空格，代码如下图，源码在这里

• 使用配置
  

  

• 效果