こんにちは、Soyです。
VSCodeでReactを使うときに、Componentの中のHTMLの自動入力補完をさせるための設定をご紹介します。
Visual Studio Codeのバージョン
Version: 1.41.1
Settingsを開く
Settingsの開き方は2通りあります。
⌘ + p で検索窓を開いて
>open user settings
と打つ。
![VSCode settingの開き方](https://web.soybelln.com/blog/wp-content/uploads/2020/01/vscode-setting1.png)
または、パソコンのメニューバー(macの場合)から
Code → Preferences → Settings
と進む。
![VSCode settingの開き方](https://web.soybelln.com/blog/wp-content/uploads/2020/01/vscode-setting2.png)
settings.jsonを編集する
Settingsを開いたら、
Extensions → Emmet
をクリックして、Edit in setting.jsonを開きます
![VSCode settings.jsonの開き方](https://web.soybelln.com/blog/wp-content/uploads/2020/01/vscode-setting3.png)
その中に、
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
と記入して完了です!
これで、Reactコンポーネントの中でもtabキーを使って爆速コーディングができるようになります♪
ex, h1.title → <h1 className=”title”></h1>