Status
- vscode내 내장 emmet html 태그가 설정이 부족한 느낌이 있었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- meta 태그나, style 파일을 받는 기본 태그를 추가하려 함
Details
html.json으로 기존 html setting 설정을 해주는 파일이 존재함
- file 저장 dir
C:\Users\[유저명]\AppData\Roaming\Code\User\snippets
- 기존 파일 수정시 > http.json 파일 수정
- 새로 생성시 > CodeSnippet 파일 생성
Error 1
- 규칙 맞춰 잘 만든거 같은데 vscode를 완전히 껐다 켜도 적용이 안됨
# 변경 전
"html basics":{
"prefix": "html" ,
"body" : [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
" <meta http-equiv=\"Content-Type\" content=\"text/html\">",
" <meta name=\"viewprot\" content=\"width=device-width\", initial-scle=\"1.0\">"
" <title>$1</title>",
" <link href=\"style.css\" rel=\"stylesheet\">",
" <script src= scripts.js></script>"
"</head>",
"<body>",
" $2",
"</body>",
"</html>"
],
"description": "html basics 자동완성"
}
- codesnippet 자동화 툴에 넣어봄
"": {
"prefix": "",
"body": [
" \"html basics\":{",
" \"prefix\": \"html\" ,",
" \"body\" : [",
" \"<!DOCTYPE html>\",",
" \"<html lang=\\\"en\\\">\",",
" \"<head>\", ",
" \" <meta charset=\\\"UTF-8\\\">\",",
" \" <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\",",
" \" <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html\\\">\",",
" \" <meta name=\\\"viewprot\\\" content=\\\"width=device-width\\\", initial-scle=\\\"1.0\\\">\"",
" \" <title>$1</title>\",",
" \" <link href=\\\"style.css\\\" rel=\\\"stylesheet\\\">\",",
" \" <script src= scripts.js></script>\"",
" \"</head>\",",
" \"<body>\",",
" \" $2\",",
" \"</body>\",",
" \"</html>\"",
" ],",
" \"description\": \"html basics 자동완성\"",
" }"
],
"description": ""
}- 나는 prefix전에 키로 이름을 선언한 상태라,
- 제일 밖 {} 중괄호가 감싸져 있는것을 확인 혹시나 해서 {}로 기존 codesnippet을 감싸보기로 함
🤣Solved!
# 변경 후
{ "html basics":{
"prefix": "html" ,
"body" : [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
" <meta http-equiv=\"Content-Type\" content=\"text/html\">",
" <meta name=\"viewprot\" content=\"width=device-width\", initial-scle=\"1.0\">"
" <title>$1</title>",
" <link href=\"style.css\" rel=\"stylesheet\">",
" <script src= scripts.js></script>"
"</head>",
"<body>",
" $2",
"</body>",
"</html>"
],
"description": "html basics 자동완성"
}
}Insight
- snippet 형식이 있고, 자동생성툴을 찾음
- 물론 수동코딩해도 충분함
- Prefix가 emmet 호출시 쓰는 단축키
- scope를 이용해서 언어에 따라 적용가능.
🏠TECH & GOSSIP