typescript ESLint异步管道不应取反

jbose2ul  于 2023-03-04  发布在  TypeScript
关注(0)|答案(4)|浏览(122)

我正在使用ESLint和Angular,我不喜欢使用(observable | async) === (false | null | undefined)这样的额外代码,而不是(observable | async)。如何禁用该规则?

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

自定义布局.组件. html

<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 -->

.埃斯林特拉克. json

{
  "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": {}
    }
  ]
}
h43kikqp

h43kikqp1#

我认为这是一个很好的规则,我们必须遵守。
为什么?
Angular的异步管道在observable发出任何值或promise解析之前,最初发出null。这可能导致否定,如 * ngIf ="!(myConditional|async)"来破坏布局并导致昂贵的副作用,如为不应显示的组件发出XHR请求。

因此,您可以根据您的用例像这样使用。即,对我来说,它只是一个boolean检查。
(isMemberChanged$ | async) !== true

tvokkenx

tvokkenx2#

"@angular-eslint/template/no-negated-async": "off"添加到esLint规则部分的html部分

thtygnil

thtygnil3#

在根目录或您的项目中编辑**.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"
      }
    }
  ]
}
ckocjqey

ckocjqey4#

有时候我们需要求反的异步来处理所有的错误,例如加载器的可观察性。
因此,如果要禁用此规则,应编辑. eslintrc.json中的html规则

{
  ...
  "overrrides": [
    {
      "files": [
        "*.html"
      ],
      "extends": [
         "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        "@angular-eslint/template/no-negated-async": "off"
      }
  ]
}

相关问题