Typescript backticks语法突出显示

Question

我使用的是angular 2和typescript，当你写一个内联模板时，你会用到反引号。

但是里面的内容没有高亮显示，它保持相同的颜色，这使得调试有时很困难。

@Component({
    selector: "my-template-driven",
    template: `
      <h2>Sign-up Form</h2>
      <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <section>
          <label for="email">Email</label>
          <input type="email" id="email" ngControl="email" #email="ngForm">
          <span class="validation-error" required *ngIf="!email.valid">Not Valid</span>
        </section>
        <section>
          <label for="password">Password</label>
          <input type="password" id="password" ngControl="password" #password="ngForm">
          <span class="validation-error" required *ngIf="!password.valid">Not Valid</span>
        </section>
        <section>
          <label for="confirm-password">Confirm Password</label>
          <input type="confirm-password" id="confirm-password" ngControl="confirm-password" #confirmPassword = "ngForm">
          <span class="validation-error" required *ngIf="!confirmPassword.valid">Not Valid</span>
        </section>
        <button type="submit">Submit</button>
      </form>
    `

})

有解决方法吗？另外，有没有支持这一点的IDE？

Answer 1

Nikolay Yakimov告诉我，由于atom-typescript没有资源来支持自己的语法分支，因此从v12开始不再支持语法突出显示。

看起来atom-typescript-zh-backticks也不再可用了。

虽然我喜欢v12中的一些新特性，但我觉得失去语法格式化的代价太大了。

atom-typescript仍然维护一个legacy分支，该分支具有反引号语法突出显示。要安装它，您需要执行以下操作：

从atom中的包管理器中卸载atom-typescript。然后：

cd ~/.atom/packages
git clone -b legacy https://github.com/TypeStrong/atom-typescript.git
cd atom-typescript-legacy
npm install

重新启动atom并在包管理器中检查atom-typescript。更有可能的是，您需要重新构建它并重新启动atom。

希望在不久的将来，有人会提出一种不依赖于遗留包的解决方案。但在此之前，这应该是可行的。