728x90
반응형
visual code에서 html이라는 단어만 써도 아래 그림처럼 html 문법에 맞는 형식을 사용할 수 있습니다.
하지만 html:5를 선택한 경우 너무 많은 내용이 들어가 있고, 복잡해 보입니다.
그래서 오늘은 "Configure User Snippets" 사용하여 html 자동완성 파일을 수정해볼까 합니다.
1. VSCODE 왼쪽 하단의 설정에서 "Configure User Snippets"을 선택해줍니다.
2. html.json 선택
3. html.json 파일 수정
html.json을 클릭하면 아래 사진처럼 주석이 포함된 코드가 있습니다.
주석에 있는 예제에 따라 새롭게 html.json을 작성해보겠습니다.
작성 후에는 반드시 저장을 해야합니다.!!
(티스토리에는 .json 확장자를 지원해주지 않아 .html로 코드 올립니다.)
{
"english html form": {
"prefix": "english_html_form",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"<meta charset=\"UTF-8\">",
"<title>$1</title>",
"</head>",
"<body>",
"<script>",
"$2",
"</script>",
"</body>",
"</html>"
],
"description": "html auto_complete"
}
}$1과 $2는 자동 완성이 된 후, 커서 위치 순서를 가리킵니다.
위와 같은 코드를 저장하고 html 자동 완성을 실행하면, title 태그에 커서가 옮겨지고, title 태그에 내용을 작성 후 tab 키를 누르면 script안으로 커서가 옮겨집니다.
4. 사용
저는 prefix 부분을 english_html_form으로 적어줘서, 아래 그림처럼 해당 단어가 나오게 됩니다.
english_html_form을 선택하면 아래 그림처럼 나오는데, 들여 쓰기가 돼있지 않아 깔끔하지 않습니다.
5. 들여 쓰기
- 1) Ctrl + A
- 2) Ctrl + K + F
가독성이 확실히 좋아졌습니다.
이렇게 VSCODE의 html 자동완성 파일을 수정해보았습니다.