본문 바로가기

환경 설정

[VSCode] doctype ! 느낌표 tab 자동완성 안됨 문제 해결법 (윈도우/맥)

문제 발생

 VSCode 에디터에서 HTML 작성 시 기본적으로 태그 자동 완성 기능이 제공된다. !(느낌표)를 입력 후 Tab키를 누르면 아래와 같은 기본 골격이 자동완성 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 그런데 언제부턴가 작동하지 않아서 해결책을 찾아 보았다.

해결 방법

1. 언어 모드 변경

 보통은 언어 모드가 Django HTML로 설정되어 있어서 작동하지 않는 문제가 발생한다. VSCode 아래쪽에 세팅되어 있는 언어 모드를 다음과 같이 HTML로 바꿔주자.

2. Emmet 기능 활성화 여부 확인

 우선 Settings 창을 열어보자. [ Code > Preferences > Settings ] 그리고 단축키는 다음과 같다.

  • macOS :  + ,
  • Windows : Ctrl + ,

 Settings 검색창에 "emmet trigger"를 검색 후 체크 박스를 체크하면 기능이 활성화 될 것이다.

emmet 기능 활성화 체크하기