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

Question

I have a project made with Angular.

I want to set a indent rule for the Angular *.html file.

I do that in my .eslintrc :

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

But this give my the following error:

TypeError: Cannot read property 'start' of undefined

I don't understand why.

---

My full .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

If you are using prettier and eslint at the same time, the indent property of the first doesn't match with the indent property of the lattest. My suggestion is,if using prettier, to disable eslint's indent rule.

On the other hand, if you are using eslint only try to replace indent property with the follow:

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

Why SwitchCase?

• Indent of 2 spaces with SwitchCase set to 0 will not indent case clauses with respect to switch statements.
• Indent of 2 spaces with SwitchCase set to 1 will indent case clauses with 2 spaces with respect to switch statements.
• Indent of 2 spaces with SwitchCase set to 2 will indent case clauses with 4 spaces with respect to switch statements.
• Indent of tab with SwitchCase set to 2 will indent case clauses with 2 tabs with respect to switch statements.

If you need some info about it: eslint docs .

Let me know if it works.

Have a nice day.