簡単! HTMLなどのクォーテーション内でスニペットを展開する方法

Visual Studio Codeのデフォルトの設定では、クォーテーションマーク内等でスニペットを展開することができません(少なくとも私の環境では)

クォーテーション内でスニペット展開されない問題

例えばphpファイルを編集中に、「html内にphpタグを挿入したい」ってことがよくあります。

何もないところに普通に記述するとスニペットの候補が出現し、Tabキー(もしくは候補をクリック)で問題なく展開することができます。

ちなみにPHPタグを展開するスニペットの登録方法は以下のページで公開しております。
【Visual Studio Code】「php」 + tabキーでphpタグを展開するスニペットを作成する

ですがクォーテーション内ではうまく展開してくれません。
(ノД`)

 

なんとも歯がゆい現象ですw

そこで設定を変更してクォーテーション内でもスニペットを展開できるようにします。

やり方

VSCodeの左下にある歯車のアイコンから[設定]を選択します。

設定項目がたくさん出てくるので、検索ボックスに「tabcomp」というキーワードを入力して設定を絞り込みます。

Editor: Tab Completion という項目が出てくるので設定を[on]にしてください(設定は自動的に保存されます)

再びスニペットを呼び出してみます。

今度はうまくいきました!

Emmetとの併用

Emmetを併用していると、たまにTabキーで次の編集ポイントへ移動してしまうので、その場合はEscキーで一度Emmetの編集を解除してから試してみましょう。

さいごに

いかがでしたでしょうか?
意外と簡単に設定ができましたね。

同じ悩みを持つ人の解決策になれば幸いです。
それではまた〜 Happy coding!