VSCodeでReact JSX内のhtmlタグを自動補完する

VSCode で React の JSX コードを書いている時、HTML タグの自動補完機能が効かなくなっているので、 設定方法を調べてみた。

方法 1：VSCode の Emmet 設定でInclude Lanuguagesを追加する

VSCode の設定(setting)を開き、Include Lanuguagesで検索したら、 設定画面が出てくる。

Add Itemで Item 枠にjavascript、Value 枠にjavascriptreactと追加すれば OK。

(よく見たら、erb と ruby が先に自動追加されたようだ。 だから rails で erb ファイルを使っている時、HTML タグが自動補完できて、不便を感じなかったかな。)

方法 2：直接settings.jsonファイルで追加設定する

設定内容自体は方法 1 と同じになる。

VSCode の設定画面の右上アイコンから、settings.jsonファイルを開き、 下記の設定コードを追加する。

"emmet.triggerExpansionOnTab": true,

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

方法 3：右下の言語タブで言語モードを変更する

VSCode 右下の言語タブを開き、Language Mode(言語モード)をJavaScriptからJavaScript Reactに変更する。

---

参照
JSX or HTML autocompletion in Visual Studio Code