Smartyでemmetを効かせる【Visual Code Studio】

デザイナーのオッコです。

私のプロジェクトではよくsmartyを利用するのですが、VSCodeでは、smartyやlarabel bladeといった

テンプレートエンジンを使用するとデフォルトではemmetが効かないんですね。

プロジェクト参画時、一旦あきらめてタグを手打ちしていたのですが、限界でした。

今日はsmartyなどのテンプレートエンジンでもemmetを使えるようにする方法をご紹介します。

VS Codeを開き、設定画面を開きます。

emmet で検索します。

「Emmet:Include languages」という項目を探し、「項目の追加」をクリックします。

項目にsmarty、値にhtmlと入力しOK。

※別途、exampleにあるように、settings.jsonに設定を記載する方法もあり、そちらではダブルクオーテーションで囲みますが、上記UIなら必要ありません。

再起動したらemmetが効くようになっています！！！

emmetの使い方はこちら↓

Web Design Trends

爆速コーディングを実現！Emmetの使い方とVSCodeのおすすめ設定まとめ | Web Design Trends Emmetを使うと、HTMLやCSSを省略記法でコーディングできるようになり、作業効率が大幅に向上します。 VSCodeであれば、デフォルトの状態でEmmetが有効になっていて、特別な...

参考にした記事↓

[VSCode]HTMLファイル以外でもEmmetを使えるようにしたい！

よい爆速コーディングライフを！

関連記事紹介

あわせて読みたい

Emmetで文字列を囲んでタグを後付けする【Visual Studio Code】 デザイナーのオッコです。 htmlを書いていたけど、途中で要素同士をdivで囲む必要が出てきた！ということ、ありますよね。 そんなときに使えるemmetのショートカットを...

あわせて読みたい

VSCode最強すぎるプラグイン「BookMarks」の紹介-ブックマーク機能 デザイナーのオッコです。 みなさん、エディタは何を使っていますか？　せーの！ VSCode～！！ ですよね～！ 私は昔Atomを使っていたのですが、なんとブラックホールの...

システム開発はアピステクノロジーへ

アピステクノロジーでは、システム開発をはじめ、システムパッケージの販売にも力を入れています。

「IT TOOL」をご存じですか？

既に標準の機能が実装されているシステムパッケージを、貴社用にデザインカスタマイズし提供します。

さらに、IT導入補助金の利用で価格を大きく抑えることも可能です。

実績多数、低価格で本格的なサイトができると好評いただいております。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら↓

https://apice-tec.co.jp/実績紹介

ITツール紹介ページはこちら↓

あわせて読みたい

アピステクノロジー｜ITツール｜IT導入補助金　　アピス販売　美容院予約　家事代行システム | Apice Techn... アピステクノロジーは2021年度からIT導入支援事業者として採択された、信頼できるシステム開発事業者です。美容院予約システム、レッスン施術予約販売システムサイトなど様...