在@angular-eslint/template 中使用缩进规则

Question

我有一个用 Angular 制作的项目。

我想为 Angular *.html文件设置缩进规则。

我在我的.eslintrc中这样做：

{
  "files": ["*.html"],
  "extends": [
    "plugin:@angular-eslint/template/recommended"
  ],
  "rules": {
    "indent": [2, 2]
  }
}

但这给了我以下错误：

TypeError: Cannot read property 'start' of undefined

我不明白为什么。

---

我的完整.eslintrc

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "plugins": ["import"],
  "rules": {
    "import/no-extraneous-dependencies": [
      2,
      { "devDependencies": ["**/*spec.ts"] }
    ],
    "quotes": [ 2, "single" ],
    "padded-blocks": "off",
    "no-plusplus": "off",
    "object-curly-spacing": [2, "always"],
    "space-in-parens": [2, "never"],
    "keyword-spacing": 2,
    "comma-spacing": 2,
    "comma-dangle": [2, {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "functions": "always-multiline"
    }],
    "key-spacing": 2,
    "space-infix-ops": 2,
    "arrow-spacing": 2
  },
  "overrides": [
    {
      "files": ["*.ts", "*.js", "*.tsx"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "plugins": [
        "promise",
        "jsdoc",
        "import"
      ],
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "fbo",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "fbo",
            "style": "kebab-case"
          }
        ],
        "indent": [2, 2],
        "max-lines-per-function": ["error", 75],
        "promise/catch-or-return": "error",
        "promise/always-return": "off",
        "promise/no-return-wrap": "error",
        "promise/param-names": "error",
        "promise/no-native": "off",
        "promise/no-nesting": "warn",
        "promise/no-promise-in-callback": "warn",
        "promise/no-callback-in-promise": "warn",
        "promise/avoid-new": "off",
        "promise/no-new-statics": "error",
        "promise/no-return-in-finally": "warn",
        "promise/valid-params": "warn",
        "no-useless-constructor": "off",
        "@typescript-eslint/no-useless-constructor": 2,
        "import/extensions": "off",
        "import/prefer-default-export": "off",
        "@typescript-eslint/no-unused-vars": 2,
        "no-console": 2,
        "@typescript-eslint/no-explicit-any": 2,
        "semi": 2,
        "linebreak-style": [2, "unix"],
        "jsdoc/newline-after-description": 0,
        "jsdoc/no-undefined-types": 0,
        "jsdoc/check-access": 2,
        "jsdoc/check-alignment": 2,
        "jsdoc/check-param-names": 2,
        "jsdoc/check-property-names": 2,
        "jsdoc/check-tag-names": 2,
        "jsdoc/check-types": 2,
        "jsdoc/check-values": 2,
        "jsdoc/empty-tags": 2,
        "jsdoc/implements-on-classes": 2,
        "jsdoc/require-jsdoc": ["error", {
          "require": {
            "FunctionDeclaration": true,
            "MethodDefinition": true,
            "ClassDeclaration": false,
            "ArrowFunctionExpression": false,
            "FunctionExpression": false
          }
        }],
        "jsdoc/require-description": 2,
        "jsdoc/require-param": 2,
        "jsdoc/require-param-description": 2,
        "jsdoc/require-param-name": 2,
        "jsdoc/require-param-type": 2,
        "jsdoc/require-property": 2,
        "jsdoc/require-property-description": 2,
        "jsdoc/require-property-name": 2,
        "jsdoc/require-property-type": 2,
        "jsdoc/require-returns": 2,
        "jsdoc/require-returns-check": 2,
        "jsdoc/require-returns-description": 2,
        "jsdoc/require-returns-type": 2,
        "jsdoc/require-yields": 2,
        "jsdoc/require-yields-check": 2,
        "jsdoc/valid-types": 2,
        "@typescript-eslint/explicit-function-return-type": 2,
        "@typescript-eslint/naming-convention": [
          "error",
          {
            "selector": "interface",
            "format": ["PascalCase"],
            "custom": {
              "regex": "^I[A-Z]",
              "match": true
            }
          },
          {
            "selector": "class",
            "format": ["PascalCase"]
          }
        ],
        "@typescript-eslint/member-ordering": 2
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        "indent": [2, 2]
      }
    }
  ]
}

Answer 1

如果您同时使用 prettier 和 eslint，则 first 的缩进属性与 lattest 的缩进属性不匹配。 我的建议是，如果使用 prettier，禁用 eslint 的缩进规则。

另一方面，如果您只使用 eslint，请尝试将缩进属性替换为以下内容：

indent: [2, 2, { SwitchCase: 1}]

为什么选择 SwitchCase？

• 将 SwitchCase 设置为 0 的 2 个空格的缩进将不会缩进与 switch 语句相关的 case 子句。
• 将 SwitchCase 设置为 1 的 2 个空格的缩进将相对于 switch 语句缩进 2 个空格的 case 子句。
• 将 SwitchCase 设置为 2 的 2 个空格缩进将相对于 switch 语句缩进 4 个空格的 case 子句。
• Indent of tab with SwitchCase set to 2 将相对于 switch 语句缩进 2 个制表符的 case 子句。

如果您需要一些相关信息： eslint docs 。

让我知道它是否有效。

祝你今天过得愉快。