vs code 에서 react에 emmet 적용하는 방법

코딩을 할 때 무의식 적으로 사용하게 되는 emmet이 React 프로젝트시 적용이 안되는 점을 발견했습니다. 직접 하드코딩하면 좋긴 하지만 emmet을 속도가 빨라져 작업효율을 높힐수 있기도 한데요, 오늘은 간단하게 vs code에서 react 작업을 할 때 emmet을 적용하는 방법에 대해서 알아보도록 하겠습니다.

 

react emmet 적용하기

 

1. 먼저, 환경설정으로 들어가줍니다. (맥 기준)

Code - Preferences - Settings

 

2. User와 Workspace 탭이 있는데요, 여기에서 'Workspace'로 들어가줍니다.

 

3. 'Include Languages'를 클릭해줍니다.

 

4. 여기에서 친절하게 안내 문구에 써있는것처럼 Item에는 'javascript'를, 그리고 value 값에는 'javascriptreact'를 입력해주시고 오케이 버튼을 클릭해주시면 아래 저처럼 item과 value가 쌍으로 잘들어가게 됩니다. 

 

emmet vscode

5. 그럼 react 작업을 할 때에도 emmet이 적용된 것을 확인할 수 있습니다. : )