[React] vscode에서 리액트 JSX 태그 자동완성 적용 방법

개요

HTML에서 꺽쇠(<, >)를 입력하지 않고 태그명만 입력하면 자동완성되는 기능에 익숙해지고 보니, 리액트에서 JSX태그도 자동완성을 하고싶은데... 익스텐션을 찾아봐도 마땅히 나오는게 없었다.

서치를 해보니 따로 익스텐션 설치 없이도 할 수 있는 기능이었다.

 

방법1 - 개별 파일에 적용

VScode창 오른쪽 하단에는 현재 커서 위치나 인코딩 형식, 적용중인 익스텐션 등이 나와있는 바가 있다.

그중에서도 (js파일을 열고있는 상태라면) JavaScript라고 써져있는 부분이 있다. 이걸 클릭한다.

그러면 화면 상단에 여러 언어들이 나열된 언어 모드 선택 창이 뜬다.

react를 검색해서 JavaScript React를 눌러준다.

이제 JSX 태그를 작성해보면 자동완성이 뜨는걸 확인할 수 있다. li>a 등의 요약식도 적용된다.

참고로 아이콘 익스텐션을 사용하고 있다면 이렇게 js파일의 아이콘도 리액트 아이콘으로 바뀐다.

 

방법2 - setting.json에 설정 

다만 방법1은 각각의 파일마다 직접 설정해줘야하기 때문에, 파일 수가 많아지면 일일히 설정하기가 번거로워진다. 전체적으로 적용을 시켜주려면 설정에서 해결할 수 있다.

 

vscode의 설정에 들어가(Ctrl+Shift+P) setting.json에 아래 코드를 추가해준다.

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },
 "emmet.includeLanguages": {
    "javascript": "html"
}

 

방법1 처럼 아이콘이 바뀌거나 하진 않지만 JSX내에서 태그 자동완성이 뜨는걸 확인할 수 있다.

---

참고 자료

https://stackoverflow.com/questions/39320393/jsx-or-html-autocompletion-in-visual-studio-code