banana-in-box should output '@angular-eslint/template-parser' as the parser

[rongem]

🐛 Bug Report

• tslint-to-eslint-config version: current
• ESLint version: 7.2.0
• Node version: 14.15.5

Actual Behavior

1st problem:

2 rules are not known by tslint-to-eslint-config to have ESLint equivalents. ❓
  The "@typescript-eslint/tslint/config" section of ./.eslintrc.js configures eslint-plugin-tslint to run them in TSLint within ESLint.
  * tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "import-spacing".
  * tslint-to-eslint-config does not know the ESLint equivalent for TSLint's "whitespace".

2nd problem:
All is well! ✅
... then, while first eslint

Oops! Something went wrong! :(
Error: Error while loading rule '@angular-eslint/template/banana-in-box': You have used a rule which requires '@angular-eslint/template-parser' to be used as the 'parser' in your ESLint config.

3rd problem
After changing the parser value:

Oops! Something went wrong! :(
Error: Failed to load parser '@angular-eslint/template-parser' declared in '.eslintrc.js': Cannot find module '@angular-eslint/template-parser'

4th problem
After installing the package

Oops! Something went wrong! :(
Error: Error while loading rule '@typescript-eslint/dot-notation': 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.
Looking into .eslintrc.js:
    "parserOptions": {
        "project": "tsconfig.json",
        "sourceType": "module"
    },

Huh?

Expected Behavior

A smooth transition for a standard angular project, importing all rules, especially the whitespace-rule, setting the correct config, and not leaving me behind clueless with a misleading error message.

Reproduction

https://github.com/rongem/cmdb/tree/master/ng-frontend

[JoshuaKGoldberg]

Hi @rongem, thanks for filing this issue! Sorry to hear the upgrade path for your Angular frontend is giving you pain.

2 rules are not known by tslint-to-eslint-config
especially the whitespace-rule

Unfortunately, you might be out of luck here. The TSLint import-spacing and whitespace rules are a bit convoluted and don't have exact matchups in ESLint. If you wanted to, you could file separate missing converter issues for them -- but I'm not confident we'd be able to figure out converter logic to match them up directly. import-spacing might be easier; whitespace would be quite difficult.

👉 These reasons are part of why we recommend using Prettier, by the way. I understand some don't want it, but it really is much easier for lint tooling to have Prettier handle the formatting.

---

requires '@angular-eslint/template-parser' to be used as the 'parser' in your ESLint config.

Interesting! That looks like a bug in tslint-to-eslint-config. We should output the correct parser for @angular-eslint rules.

FYI @JamesHenry -- I can try to look into this today or tomorrow.

[JamesHenry]

@JoshuaKGoldberg Sounds good, but can we start with some prereleases please? Right now the tooling I have built on top of this library expects a flat list of rules.

@rongem I strongly recommend you read the README of https://github.com/angular-eslint/angular-eslint as it will help you understand why different parsers are needed for different file types.

I trust you are not using the Angular CLI? If you are using the Angular CLI you should be using the schematics from angular-eslint and not using this tool directly

[JoshuaKGoldberg]

Ok @JamesHenry I've read through it and I think I mostly understand.

It sounds like there are some pretty Angular-specific pieces of logic that would be rather difficult to encapsulate in tslint-to-eslint-config. Perhaps the best route for this project would be a documentation push?

• Add a > If you're using Angular ... notice in the README.md that points to angular-eslint
• Add metadata to the template rules that indicate they should be done with angular-eslint

[rongem]

That would be a good approach in my opinion. The main reason why I complained was that I read:

"⚡ (wow, so simple!) ⚡
The tslint-to-eslint-config command reads in any existing linter, TypeScript, and package configuration files, then creates an .eslintrc.js result based on them.
For any TSLint rules with corresponding ESLint equivalents,"

After reading that, I did not even get an idea that there could be angular specific extra tools after reading that.

And, since you are already detecting angular (@angular-eslint/template/banana-in-box shows that), you should add a warning to the output that there may (or probably will) be problems. Thank you.