Angular 不应否定ESLint异步管道

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

custom-layout.component.html

---

添加

“@angular eslint/template/no-negated async”：“off”

到根目录或项目（从末尾起5行）中的eslint规则部分的html部分编辑.eslintrc.json，可能的变体：off/warn/error

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

---

我认为这是一条很好的规则，我们必须遵守

为什么?

Angular的异步管道最初在可观察到之前发出null 发出任何值或承诺。这可能导致 否定，比如*ngIf=“！（myConditional | async）”来反复研究布局 并且会产生昂贵的副作用，比如为一个 不应显示的组件

文件：

因此，您可以根据您的用例像这样使用。i、 对我来说，这只是一个布尔检查

---

（isMemberChanged$| async）！==true

我们可以从ESLint配置中看到您有禁用规则的示例，并且您要禁用的规则的名称在错误中，因此不清楚问题出在哪里。@jonrsharpe，我不明白。你在配置中到底指的是哪一行？看一下@jornsharpe，

“@angular eslint/template/no negated async:“off”，

没有做任何事情这似乎不太可能，但不清楚你把它放在哪里了。请相应地回答这个问题。

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

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