[英]Custom TSLint Rule in TypeScript with Angular 7 and `ng lint`
I have a new workspace for a library I am maintaining.我有一个新的工作区,用于我正在维护的图书馆。 We have 2 custom TSLint rules that we were using in Angular 5 that did not leverage the Angular CLI.
我们在 Angular 5 中使用的 2 个自定义 TSLint 规则没有利用 Angular CLI。 We are now moving to Angular CLI and Angular 7.
我们现在正在转向 Angular CLI 和 Angular 7。
One thing we had working was not needing to compile these TSLint rules to JS before TSLint would pick them up.我们所做的一件事是不需要在 TSLint 接收它们之前将这些 TSLint 规则编译为 JS。 However, this required
ts-node
to be used in our package.json
's lint script.但是,这需要在我们的
package.json
的 lint 脚本中使用ts-node
。
How can I tell ng
to pickup these TypeScript TSLint rule files?我如何告诉
ng
选择这些 TypeScript TSLint 规则文件?
tsconfig.json
(in projects/my-lib/src
) tsconfig.json
(在projects/my-lib/src
)
{
"rulesDirectory": "./lib/tslint-rules"
}
Then, in our main workspace, we extend this tsconfig
from the library and add our custom rule.然后,在我们的主工作区中,我们从库中扩展此
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.
Ok, so I figured this out.好的,所以我想通了。 There are a few things you need to do if you want to include custom TSLint rules in your Angular library.
如果你想在你的 Angular 库中包含自定义的 TSLint 规则,你需要做一些事情。
Ensure they are being exported in your public_api.ts
.确保它们在您的
public_api.ts
中导出。 This will ensure that when you run ng build <library-name>
that the TypeScript compiler will pick up those files and compile them and put them in the dist
folder.这将确保当你运行
ng build <library-name>
,TypeScript 编译器会选择这些文件并编译它们并将它们放在dist
文件夹中。
Configure your tsconfig.lib.json
to use non-es6/es2015 modules.配置您的
tsconfig.lib.json
以使用非 es6/es2015 模块。 This is what was causing many issues for me.这就是给我带来很多问题的原因。 It seems that TSLint doesn't support es2015 style modules.
似乎 TSLint 不支持 es2015 样式模块。 I've switched it to use
umd
instead.我已将其切换为使用
umd
。 (I also noted that commonjs
worked fine as well.) (我还注意到
commonjs
也能commonjs
工作。)
{
"compilerOptions": {
...
"module": "umd",
}
}
tslint.json
and add the installed node_modules tslint-rules to your tslint.json
.tslint.json
并将已安装的 node_modules tslint-rules 添加到您的tslint.json
。 Then, add your specific rules to the list of rules. "rulesDirectory": [
// ...,
"node_modules/<my-package>/esm2015/lib/tslint-rules"
],
Then, add your configured rule as follows:然后,添加您配置的规则,如下所示:
"rules": {
// ...,
"my-custom-rule": true,
// ...
}
tslint-default.json
in your library, and copy that into your dist folder after running ng build
.tslint-default.json
,并在运行ng build
后将其复制到您的 dist 文件夹中。 This should have the rule directory added and the default setup for your custom rules. Then, when you install this package elsewhere, you only need to extend this tslint-default.json
from the installed node_modules folder.然后,当你在其他地方安装这个包时,你只需要从安装的 node_modules 文件夹中扩展这个
tslint-default.json
。
Hope this helps anyone who is trying to build an Angular library and include custom TSLint rules.希望这可以帮助任何试图构建 Angular 库并包含自定义 TSLint 规则的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.