VSCode html 기본양식 자동완성 방법 환경설정

visual studio code에서는 코드의 기본 양식을 자동 완성 시켜주는 기능이 있습니다. 코드를 자동완성을 하게 되면 처음에 번거롭게 <html> <head> 같은 태그들을 묶어줄 필요가 없습니다.

먼저 터미널을 열어서 프로젝트를 하나 만들어 줍니다. 프로젝트는 자신이 원하는 대로, 원하는 방식으로 만들어 주시면 됩니다.

저는 flutter 프로젝트를 하나 만들어 주겠습니다.

새로문 문서를 하나 만들고 파일을 생성해 줍니다.

확장자는 꼭 html로 생성해 주셔야 vscode에서 인식을 하고 html 기본 양식을 불러올 수 있습니다.

html을 입력해 보시면 아래 도구들이 나오게 됩니다. 여기서 아래의 옵션을 선택해 보시면 자동완성이 됩니다.

더 쉬운 방법으로는 !를 입력하시고 tab 키를 눌러보시면 html 기본 양식을 바로 불러오실 수 있습니다.

gif 파일로 보시면 위와 같이 생성할 수 있습니다.

아마 !+tab을 하셔도 같은 결과가 나올 겁니다.

이제 마우스 우클릭을 하시고 Live Server를 실행해 주시면 브라우저에서 바로 코드 실행을 만나보실 수 있습니다.

live server가 뭔지 잘 모르시는 분들은 아래의 확장 프로그램 추천 글에서 live server의 용도에 대해서 잠깐 확인하신는 것을 추천드리면서 이 글을 마치겠습니다.

[코딩] VSCode 필수 확장프로그램(Extension) 추천

안녕하세요 오늘은 코딩을 하실 때 정말 유용한 Visual Studio Code의 확장 프로그램들을 소개해 드리려고 합니다. 총 5가지 프로그램들을 소개해 드리려고 하고요, 물론 못쓰는 언어도 있겠지만 대

hnm1.tistory.com

감사합니다.

RedMeta