ESLint Following Documentation For parserOptions.project Still Not Configured To Point At Your Project tsconfig.json Angular 16

[JSProgressive]

Current Behavior

I was setting up ESLint in my project, I'm at angular 16, and when I run lint I get the error:

Error: You have attempted to use a lint rule which requires the full TypeScript type-checker to be available, but you do not have parserOptions.project configured to point at your project tsconfig.json files in the relevant TypeScript file "overrides" block of your project ESLint config ./.eslintrc.json

It says go to Please see https://nx.dev/guides/eslint for full guidance on how to resolve this issue. I followed the documentation but it still does not work. For the documentation here https://nx.dev/recipes/other/eslint

I have one root level .eslintrc.js, which I have tried to configure numerous ways, and one root level tsconfig.json file. Not sure if that is the issue? This is my .eslintrc.js

"env": { "browser": true, "es6": true, "node": true }, "extends": [ "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking" ], "ignorePatterns": [ ".eslintrc.js" ], "parser": "@angular-eslint/template-parser", "parserOptions": { "sourceType": "module", "project": ['tsconfig.*?.json'], "tsconfigRootDir": "./" }, "overrides": [ { "files": ["*.ts", "*.tsx"], "parserOptions": { "sourceType": "module", "tsconfigRootDir": "./", "project": ["tsconfig.json"] }, "rules": { } } ], "plugins": [ "eslint-plugin-import", "@angular-eslint/eslint-plugin", "eslint-plugin-jsdoc", "@angular-eslint/eslint-plugin-template", "eslint-plugin-prefer-arrow", "@typescript-eslint" ], "root": true, "rules": {... }

I'm using angular 16 and the following packages: "@angular-eslint/template-parser": "^16.0.3", "@angular-eslint/schematics": "^16.0.3", "@nx/linter": "^16.3.2", "@typescript-eslint/eslint-plugin": "^5.59.9", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jsdoc": "^46.2.6", "eslint-plugin-prefer-arrow": "^1.2.3",

Please let me know if anyone has any ideas at all, or any suggestions, thank you!

Expected Behavior

When pointing to the tsconfig.json file, the linter script will load it.

GitHub Repo

No response

Steps to Reproduce

Create a project using angular 16, make nx workspace, have 1 root level .eslintrc.js and 1 root level tsconfig.json, use @angular-eslint/template-parser as the parser, and try to run lint command on the project

Nx Report

Node   : 18.14.2
   OS     : win32 x64
   npm    : 9.5.0
   Hasher : Native

   nx (global)    : 16.3.1
   nx             : 16.3.2
   @nx/js         : 16.3.2
   @nx/jest       : 16.3.2
   @nx/linter     : 16.3.2
   @nx/workspace  : 16.3.2
   @nx/angular    : 16.3.2
   @nx/cypress    : 16.3.2
   @nx/devkit     : 16.3.2
   @nrwl/tao      : 16.3.2
   @nx/webpack    : 16.3.2
   typescript     : 5.0.4
   ---------------------------------------
   Community plugins:
   ngx-build-plus : 16.0.0

Failure Logs

No response

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

Please let me know if you have any additional questions!

[JSProgressive]

I can create a repo for the test project I made to repro, just let me know

[meeroslav]

Can you please create a repro since your .eslintrc.js copy is missing important information for me to understand what is wrong with the configuration?

[JSProgressive]

Can you please create a repro since your .eslintrc.js copy is missing important information for me to understand what is wrong with the configuration?

Sure, thanks for your reply, here it is https://github.com/JSProgressive/NxAngular16ESLint.git

[meeroslav]

Hey @JSProgressive, your repo did not contain eslintrc so I assumed the configuration based on your snippet above.

The issue you have if that you defined extends with @typescript-eslint/* plugins on the top level, which leads to also *.html files being parsed with those plugins, but those files use different parser (@angular-eslint/template-parser). The fix is to nest that extends in the ts section e.g.

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  env: {
    browser: true, es6: true, node: true
  },
  ignorePatterns: ['.eslintrc.js'],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: ['plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        sourceType: 'module',
        tsconfigRootDir: './',
        project: ['tsconfig(.*)?.json']
      },
      rules: {}
    },
    {
      files: ['*.html'],
      parser: '@angular-eslint/template-parser',
      rules: {}
    }
  ],
  plugins: ['@angular-eslint/eslint-plugin', '@angular-eslint/eslint-plugin-template', '@typescript-eslint'],
  rules: {
	// ... your rules here
  }
}

Whenever you get stuck with custom config, it's always good to check what default create-nx-workspace or nx generators would generate and then compare with your config's to see what is off.

[JSProgressive]

@meeroslav thank you! It was that issue of the top level plugin and parser. I wish it was more clear in the error handling message. The issue creating a default nx-workspace is that it will default everything, and due to the custom nature of this, I wouldn't be able to determine the exact issue. I had created a default as a workaround and then just disabled any rules causing errors, I was unaware of the parser and plugin hierarchy being consumed in this way, I was under the impression they were all batched together and the structure didn't matter and was just preference how you wanted to organize it

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.