84
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-07-15

概要

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

初期設定でdivタグ入力時
スクリーンショット 2019-07-16 0.02.15.png

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

設定

1.設定を開く

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

2.設定変更

下記の手順で設定変更

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

UNADJUSTEDNONRAW_thumb_5.jpg

setting.jsonに設定を追加

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

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

以上です。

84
39
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
84
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?