VSCodeでReactのjsxでhtmlタグが補完されないときのEmmet設定

VSCodeでReactのjsファイルを書いてるときに、htmlタグの候補(Emmet)を表示させる方法です。

「拡張子が.htmlのファイルでは、ちゃんとhtmlタグの候補が表示されるのに、javascriptの中に記述してる仕方ないのかな…」

とお困りの方は、こちらの設定をおすすめします。

なお、本記事ではMacでの手順を記載しています。

目次

拡張設定でEmmetのInclude languagesを設定する

STEP
VSCodeの設定画面を表示する

メニューから「Code」→「基本設定」→「設定」を選択します。

VSCodeの設定画面を表示する
STEP
拡張機能でEmmetのInclude Languagesを設定する

左メニューから「拡張機能」→「Emmet」を選択し、画面右をスクロールして「Include Languages」の項目を表示します。

「項目の追加」ボタンをクリックして、以下を追加します。

キー
javascriptjavascriptreact

これでjavascriptファイル内でhtmlタグを入力したときに、入力候補(Emmet)が表示されるようになります。

新しい環境でVSCodeを使い始めるときなど、こちらの記事を参考に設定してみてくださいね!

それでは、楽しいプログラミングライフを!

▼本記事は、以下の情報を参考にしました

vscode・Emmet Snippetでhtml, css, jsxを手っ取り早くかく(備忘録)
https://qiita.com/genie-oh/items/bf5380a6e8fc464a9cd8

現在、Webサイト改善のために、Google Analyticsによるアクセス分析を勉強しています!

以下のボタンが押された回数を計測中なので、良ければポチっと押していただけると嬉しいです!

\ ポチッと応援ありがとうございます!/

 

みんなにシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次
閉じる