时间戳

首页 > 解决方案 > 使用 Angular 7 和 `ng lint` 在 TypeScript 中自定义 TSLint 规则

angular - 使用 Angular 7 和 `ng lint` 在 TypeScript 中自定义 TSLint 规则

问题描述

我有一个我正在维护的库的新工作区。我们有 2 个在 Angular 5 中使用的自定义 TSLint 规则，它们没有利用 Angular CLI。我们现在正在迁移到 Angular CLI 和 Angular 7。

我们所做的一件事是不需要在 TSLint 获取这些 TSLint 规则之前将它们编译为 JS。但是，这需要ts-node在我们package.json的 lint 脚本中使用。

我怎么知道ng要拾取这些 TypeScript TSLint 规则文件？

tsconfig.json（在projects/my-lib/src）

{
  "rulesDirectory": "./lib/tslint-rules"
}

然后，在我们的主工作区中，我们tsconfig从库中扩展它并添加我们的自定义规则。

Could not find implementations for the following rules specified in the configuration:
    my-custom-tslint-rule
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.

标签： angulartypescriptangular-clitslint

解决方案

好的，所以我想通了。如果你想在你的 Angular 库中包含自定义 TSLint 规则，你需要做一些事情。

  1. 确保它们被导出到您的public_api.ts. 这将确保在您运行时ng build <library-name>，TypeScript 编译器会拾取这些文件并编译它们并将它们放入dist文件夹中。

  2. 配置您tsconfig.lib.json使用非 es6/es2015 模块。这就是给我带来很多问题的原因。似乎 TSLint 不支持 es2015 风格的模块。我已将其改为使用umd。（我还注意到commonjs效果也很好。）

{
  "compilerOptions": {
    ...
    "module": "umd",
  }
}
  1. 在安装了这个库的任何项目中，您可以通过执行以下操作来获取您的规则。编辑您的tslint.json并将已安装的 node_modules tslint-rules 添加到您的tslint.json. 然后，将您的特定规则添加到规则列表中。
  "rulesDirectory": [
    // ...,
    "node_modules/<my-package>/esm2015/lib/tslint-rules"
  ],

然后，添加您配置的规则，如下所示：

  "rules": {
    // ...,
    "my-custom-rule": true,
    // ...
  }
  1. 或者，您也可以tslint-default.json在库中设置 a ，并在运行后将其复制到 dist 文件夹中ng build。这应该添加了规则目录和自定义规则的默认设置。

然后，当你在别处安装这个包时，你只需tslint-default.json要从安装的 node_modules 文件夹中扩展它。

希望这可以帮助任何尝试构建 Angular 库并包含自定义 TSLint 规则的人。

推荐阅读