Visual Studio CodeでReactの.jsファイルでもEmmetが効くように設定する

VSCodeで作業してたらReactの.jsファイルでEmmetが効かなくて不便だったので使えるように設定しました。

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方 [ リブロワークス ] 価格：2,640円（税込、送料無料) (2026/2/17時点)

設定方法

VSCode の setting.json 内の
"emmet.includeLanguages"に以下のとおり 値を追加します。

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

またはVSCodeの左下にある歯車 ⚙ から[設定]を開き、 emmet を検索、その中にある "emmet.includeLanguages" の項目にあるボタン[項目の追加]から手動で追加してもOKです。

キー javascript / 値 javascriptreact


この際、各言語に使う識別子は以下のように決められています。

Language 言語	Identifier 識別子
JavaScript	javascript
JavaScript JSX	javascriptreact

設定がすんだら念のため再起動。

これでReact書いているときもEmmetが効くようになりました！平和！ :D

参考

Emmet in Visual Studio Code

Emmet abbreviations in other file types

https://code.visualstudio.com/docs/languages/emmet#_emmet-abbreviations-in-other-file-types

Visual Studio CodeのEmmet

他のファイルタイプでのEmmetの省略形

https://vscode.dokyumento.jp/docs/editor/emmet#_emmet-abbreviations-in-other-file-types

ReiRev

VSCodeで*.jsに対してEmmetを使う

https://reirev.net/blog/vscode-js-emmet

感謝！:D

ノンプログラマーのための Visual Studio Code実践活用ガイド【電子書籍】[ リブロワークス ]

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス | Alex Banks, Eve Porcello, 宮崎 空 |本 | 通販 | Amazon