在@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 。

讓我知道它是否有效。

祝你今天過得愉快。