[VSCode_Emmet] React 에서 HTML 태그 자동완성 기능 적용하기

React 강의를 듣는 도중 강사님의 VSCode 화면과 달리 나의 VSCode 에서는 JSX 를 이용하는 경우에 HTML 태그 자동완성 기능이 적용되지 않는다는 사실을 발견했다.

코드 작성을 쉽고 편하게 만들어주던 Emmet 기능을 여기서 잃을 수 없기에...!!! 구글링을 해서 방법을 찾아보았다.

다행히 어렵지 않게 해결할 수 있었다.

---

💜 React 에서 Emmet 기능 사용하는 방법

1. VSCode 를 열고 F1 키를 누른 후 "기본 설정: 설정 열기(JSON)" 검색 및 클릭

• 기본 설정을 검색하다보면 미묘하게 Preferences 가 다른 두 가지 항목이 나온다.
• Preferences: Open Default Settings (JSON) 라고 표기된 기본 설정은 읽기 전용 모드로만 사용가능하며 수정이 불가하다.
• 따라서 Preferences: Open Settings (JSON) 라고 표기된 기본 설정을 열어줘야 한다.
• 영어 모드로 사용한다면 Open Settings(JSON) 을 클릭해주면 된다.

---

2. settings.json 파일에 emmet.includeLanguages 관련 코드 추가

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

• settings.json 파일에 위 코드를 추가해준다.
• 위치는 어디든 상관 없지만 다른 코드들 사이에 넣을 거라면 마지막에 쉼표를 넣어주어야 오류가 발생하지 않는다.

• 나는 코드의 맨 마지막 줄에 추가하고 저장해주었다.

---

3. React 에서 Emmet 사용 가능 여부 확인

• Emmet 관련 설정을 해주기 전에는 div 라는 글자를 입력해도 Emmet 설정 관련 내용이 뜨지 않았는데, 위의 과정으로 설정한 이후에는 Emmet 을 사용 가능함을 알 수 있다.