비주얼 스튜디오 코드에서 코드 스니펫을 정의해봅시다.
스니펫이란 아래와 같이 코드를 자동완성을 할 수 있는 기능 같은 거라고 생각하면 됩니다.
제가 쓰는 윈도우 기준으로 작성되었습니다.
1.
File -> Preferences -> User sinppets로 들어가줍니다.
2.
이렇게 들어가면 위에 'Select Snippets File or Create Snippets라고 뜰 것입니다. 보면 각종 파일들의 확장자에 대한 json 파일이 주르륵 있고 'New Global Sinppets file...'이란 것도 있습니다. 스니펫이 작동할 파일의 확장자를 고르는 단계입니다. 만약에 html 파일에서 사용할 스니펫을 만들고자 한다면 html.json을 선택하고 c 파일에서 사용할 스니펫이면 c.json을 선택하세요. 여기에 자신이 사용하는 파일의 확장자가 없으면 'New Global Sinppets file'을 선택해서 확장자.json 파일명으로 새로 만들면 됩니다.
3.
스니펫 파일을 선택하면 이런 형태의 코드가 주석으로 적혀있습니다.
이런 구조로 스니펫을 정의하라는 것입니다.
{
// 예시
// 스니펫 자동완성 예시에서 옆에 설명으로 뜨는 문장
"Print to console": {
// 서두어 (이 키워드를 치면 자동완성 나옴)
"prefix": "log",
// 스니펫 사용시 자동 완성되는 내용.
// 스니펫으로 만들고 싶은 코드를 문자열 형태로 배열에 담으면 됨.
"body": [
"console.log('$1');",
"$2"
],
// 이건 부가 설명으로 적어주는 문장인듯 합니다. (에디터에서 뜨진 않음)
"description": "Log output to console"
},
"snippet2 description":{
// 스니펫을 여러개 정의할 수 있다.
}
}
위의 코드처럼 스니펫을 정의하고나면,
해당하는 파일 확장자 상에서 키워드(prefix)를 입력하면 자동완성이 뜹니다. 😎
$1, $2.. placeholder
스니펫 파일의 주석을 보면 $1, $2 이런 것도 있습니다. 이건 뭘까요?
변수를 넣는 곳이라고 지정을 한 것입니다.
그러면 파일 상에서 스니펫을 자동완성했을 때 커서가 변수의 위치에 있습니다.
또 tab을 누르면 커서가 다음 변수의 위치로 이동합니다. ($1 -> $2 -> ..)
$1, $2, $3, $4.... 이렇게 지정이 가능합니다.
스니펫 body에 동일한 스니펫 변수를 여러개 넣었을 경우..
실제 사용할 때 변수 자리에 값을 한번만 쓰면 자동으로 다른 변수들의 값도 지정이 됩니다.
저는 최근 튜토리얼을 보고 있는 Vue 관련해서 템플릿을 만들어봤어요.
글 맨 위에 첨부된 gif가 아래의 스니펫이 작동하는 장면입니다.
"initialize vue form":{
"prefix": "IVF",
"body":[
"<!DOCTYPE HTML>",
"<html>",
"<head>",
"<meta charset='utf-8'>",
"</head>",
"",
"<body>",
"<div id='app'>",
"\t",
"</div>",
"",
"</body>",
"",
"<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>",
"<script>",
"Vue.component('', {",
"\ttemplate: `",
"\t\t",
"\t`,",
"\tprops:[",
"\t\t",
"\t],",
"\tdata: function(){",
"\t\treturn {",
"\t\t\t",
"\t\t}",
"\t}",
"})",
"new Vue({",
"\tel: '#app',",
"\tdata: {",
"\t\t",
"\t}",
"})",
"</script>",
"</html>"
]
}