mgechev / mgechev/codelyzer

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

Open
#859 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
2.5k
Forks
232
PR merge metrics
No merged PRs in 30d

Description

**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](https://user-images.githubusercontent.com/7509842/61714756-5b344d80-ad64-11e9-97c3-9ac87a07851b.png)

```
$ 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](https://user-images.githubusercontent.com/7509842/61714908-99ca0800-ad64-11e9-85ab-377fbd798ea8.png)

```
$ 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:
```html



Welcome to {{
$any(title) }}!



```
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](https://github.com/JetBrains/intellij-plugins/tree/master/tslint) 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
```json
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"template-no-any": true,
"template-banana-in-box": true
}
}
```

app.component.ts
```typescript
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
```html



Welcome to {{ $any(title) }}!



```
**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

Contributor guide

Open the contributing guide

Research direction

Reproduce the diagnostics with tslint.json, app.component.ts, and app.component.html using the listed template-no-any and template-banana-in-box rules. Compare the reported locations with the expected columns 3:19 and 4:16, including the case where an element starts a line; done means external-template errors identify the offending syntax element accurately.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.