Emmet를 JSX 내에서 사용하는 방법 (VSCode)

개요

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을 누르면 다음과 같이 됩니다.


이상입니다.