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

Posted

技术标签:

【中文标题】使用 Angular 7 和 `ng lint` 在 TypeScript 中自定义 TSLint 规则【英文标题】:Custom TSLint Rule in TypeScript with Angular 7 and `ng lint` 【发布时间】:2019-07-30 20:21:02 【问题描述】:

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

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

我如何告诉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.

【问题讨论】:

查看这篇文章blog.rangle.io/custom-tslint-for-angular。根据他们的说法,这取决于 tslint 版本,是否需要将规则编译为 JS。不应该与使用angular-cli或不相关 讽刺的是,那是我的博文。在这种情况下,我最终使用ts-node 来运行 linter。现在,如果可能的话,我想使用ng 来运行限制 【参考方案1】:

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

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

    将您的 tsconfig.lib.json 配置为使用非 es6/es2015 模块。这就是给我带来很多问题的原因。似乎 TSLint 不支持 es2015 风格的模块。我已将其改为使用umd。 (我还注意到commonjs 也可以正常工作。)


  "compilerOptions": 
    ...
    "module": "umd",
  

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

然后,添加您配置的规则如下:

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

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

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

【讨论】:

以上是关于使用 Angular 7 和 `ng lint` 在 TypeScript 中自定义 TSLint 规则的主要内容,如果未能解决你的问题,请参考以下文章

Angular 8 - ng lint:超出最大调用堆栈大小错误

markdown Angular CLI:ng lint,ng test,ng e2e

Angular 6 ng lint combineLatest 已弃用

在文件保存时将 Angular 配置为“ng lint”

如何删除 WebStorm sass-lint 错误“未知的伪选择器 'ng-deep'”

运行 ng lint --fix 绝对没有任何作用