EmmetをJSX内で利用する方法(VSCode)

1553 ワード
emmet VSCode React JSX JSX テキストリンク

概要

VSCodeは初期設定の状態でもEmmetが使えるようになっていますが、JSX内では下記のように使用できない。

初期設定でdivタグ入力時

設定を変更して、emmetを機能するようにしていきます。

設定

1.設定を開く

VSCode内で
Mac: Command + ,
Windows: Ctrl + ,

2.設定変更

下記の手順で設定変更

①拡張機能
②Emmet
③setting.jsonで編集

setting.jsonに設定を追加

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

これでdivを入力後tabを押すと以下のようになります。

以上です。