ES Lint not working with Angular 16

[dilipshelake03]

Description and reproduction of the issue

I am upgrading my nx monorepo application from Angular version 15 to angular 16.

I am getting multiple ESLint errors, like

Parsing error: Unexpected closing block. The block may have been closed earlier. If you meant to write the } character, you should use the "}" HTML entity instead  prettier/prettier

error  Parsing error: Unexpected token  prettier/prettier

Error in multiline import statement.

I just removed the references to the below plugins in .eslint.json under extends section

"plugin:@angular-eslint/ng-cli-compat",
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",

and added the below

"plugin:@angular-eslint/recommended"

The extends now looks as below

"extends": [
   "plugin:@angular-eslint/recommended",
   "plugin:@angular-eslint/template/process-inline-templates"
],

Versions

package	version
@angular-eslint/eslint-plugin	~16.0.0
@typescript-eslint/parser	^5.60.1
ESLint	~8.55.0
node	18.13.0

• [y] I have tried restarting my IDE and the issue persists.
• [y] I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.

[JamesHenry]

The errors are coming from eslint-plugin-prettier, which is not related to angular-eslint.

If you include your relevant eslint configs maybe we can point you in the right direction but it’s not our tooling

[dilipshelake03]

Above errors got removed when we change parser from Bable-ESLint to Angular-ESLint.

Now just below error is showing,

Parsing error: Unexpected closing block. The block may have been closed earlier. If you meant to write the } character, you should use the "}" HTML entity instead  prettier/prettier

[dilipshelake03]

@JamesHenry
Below is the eslint config,

{
  "root": true,
  "ignorePatterns": ["**/*"],
  "plugins": ["@nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        "@nx/enforce-module-boundaries": [
          "error",
          {
            "enforceBuildableLibDependency": true,
            "allow": [],
            "depConstraints": [
              {
                "sourceTag": "*",
                "onlyDependOnLibsWithTags": ["*"]
              },
              {
                "sourceTag": "type:feature-app",
                "onlyDependOnLibsWithTags": ["type:shared"]
              },
              {
                "sourceTag": "type:shared",
                "onlyDependOnLibsWithTags": ["type:shared"]
              }
            ]
          }
        ]
      }
    },
    {
      "files": ["*.ts", "*.tsx"],
      "parserOptions": {
        "project": [
          "tsconfig.base.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
      ],
      "plugins": [
        "ban",
        "header",
        "import",
        "jsdoc"
      ],
      "rules": {
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-empty-function": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/no-unnecessary-type-constraint": "off",
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "modern-ui",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "modern-ui",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/no-attribute-decorator": "error",
        "@angular-eslint/no-forward-ref": "error",
        "@angular-eslint/no-output-on-prefix": "off",
        "@typescript-eslint/array-type": [
          "error",
          {
            "default": "array-simple"
          }
        ],
        "@typescript-eslint/ban-types": "off",
        "@typescript-eslint/consistent-type-definitions": "error",
        "@typescript-eslint/explicit-member-accessibility": [
          "error",
          {
            "accessibility": "explicit",
            "overrides": {
              "accessors": "explicit",
              "constructors": "off",
              "parameterProperties": "explicit"
            }
          }
        ],
        "@typescript-eslint/member-ordering": [
          "error",
          {
            "classes": [
              "public-static-field",
              "public-instance-field",
              "private-static-field",
              "private-instance-field",
              "private-constructor",
              "public-constructor",
              "public-instance-method",
              "protected-instance-method",
              "private-instance-method"
            ]
          }
        ],
        "@typescript-eslint/naming-convention": "off",
        "@typescript-eslint/no-inferrable-types": [
          "off",
          {
            "ignoreParameters": true
          }
        ],
        "@typescript-eslint/no-shadow": "error",
        "@typescript-eslint/no-var-requires": "error",
        "array-bracket-spacing": [
          "error",
          "never"
        ],
        "arrow-body-style": "off",
        "prefer-arrow-callback": "off",
        "ban/ban": [
          "error",
          {"name": "fdescribe", "message": "Only while debugging specs"},
          {"name": "fit", "message": "Only while debugging specs"},
          {"name": "xdescribe", "message": "Only while debugging specs"},
          {"name": "xit", "message": "Only while debugging specs"},
          {"name": ["TestBed", "get"], "message": "TestBed.get is deprecated; use TestBed.inject instead."}
        ],
        "block-spacing": "error",
        "brace-style": [
          "error",
          "1tbs",
          {
            "allowSingleLine": true
          }
        ],
        "class-methods-use-this": "off",
        "complexity": [
          "error",
          {
            "max": 20
          }
        ],
        "func-call-spacing": [
          "error",
          "never"
        ],
        "header/header": [
          "error",
          "block",
          [
            "",
            {
              "pattern": "^ \\* Copyright \\d{4} VMware, Inc\\.$"
            },
            {
              "pattern": "^ \\* All rights reserved\\.$"
            },
            " "
          ]
        ],
        "id-blacklist": "off",
        "import/no-unresolved": "off",
        "import/order": "error",
        "import/no-deprecated": "off",
        "import/no-relative-parent-imports": "error",
        "indent": ["error", 2, { "ImportDeclaration": 1 }],
        "jsdoc/newline-after-description": "off",
        "jsdoc/no-types": "off",
        "jsdoc/require-jsdoc": [
          "off",
          {
            "require": {
              "ClassDeclaration": true,
              "MethodDefinition": true,
              "ClassExpression": true
            }
          }
        ],
        "max-classes-per-file": [
          "error",
          3
        ],
        "max-len": [
          "error",
          {
            "ignoreRegExpLiterals": false,
            "ignoreStrings": false,
            "code": 140
          }
        ],
        "max-lines": "off",
        "no-constant-condition": "error",
        "no-duplicate-case": "error",
        "no-empty-character-class": "error",
        "no-ex-assign": "error",
        "no-extra-boolean-cast": "error",
        "no-extra-semi": "error",
        "no-inner-declarations": [
          "error",
          "both"
        ],
        "no-invalid-regexp": "error",
        "no-irregular-whitespace": "error",
        "no-multiple-empty-lines": "error",
        "no-multi-spaces": "error",
        "no-new-func": "error",
        "no-octal": "error",
        "no-octal-escape": "error",
        "no-redeclare": "error",
        "no-regex-spaces": "error",
        "no-restricted-syntax": [
          "error"
        ],
        "no-shadow": "off", // has issues with string enums; use @typescript-eslint/no-shadow instead
        "no-sparse-arrays": "error",
        "no-template-curly-in-string": "off",
        "no-underscore-dangle": "off",
        "object-curly-spacing": "off",
        "object-curly-newline": "off",
        "prefer-arrow/prefer-arrow-functions": "off",
        "quotes": ["error", "single"],
        "no-unexpected-multiline": "off",
        "no-restricted-imports": "off",
        "space-in-parens": [
          "error",
          "never"
        ]
      }
    },
    {
      "files": ["*.js", "*.jsx"],
      "extends": ["plugin:@nx/javascript"],
      "rules": {}
    },
    {
      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
      "env": {
        "jest": true
      },
      "rules": {
        "jsdoc/require-jsdoc": "off"
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        "@angular-eslint/template/no-autofocus": "off",
        "@angular-eslint/template/no-positive-tabindex": "error"
      }
    }
  ]
}

[Zacknero]

@typescript-eslint/no-unused-vars

Hi, but i don't foud the rule about "Unused field" as example expor class ComponentName { message = ''; ...} where the message varable never used. Have any rules about it? Thanks!