betterer icon indicating copy to clipboard operation
betterer copied to clipboard

Issue using plugins with Betterer's eslint

Open cathey191 opened this issue 2 years ago • 7 comments

Describe the bug Trying to use the eslint plugin rxjs/no-unsafe-takeuntil with Betterer, however getting the error saying it needs the parserServices to be generated.

To Reproduce Import the package eslint-plugin-rxjs. "eslint-plugin-rxjs": "^5.0.2",

Add to your .eslintrc.json { "root": true, "parser": "@typescript-eslint/parser", "plugins": [ "no-only-tests", "rxjs" ] }

Add to your betterer file 'no-unsafe-takeuntil': () => eslint({ 'rxjs/no-unsafe-takeuntil': ['error', { "allow": ["count", "defaultIfEmpty", "endWith", "every", "finalize", "finally", "isEmpty", "last", "max", "min", "publish", "publishBehavior", "publishLast", "publishReplay", "reduce", "share", "shareReplay", "shareReplayHot", "skipLast", "takeLast", "throwIfEmpty", "toArray", "catchError"] }] })

Expected behavior Betterer should run the new tests and give a result of how many are failing. In my case Im expecting in the 60s. Instead I receieve this error message mixed in with my other test results in the termal 🔥 no-unsafe-takeuntil: Error while loading rule 'rxjs/no-unsafe-takeuntil': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

Versions (please complete the following information):

  • Betterer Version [5.1.7]
  • Node Version [e.g. 14.17.3]

cathey191 avatar Apr 05 '22 23:04 cathey191

Hi @phenomnomnominal we are trying to use eslint rules from 3rd party plugins, but the eslint function limits us to add configurations to the ESLint instance.

Is it possible to make a new function which allow us to pass the ESLint config?

Cheers, Henry

jaohaohsuan avatar Apr 11 '22 22:04 jaohaohsuan

The intention is that the full configuration for the test should live in the projects real .eslintrc configuration file and the eslint test should just turn on and off the rules. Something is going wrong with the mechanism that retrieves the configuration. Since I can't reproduce the issue here it's hard for me to figure out what is going on.

You can of course have your own test in your own codebase that takes the whole ESLint configuration.

phenomnomnominal avatar Apr 11 '22 22:04 phenomnomnominal

Describe the bug Trying to use the eslint plugin rxjs/no-unsafe-takeuntil with Betterer, however getting the error saying it needs the parserServices to be generated.

To Reproduce Import the package eslint-plugin-rxjs. "eslint-plugin-rxjs": "^5.0.2",

Add to your .eslintrc.json { "root": true, "parser": "@typescript-eslint/parser", "plugins": [ "no-only-tests", "rxjs" ] }

Add to your betterer file 'no-unsafe-takeuntil': () => eslint({ 'rxjs/no-unsafe-takeuntil': ['error', { "allow": ["count", "defaultIfEmpty", "endWith", "every", "finalize", "finally", "isEmpty", "last", "max", "min", "publish", "publishBehavior", "publishLast", "publishReplay", "reduce", "share", "shareReplay", "shareReplayHot", "skipLast", "takeLast", "throwIfEmpty", "toArray", "catchError"] }] })

Expected behavior Betterer should run the new tests and give a result of how many are failing. In my case Im expecting in the 60s. Instead I receieve this error message mixed in with my other test results in the termal 🔥 no-unsafe-takeuntil: Error while loading rule 'rxjs/no-unsafe-takeuntil': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

Versions (please complete the following information):

  • Betterer Version [5.1.7]
  • Node Version [e.g. 14.17.3]

Hi @cathey191 The error message shows that the rxjs/no-unsafe-takeuntil rule is not recognized as the Betterer doesn't load the eslintrc files. Check the source code here.

jaohaohsuan avatar Apr 11 '22 22:04 jaohaohsuan

Betterer does load the eslintrc files, it is part of this call await cli.calculateConfigForFile(filePath);. The useEslintrc: false just means that it doesn't use it when it constructs the instance.

I have tested this by installing rxjs and eslint-plugin-rxjs in Betterer, adding those to the eslint config, and adding some code that violates the takeuntil rule, and validated that Betterer finds and records the issue correctly.

It seems that calculateConfigForFile is not working as intended in your specific setup for some reason.

phenomnomnominal avatar Apr 11 '22 22:04 phenomnomnominal

@phenomnomnominal Thanks for the explanation. I will take a look again at our project directory structure.

jaohaohsuan avatar Apr 11 '22 22:04 jaohaohsuan

I found something that helped in my case. What happened was the following:

  • I had a .ts file with a template in it (i.e. using 'template')
  • I have angular-eslint configured through overrides
  • When betterer/eslint tried to test a rule that required type information on that .ts file, it failed on the template inside the .ts file with a You have used a rule which requires parserServices... error

I think this happens because angular-eslint adds the template files to the list of files to be checked dynamically, but betterer-eslint has only passed the ESLint configuration for the original .ts file, so there's nothing that tells ESLint about what parserOptions should be used for the html file.

I managed to sidestep the issue by moving the templates to their own .html files, but it should not be necessary. I'm not sure about the best course of action for this case, but hope it helps!

jbahamon avatar Oct 02 '23 16:10 jbahamon

I have the same issue, but then for a component inside a spec file.

@Component({
  template: `<dummy-step><button #dummyNext>next</button></dummy-step>`,
})
class DummyHostComponent {}

work933k avatar Feb 15 '24 11:02 work933k