【PR】を含みます。

プログラミング

【VS Code】Smarty（.tpl）のインデントや補完をHTMLのように設定する方法

VS Code Smarty（.tpl）のインデントや補完をHTMLのように設定する方法

Smartyの.tplファイルをVS Codeで編集していて、補完が効かない、Emmetが使えない、インデント幅がおかしいといった経験はありませんか？

VS Code は非常に高機能なエディタですが、.tplファイルはデフォルトでは適切に認識されないため、少し設定を加える必要があります。

この記事では、Smartyの.tplファイルをHTMLのように編集するためのVS Code設定方法を解説します。

settings.jsonを編集して設定する

まず、settings.jsonを開きます。

settings.jsonの開き方

  1. VS Code を開く

  2. キーボードショートカットを押す

    • Windows / Linux：Ctrl + Shift + P
    • Mac：Cmd + Shift + P

  3. コマンドパレットが表示されたら、以下を入力

    Preferences: Open User Settings (JSON)

  4. 候補に出てきた「Preferences: Open User Settings (JSON)」を選択

    Preferences: Open User Settings (JSON)

  5. 以上でsettings.jsonを開くことができます。

Smarty用の設定をsettings.jsonに追加する

json
Copy
"emmet.includeLanguages": {
  "tpl": "html"
},
"files.associations": {
  "*.tpl": "html"
},
"[html]": {
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

設定内容の解説

"emmet.includeLanguages": {
  "tpl": "html"
}

tplをhtmlとして含めることで、EmmetをHTMLと同じように.tplにも適用することが可能です。

これにより、.tplファイルでもEmmet補完が利用できるようになり、HTMLファイルと同じようにdiv>ul>li*3のような短縮記法が可能です。

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

.tplという拡張子のファイルをHTMLファイルとして扱うようにVS Codeに指示しています。

これにより、.tplファイルでもHTMLの構文ハイライトや補完機能（スニペット）が使えるようになります。

"[html]": {
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

このブロックは、HTMLファイル用のインデント設定です。

.tplファイルをHTMLとして認識させているため、ここで設定した内容が.tplにも適用されます。

editor.tabSize: 2インデント幅を 2 スペースに設定します。
editor.insertSpaces: trueタブ文字（\t）の代わりにスペースでインデントします。

補完やインデントが反映されない場合の対処法

設定を反映させたのにうまく動かない場合は、以下を試してみてください。

  • VS Code を再起動する
  • 該当ファイルを一度閉じてから再度開く

まとめ

Smartyの.tplファイルも、ちょっとした設定を加えるだけで HTMLと同じような編集環境を整えることができます。

今回のポイント

  • Emmet補完を有効にする
  • .tplをhtmlとして認識させる
  • タブサイズを2スペースに設定

作業効率を上げたい方は、ぜひ本記事を参考にVS Codeの設定を見直してみてください。

-プログラミング
-,