HTML을 작성하다 보면 항상 동일하게 입력해야하는 부분이 있다.
그걸 Visual Studio Code에서 매번 칠 필요없이 양식을 불러올 수 있는데 어떻게 하는지 알아보자.
1. 하단에 HTML로 설정이 되어 있는지 확인 필요
우선 사용하고자 하는 HTML 파일을 생성한 후, VS Code 하단에 설정을 확인해보자.
HTML 이라고 제대로 설정되어 있으면 괜찮지만 그렇지 않으면 HTML 으로 바꿔줘야 한다.
2. ! + Tab 혹은 html:5 입력
! + Tab 혹은 html:5 를 작성하게 되면,
VS Code에 입력되어 있던 기존 HTML 템플릿이 자동완성된다.
3. 템플릿 수정하기
그럼 이 자동완성 된 템플릿은 어떻게 수정할까?
VS Code 하단에 위치한 설정 아이콘을 눌러 사용자 코드 조각에 들어가보자.
HTML을 입력하고 클릭 👆
이런 창이 뜨게 되는데, 적혀있는 주석들을 잘 읽어보면 어떻게 써야할지 알 수 있다.
주석들을 참고해서 작성 후 저장하면 템플릿이 추가되는 구조이다.
주석은 대략 이렇게 쓰여져 있다.
html을 위한 스니펫을 여기에 적습니다.
각 스니펫은 스니펫 이름과 prefix, body, 그리고 description에 의해 정의됩니다.
prefix는 트리거로 사용되고, body는 확장되거나 삽입될 것을 위한 것입니다.
사용 가능한 변수는 탭에 의해 멈추는 위치인 $1, $2이 있고, $0은 최종 커서의 위치입니다.
${1:label}, ${2:another}는 placeholder이며 동일한 id를 가진 것과 연결됩니다.
아래는 템플릿 예시이다.
"langko html form" : {
"scope": "html",
"prefix": "lko-html-form",
"body": [
"<!DOCTYPE html>",
"<html lang="ko">",
"<head>",
"<meta charset="UTF-8">",
"<title>$1</title>",
"</head>",
"<body>",
"$2",
"</body>",
"</html>"
],
"description": "lang korean 자동코드"
}
각자 필요성에 따라 변경하여 사용해보도록 하자
그럼 Ctrl + S 로 저장을 하고,
prefix 이름인 lko-html-form 을 입력해주자.
그럼 아까 입력했던 템플릿이 자동완성되는 것을 볼 수 있다!
'💡 etc.' 카테고리의 다른 글
| [Git] 폴더 이름 소문자 변경하기 (0) | 2022.05.29 |
|---|---|
| JS Code Extension 플러그인 추천 (0) | 2022.01.08 |
| Bitnami MAMP로 HTML 연결하기 (0) | 2022.01.07 |
댓글