VS Code Emmet 설정

VS Code를 사용하면서 Tab키로 HTML이나 CSS등 코드 공부를 할때 단축명령 기능을 자주 사용했는데 어느순간 VS Code에서 작동이 되지 않는 경우가 생기더라구요. 

 

이런 경우를 대비해서 VS Code Emmet 설정을 하도록 해 보겠습니다. 

 

1. File > Preference > Settings

 

보통 VS Code의 기능을 확인하거나 설정할 걍우 Preference에서 Settings으로 들어가 필요한 기능을 찾으면 됩니다. 

 

 

여기서 설정 단축키를 보면 Ctrl + ,입니다. 많이 사용하다보면 자연스럽게 외워지겠죠.

 

2. 검색창 Emmet 입력

 

검색창에 emmet을 입력하면 자연스럽게 해당 항목으로 넘어가는데 여기서 Emmet을 클릭합니다. 

 

 

3. Emmet: Trigger Expansion On Tab

 

Tab키로 확장하는 것을 체크해 주면 VS Code에서 단축 플러그인을 사용할 수 있습니다. 

 

 

이제 HTML에서 ! 만  쓰고 탭키를 눌러 보겠습니다. 

 

!만 타이핑

탭키를 누른후 HTML 기본구조

 

이렇게 VS Code에서 Emmet 기능을 설정하고 테스트해 보았습니다.