[React] vscode script 안에서 emmet 사용하는 방법

프론트앤드 개발자라면 한 번쯤은 들어봤을 법한 기능인 emmet, emmet을 사용하면 귀찮게 태그를 일일이 입력할 필요가 없다. 예를들어 div 태그 밑에 ul을 만들고 ul 밑에 li를 3개 만들고 싶다면,

div>ul>li*3 을 치고 tab 키를 눌러주면 다음과같이 짠 하고 만들어주는 게 emmet이다.

<div>

  <ul>

    <li></li>

    <li></li>

    <li></li>

  </ul>

</div>

 

vscode를 사용해서 react를 개발할 때, script 태그 안에서 돔 엘리먼트를 만들 때가 많은데, 이 때 emmet이 작동하지 않을 수 있다. 이를 해결하려면 settings.json 파일에서 emmet에 리액트 환경을 추가해주면 된다.

 

우선 settings.json 파일을 열려면, (단축키: Ctrl + ', 쉼표' )

File -> Preferences -> Settings -> Extensions -> 스크롤을 내려서 "Edit in settings.json" 을 클릭해주면 된다.

 

그 다음 다음 줄을 아무곳에 추가한다.

"emmet.includeLanguages": {"javascript": "javascriptreact"} (다른 셋팅들 사이에 집어넣을 때는 끝에 꼭 , 를 붙여주자!)