codelyzer icon indicating copy to clipboard operation
codelyzer copied to clipboard

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

Open undeadcat opened this issue 6 years ago • 0 comments

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

undeadcat avatar Jul 23 '19 13:07 undeadcat