こんばんは
アロハな男、やすのりです！
今日は、Vue.jsでプログラミングしていく上で、必須級とも言われているVeturという拡張機能の.vueファイルでのEmmet動作がうまくいかず、解決するまでに時間がかかったので備忘録も兼ねて書いていこうと思います。
まず、結論から述べますと...
結論
拡張機能の設定画面でEmmetと検索して、下記画像のチェックボックスにチェックを入れると、TabボタンでのEmmet記法が有効化されます!!
そもそもEmmet記法って？
Emmet記法とは、HTMLやCSSをコーディングしていく際にタグやプロパティの一部だけを入力するだけで、タグやプロパティを生成する為の記法です。
具体例をあげると、
例：
div#testTabキーを押すと →<div id='test'></div>
こんなふうにHTMLタグを作成できたり、
例：
w100Tabキーを押すと →width: 100px;
CSSのプロパティの記述が簡単にできたりします。
ただ、これは通常の.htmlファイル等だとTabキーを押さなくても、下記画像の様に変換先の候補が表示されていて、該当の候補を選択することで同じことが実現できていました。
ですが、こと.vueファイルでは通常ではこの動作が適用されていませんでしたので使うことができませんでした。
Vetur
そこで登場するのが、冒頭でも紹介したVeturという拡張機能です。
↓英語になりますが、こちらにVeturの設定方法や拡張機能の説明が載っています。
https://vuejs.github.io/vetur/
VeturをVSCodeにインストールすることにより、拡張機能の中の1つとして.vueファイル内でのEmmet記法動作があります。
よし、それならこれをインストールすれば万事解決っ!!とはならず...
この様にinputタグを作成しようとしてみても候補はおろか、Tabキーを押しても何も起きない状況でした...
『何か設定が必要なのかな...でも、いろんな人の記述を見てみてもVeturをインストールするだけで大丈夫って書いてあるし...』と八方塞がりな状態でした。
そんな中、下記のQiita記事を発見することができました!!
【高速コーディング】Emmetを使ってみよう!
この記事のおかげで設定の中のチェックボックスにチェックを入れることを知ることができました。
しかし
結果として、.vueファイルでもEmmet記法が使える様になりましたが、この様な設定をしないといけないとはVetur関連の記事を読んでも書いてはいませんでしたし、元々.htmlではEmmet記法を使用できていました...
これは私の環境下だけでの事象なのかどうなのか...ゆくゆくは原因を突き止めたいですね。
もし、私と同じ様な状況になった人は設定を今一度確認してみてください。