テンプレートファイルでも自動補完を使いたい

はじめに

業務の中でVSCodeでSmartyのテンプレートファイルを編集する際、HTMLの自動補完機能がうまく機能しないことがありました。VSCode上でSmartyテンプレートファイルにおいてもHTMLの自動補完を有効にする方法について紹介します。

手順

1. 設定ファイルを開く
   • Windowsの場合: Ctrl + ,
   • Macの場合: Cmd + ,
2. テンプレートファイルをHTMLに関連付ける

   "files.associations": {
        "*.tpl": "html"
   },
   

3. 該当拡張子のファイル内で補完出来ることの確認をする
   • タグの自動補完: タグ名 + Tabキー
   • タグ内にクラス名の付与: タグ名 + クラス名 + Tabキー

まとめ

上記設定をすることでかなり作業の効率化ができたと思っています｡
HTMLに使用できる拡張機能等も利用可能になるので是非設定してみてください｡