Typescript backticks syntax highlighting

Question

I am using angular 2 with typescript and when writing an inline template you use backticks.

but the content inside is not highlighted it stays the same color making it difficult to debug sometimes.

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

})

Is there a workaround this? Also is there any IDE that supports this?

Answer 1

I have been informed by Nikolay Yakimov that as of v12 backticks syntax highlighting is no longer supported as atom-typescript does not have the resources to support their own grammar fork.

It also appears that atom-typescript-zh-backticks is no longer available either.

While I like some of the new features in v12 I feel that the loss of syntax formatting is too much of a cost.

atom-typescript still maintains a legacy branch, which has backticks syntax highlighting. To install that you will need to:

Uninstall atom-typescript from the package manager in atom. Then:

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

Relaunch atom and check atom-typescript in the package manger. More than likely you will need to rebuild it and relaunch atom again.

Hopefully sometime soon someone will come up with a solution that doesn't rely on a legacy package. But until then this should work.