检测 Angular 2 模板文字中变量的使用

Question

我正在使用 Sublime Text 3 和 ESLint。

当我使用模板文字语法定义我的 Angular 2 模板时，出于某种原因 ESLint 没有捕获方法和属性的用法。

示例：

@Component({
    ..., // omitted for brevity
    template: `
        <button class="btn btn-primary" (click)="toggleOpenAssessment()">
            {{ isOpen ? 'close' : 'open' }} assessment
        </button>
    `
})
export class MyComponentComponent {
    private isOpen: boolean = false;

    private toggleOpenAssessment() { return true; }
}

我从 ESLint 得到的错误：

未使用的方法：'toggleOpenAssessment'
未使用属性：'isOpen'

有人知道我如何调整 ESLint 来检测我在模板文字中使用的方法和属性吗？

Answer 1

遗憾的是，我发现目前这个问题还没有解决方案。

与此行为相关的属性是 TSLint 的 no-unused-variable。

检查 Angular2 模板文件（或模板文字）的引用超出了 TSLint 的范围，因为它们依赖于 TypeScript 的语言服务 API 来查找值的出现。

我终于found a related GitHub issue with an answer from Adi Dahiya了。他说：

Having tslint look into Angular templates is complex. To do it right, we really need to use Angular's template expression parser to get 100% compatibility, then hook Angular as an extension in TypeScript language service. We are close to a first version of VSCode support for angular templates. I'd like to figure out the linting story soon after.

这给我们留下了一些丑陋的解决方法：

根本不使用 private 属性
关闭 TSLint 配置中的 no-unused-variable 标志

我希望在不久的将来他们能找到一种方法来实现这个非常棒的功能！

PS：此外，还有a proposal for no-unused-variable deprecation。

检测 Angular 2 模板文字中变量的使用

Detect Usage of Variables in Angular 2 Template Literal

angular

sublimetext3

sublimetext

eslint

tslint