10000 [feat] angular templates: lint expressions in html · Issue #202 · angular-eslint/angular-eslint · GitHub
[go: up one dir, main page]
Skip to content

[feat] angular templates: lint expressions in html #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
8000
Closed
frederikdekegel opened this issue Nov 27, 2020 · 8 comments
Closed

[feat] angular templates: lint expressions in html #202

frederikdekegel opened this issue Nov 27, 2020 · 8 comments
Labels
enhancement New feature or request

Comments

@frederikdekegel
Copy link

Hi,

I added the default eslint eqeqeq rule to the *.component.html override as stated below

{
  files: ['*.component.html'],
  parser: '@angular-eslint/template-parser',
  plugins: ['@angular-eslint/template'],
  rules: {
    eqeqeq: ['error', 'smart'],
    '@angular-eslint/template/banana-in-box': 'error',
    '@angular-eslint/template/no-negated-async': 'error',
  },
},

Doing so, I thought, I could lint things like *<div class="col-4" ngIf="isNewEmployee == 0"> => *<div class="col-4" ngIf="isNewEmployee === 0">

Unfortunately, this doesn't work. I guess that expressions in angular templates cannot be eslinted.

Is this a feature that could be added? For TS files everything is a completely setupped in eslint, so it is unfortunate that TS / JS code in the angular templates can pass through all quality checks we have set.

Thank you in advance.
@JamesHenry
Copy link
Member

Is this possible today in TSLint/Codelyzer?

@frederikdekegel
Copy link
Author

Hi James,

From the top of my head, I would say "No, it is not included in TSlint" though my experience with TSLint is limited. Is existance in TSLint /codelyzer a prerequisite for asking about a feature?

Kind regards
Frederik Dekegel

@JamesHenry
Copy link
Member

No, but naturally parity with the existing solution is the top priority so it’s useful context

@JamesHenry JamesHenry added enhancement New feature or request and removed awaiting response labels Nov 28, 2020
@mwmcode
Copy link
mwmcode commented Dec 2, 2020

I'm not sure if this is related but...
I'm trying to get eslint-plugin-jsx-a11y to work but no luck yet (even after configuring eslint in VSCode to validate .html files.

Do you think what I'm doing is related to this issue?

{
      "files": ["*.html"],
      "plugins": ["jsx-a11y"],
      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:jsx-a11y/recommended"]
}

@JamesHenry
Copy link
Member
JamesHenry commented Dec 2, 2020 •
edited
Loading

@mustafawm JSX and HTML are really very different things and so rules intended to run on JSX will not work on HTML.

Rules would need to be written that expect the AST that the Angular Compiler produces for HTML templates (because that’s what we use in this tooling)

@mwmcode
Copy link
mwmcode commented Dec 2, 2020

😅 first time i work on ng and totally missed that...though it's in the name of the package

Thanks.

@rafaelss95 rafaelss95 mentioned this issue May 13, 2021
Merged
@rafaelss95 rafaelss95 mentioned this issue Jun 11, 2021
Closed
@JamesHenry
Copy link
Member

Hey folks, I'm going to close this one as it is simply not feasible to implement.

The language supported in Angular HTML templates is not the same as the JavaScript/TypeScript we know and love in our other source files. This means entirely bespoke tooling would need to be created to analyze it separately from what we do today for Components, Services etc - the existing tooling simply cannot cover this.

Additionally, the custom subset of the ECMAScript language that Angular supports within its templates is an ever-evolving thing and it would be essentially impossible for folks outside the Angular compiler team to keep up with, never mind build tooling for:

angular/angular#43485

Just look at the number of things that the compiler currently doesn't support in templates but may or may not support soon.

We will all need to rely on Angular compiler (and by extension, the Angular language service in IDEs) checks (which it is getting better and better at providing) for protecting us against potential issues and inconsistencies in our Angular template expressions.

@JamesHenry
Copy link
Member

FWIW even though we cannot do this in a generic way using existing rules - we will definitely consider various specific rules that can be built for Angular HTML template ASTs, for example this one which has been proposed: #599

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@JamesHenry @frederikdekegel @mwmcode
0