[이슈] : jsx 파일에서 emmet 활성화하기

📋 내용 : 리액트 코드 작성 시, vs code가 emmet 자동완성을 지원하지 않음.

저는 마크업을 작성할 때 에밋을 자주 활용하는데요, 갑자기 vs code에서 에밋을 지원하지 않아 난감했던 일이 있었습니다.

느아니?! (*~▽~)

원래 지금까지 CRA를 사용해 리액트 프로젝트를 구성하면 jsx 파일에서는 언제나 에밋을 지원했는데, 이게 어떻게 된 일일까요?

이번 문제는 CRA가 아니라 create-next-app을 사용했을 때 발생했는데, 지금까지는 CRA에 포함된 웹팩 설정이 jsx 파일에서 에밋을 자동으로 지원하게끔 도와주는 것이었습니다.

 

그러나 create-next-app에는 이런 설정이 포함되지 않아 에밋이 갑자기 사라지게 된 것으로, 이럴 경우 에디터의 설정을 직접 수정해 에밋을 사용할 수 있게끔 해야 합니다.

해결 방법

control + shift + p (Mac은 command + shift + p)를 누르면 실행할 수 있는 플러그인과 내장 속성이 나타나는데요, [open settings] 을 검색해 Open Settings (JSON) 메뉴에 진입합니다.

그러면 여러분의 vscode에 설정된 항목들이 JSON 파일로 출력될텐데 여기에 에밋을 허용하는 설정을 추가해주면 됩니다.

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

이제 에밋 설정을 추가했다면, 다시 에밋 자동완성을 사용할 수 있게 됩니다. 😄

관련 검색어

• emmet not working on vs code
• emmet doesn't appear on vs code