Skip to content
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.

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

Column numbers are off by one when codelyzer reports errors in template files #859

Open
undeadcat opened this issue Jul 23, 2019 · 0 comments
Labels

Comments

@undeadcat
Copy link

Describe the bug

Column numbers are off by one when codelyzer reports errors in template files (works fine in inline templates).

With an inline template, errors are reported at the syntax element causing the error:
image

$ node_modules/.bin/tslint src/app/app.component.ts 

ERROR: src/app/app.component.ts:8:29 - Avoid using '$any' in templates
ERROR: src/app/app.component.ts:9:26 - Invalid binding syntax. Use [(expr)] instead

If we replace inline (template) with file (templateUrl), errors are reported one character to the left of the element causing the error:
image

$ node_modules/.bin/tslint src/app/app.component.ts 

ERROR: src/app/app.component.html:3:18 - Avoid using '$any' in templates
ERROR: src/app/app.component.html:4:15 - Invalid binding syntax. Use [(expr)] instead

If we move the element causing the error to the start of the line:

<div>
  <h1>
    Welcome to {{
$any(title) }}!
  </h1>
</div>

The error is actually reported on the previous line:

$ node_modules/.bin/tslint src/app/app.component.ts 

ERROR: src/app/app.component.html:3:18 - Avoid using '$any' in templates

I haven't checked all rules that report errors in templates, but it seems to affect most of them (see example with template-no-any and template-banana-in-box below, also reproducible with template-acessibility- rules).

This is probably a non-issue when using codelyzer via the CLI, but would be relevant for editor integrations where it is important to highlight the correct element (I'm trying to extend Intellij IDEA's tslint support to include codelyzer errors, but I'm not sure if it will ultimately work).
So feel free to take this into account when deciding the issue's priority...

To Reproduce
To reproduce, create a new Angular project (either via Angular CLI or manually) with the tslint.json, app.component.ts and app.component.html files below, then invoke node_modules/.bin/tslint app.component.ts

Code
tslint.json

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules": {
    "template-no-any": true,
    "template-banana-in-box": true
  }
}

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'codelyzer-offsets-bug';
  fontSizePx: any;
}

app.component.html

<div>
  <h1>
    Welcome to {{ $any(title) }}!
    <app-sizer ([size])="fontSizePx"></app-sizer>
  </h1>
</div>

Expected behavior
For the example code above, the expected behavior would be to have template-no-any report an error at 3:19 (actually reported at 3:18), template-banana-in-box error at 4:16 (actually reported at 4:15).

Environment

  • Version [e.g. 22]: 5.1.0
  • OS: [e.g. iOS]: macOS
  • Node.js version: 10.5.0
  • Package manager (yarn/npm) version: npm v.6.4.1
  • Angular version: 8.1.2
  • tslint version: 5.18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants