npm 包 tslint-path-formatter 使用教程

什么是 tslint-path-formatter？

tslint-path-formatter 是一个用于 TypeScript 项目的 TSLint 自定义报告器的 npm 包。它会在 TSLint 执行时，将规则的错误信息按照相对路径进行格式化输出，方便开发者快速定位错误文件和位置。

安装与使用

1. 使用 npm 进行安装：

   npm install tslint-path-formatter --save-dev

2. 修改 tslint.json 配置文件，在 reporters 字段中添加 "path-formatter" :

   -- -------------------- ---- -------
   -
     ------------------ --------
     ---------- -
       --------------------
     --
     -------- -
       ------------- ----
     --
     ------------ -
       -
         ------------ -----------------
         --------- ---------
       -
     -
   -
   展开代码

3. 运行 TSLint 命令：

   tslint -p tsconfig.json

4. 查看结果：

   ERROR: /project/src/app/app.component.ts[5, 1]: Property 'notExist' does not exist on type 'AppComponent'.

示例代码

以 Angular 项目为例，假设我们有以下组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Hello {{notExist}}</h1>',
})
export class AppComponent {}

在运行 TSLint 命令后，原本输出的错误信息可能是这样的：

ERROR: /project/src/app/app.component.ts[5, 1]: Property 'notExist' does not exist on type 'AppComponent'.

使用 tslint-path-formatter 后，输出的错误信息会变成这样：

ERROR: src/app/app.component.ts[5, 1]: Property 'notExist' does not exist on type 'AppComponent'.

可以看到，错误信息中的路径已经相对于项目根目录进行了格式化输出。

总结

通过使用 tslint-path-formatter 这个 npm 包，我们可以优化 TSLint 的错误输出方式，让错误信息更加清晰易懂。在开发大型 TypeScript 项目时，这个工具尤其有用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44490