检测 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。

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

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

让 tslint 查看 Angular 模板很复杂。要做到这一点，我们确实需要使用 Angular 的模板表达式解析器来获得 100% 的兼容性，然后将 Angular 作为 TypeScript 语言服务中的扩展挂钩。我们接近第一个版本的 VSCode 支持 Angular 模板。我想尽快弄清楚 linting 的故事。

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

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

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

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