[英]ESLint Async pipes should not be negated
I'm using ESLint with Angular and I don't like having extra code like (observable | async) === (false | null | undefined)
instead of just (observable | async)
.我将 ESLint 与 Angular 一起使用,我不喜欢像
(observable | async) === (false | null | undefined)
这样的额外代码,而不仅仅是(observable | async)
。 How do I disable that rule?如何禁用该规则?
E:\GitHub\skybot\angular\src\app\custom-layout\custom-layout.component.html
6:75 error Async pipes should not be negated. Use (observable | async) === (false | null | undefined) to check its value instead @angular-eslint/template/no-negated-async
<ng-template #sidenavRef>
<vex-sidenav [collapsed]="sidenavCollapsed$ | async"></vex-sidenav>
</ng-template>
<ng-template #toolbarRef>
<vex-toolbar [hasShadow]="toolbarShadowEnabled$ | async" [mobileQuery]="!(isDesktop$ | async)" class="vex-toolbar">
</vex-toolbar>
</ng-template>
<ng-template #footerRef>
<vex-footer *ngIf="isFooterVisible$ | async" class="vex-footer"></vex-footer>
</ng-template>
<ng-template #quickPanelRef>
<vex-quick-panel></vex-quick-panel>
</ng-template>
<vex-layout [footerRef]="footerRef" [quickPanelRef]="quickPanelRef" [sidenavRef]="sidenavRef" [toolbarRef]="toolbarRef">
</vex-layout>
<vex-config-panel-toggle (openConfig)="configPanel.open()"></vex-config-panel-toggle>
<!-- CONFIGPANEL -->
<vex-sidebar #configPanel [invisibleBackdrop]="true" position="right">
<vex-config-panel></vex-config-panel>
</vex-sidebar>
<!-- END CONFIGPANEL -->
{
"root": true,
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": [
"tsconfig.json",
"e2e/tsconfig.json"
],
"createDefaultProgram": true
},
"extends": [
"plugin:@angular-eslint/ng-cli-compat",
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "vex",
"style": "kebab-case"
}
],
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "vex",
"style": "camelCase"
}
],
"@angular-eslint/no-host-metadata-property": "off",
"@typescript-eslint/explicit-member-accessibility": [
"off",
{
"accessibility": "explicit"
}
],
"arrow-parens": [
"off",
"always"
],
"id-blacklist": "error",
"import/order": "off",
"max-len": "off",
"@angular-eslint/template/no-negated-async": "off"
}
},
{
"files": [
"*.html"
],
"extends": [
"plugin:@angular-eslint/template/recommended"
],
"rules": {}
}
]
}
I think this is a very good rule and we must follow that.我认为这是一个很好的规则,我们必须遵守。
Why?为什么?
Angular's async pipes emit null initially, prior to the observable emitting any values, or the promise resolving.
Angular 的异步管道最初发出 null,在可观察对象发出任何值或 promise 解析之前。 This can cause negations, like *ngIf=”.(myConditional | async)” to thrash the layout and cause expensive side-effects like firing off XHR requests for a component which should not be shown.
这可能会导致否定,例如 *ngIf=”.(myConditional | async)” 破坏布局并导致昂贵的副作用,例如触发不应显示的组件的 XHR 请求。
Doc: http://codelyzer.com/rules/templates-no-negated-async/文档: http://codelyzer.com/rules/templates-no-negated-async/
So you can just use like so according to your use case.所以你可以根据你的用例像这样使用。 ie for me it is just a boolean check.
即对我来说,它只是一个 boolean 检查。
(isMemberChanged$ | async) !== true
edit .eslintrc.json in root or your project (5 row from end), possible variants: off/warn/error在根目录或您的项目中编辑.eslintrc.json (距离末尾 5 行),可能的变体:关闭/警告/错误
{
"root": true,
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": [
"tsconfig.json",
"e2e/tsconfig.json"
],
"createDefaultProgram": true
},
"extends": [
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "crm",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "crm",
"style": "kebab-case"
}
]
}
},
{
"files": [
"*.html"
],
"extends": [
"plugin:@angular-eslint/template/recommended"
],
"rules": {
"@angular-eslint/template/no-negated-async": "off"
}
}
]
}
add "@angular-eslint/template/no-negated-async": "off"
to the html portion of the esLint rules section将
"@angular-eslint/template/no-negated-async": "off"
添加到 esLint 规则部分的 html 部分
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.