VSC) NextJS 프레임워크 사용 시 html 태그 자동 완성이 안될 때

NextJS를 사용할 때는 jsx가 아닌 js 파일 확장자를 사용하여 실습을 진행할 때 html 태그가 자동 완성이 안됩니다...

해결 방법

VSC에서 Ctrl + Shift + p 를 눌러 settings.json 검색 후 아래 내용을 추가해줍니다.

  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  }

1. emmet.includeLanguages

JavaScript 파일(.js)에서는 JSX 문법을 사용하도록 javascriptreact로 설정해줍니다.

TypeScript 파일(.ts, .tsx)에서는 JSX 문법을 사용하도록 typescriptreact로 설정해줍니다.

2. emmet.syntaxProfiles

JavaScript 파일에서 JSX 문법(React 스타일)을 적용하도록 지정해줍니다.