テンプレートリテラルをステキにエディットする拡張機能 Template Literal Editor

JavaScript ベースの開発において、フレームワークの利用がメインの人には、あまりなじみがないかもしれませんが、今ドキの JavaScript には、基本仕様としてテンプレートリテラルという機能があります。僕はプリミティブな言語機能で実装を行う機会がちょいちょいあるため、結構お世話になっています。

• テンプレート文字列 - JavaScript | MDN

このテンプレート機能、便利なのですが VS Code 上でテンプレートの文字列を編集するときは単なる文字列としてエディタ上で認識されてしまい、ちょっと使いにくい部分がありました。

IntelliJ IDEA では、言語インジェクション (Language Injection) という機能があります。

• 言語インジェクション - 公式ヘルプ | IntelliJ IDEA

これを使うと、JavaScript の ES2015 / ES6 のテンプレートリテラル内を別の言語として編集支援を受けることが出来ます。具体的には、HTML のテンプレートをシンタックスハイライト付きで編集できるようになります。

この機能、VS Code にもないかなあと探していたら、拡張機能にありました。めちゃくちゃ便利なので、紹介します。

Template Literal Editor という拡張機能で、インストールをして使います。拡張機能パネルにて検索して見つけましょう。

• Template Literal Editor - Visual Studio Marketplace

使い方は、いたって簡単でテンプレートリテラル内にて、Template Literal Editor を起動するだけです。

export function someHtml (str: string): string {
    return `
        <h1>${str}</h1>
    `
}

すると、以下のようにテンプレートリテラル内の言語の選択表示が行われます。

デフォルトで HTML になっているので HTML モードにて編集する場合はそのまま ENTER で OK です。すると、新しく編集画面が開き、テンプレートを指定の言語モードにて編集することが出来ます。編集が終わったら Close All Subdocuments を実行します。

ただ、標準の状態だと、ショートカットが使いにくいという人もいるかもしれません。僕は以下のように設定して使っています。

[基本設定] -> [キーボードショートカット] にて Template Literal Editor : Close All Subdocuments と Template Literal Editor : Open Literal String as a Subdocuments を好きなキーの組み合わせで変更しましょう。以下は例です。

{
  "key": "ctrl+cmd+o",
  "command": "editor.openSubdocument",
  "when": "editorTextFocus"
},
{
  "key": "ctrl+cmd+c",
  "command": "editor.closeSubdocuments",
  "when": "editorTextFocus"
}

ではでは、ステキなテンプレートリテラルライフを。