Visual Studio Code (VS Code)에서 스니핏(Snippets)은 자주 사용하는 소스코드(코드 조각)를 미리 정의하여 지정해 둔 예약어로 한 번에 불러올 수 있는 기능을 말합니다. 쉽게 말해서 소스코드 자동 완성이라고 생각하시면 되겠습니다.
위의 예제를 보시면 미리 <ul><li>태그들을 list라는 이름의 스니핏으로 만들어놓고 불러와 리스트를 쉽게 만드는 모습을 보실 수 있습니다. 코드 조각은 VS Code에서 자체적으로 제공하는 내장 코드 조각과, 사용자가 직접 정의한 사용자 정의 코드 조각으로 구분할 수 있습니다.
내장 코드 조각(Built-in Snippets)
VS Code는 자체적으로 다양한 언어에 대한 내장 코드 조각을 제공합니다. 예를 들어 HTML에서 ! 느낌표를 입력하고 탭을 누르면 기본적인 HTML 파일 구조가 만들어집니다. 이렇게 내장된 코드 조각을 사용하려면 해당 언어에서 스니핏 예약어를 입력하고 Tab 키를 누르면 VS Code가 자동으로 코드 조각을 완성해 줍니다.
사용자 정의 코드 조각(User Snippets)
사용자 정의 코드 조각은 기본적으로 제공하는 코드 조각 이외에 개발자가 자주 사용하는 코드 패턴이나 템플릿을 미리 정의하여 등록한 것을 말합니다. 사용법은 내장 코드 조각과 같습니다. 오늘 포스팅할 내용은 바로 사용자 정의 코드 조각에 대한 내용입니다.
Visual Studio Code에서 사용자 스니펫(Snippets) 등록하기
1. File -> Preferences -> Configure User Snippets을 클릭하여 사용자 코드 조각을 정의해 주도록 하겠습니다.
2. New Global Snippets file을 클릭합니다. 첫 번째의 New Global Snippets file은 모든 파일에서 사용할 수 있는 코드조각을 의미하고 두 번째의 for ~ 으로 되어있으면 ~ 파일 안에서만 사용할 수 있는 코드 조각을 등록하겠다는 의미입니다.
3. 정의할 스니핏의 이름을 정하고 Enter키를 누릅니다. 저는 "MySnippets"라고 명명하도록 하겠습니다.
4. 그러면 위와 같이 스니핏 파일이 생성되고 주석으로 스니펫을 설정하는 방법에 대한 예시를 알려줍니다. 스니펫은 JSON 형식의 파일이기 때문에 우리도 JSON으로 작성해야 합니다. 이를 해석하자면 아래와 같습니다.
{
"스니펫 이름" :{
"scope": "사용언어",
"prefix": "스니펫을 선택할 때 사용되는 약어",
"body":[
"내용 1",
"내용 2",
"한줄에 하나씩"
],
"description": "스니핏에 대한 설명"
}
}- scope: 스니펫이 적용되는 언어의 범위를 지정합니다. 예를 들어, "javascript, typescript"라고 설정하면 해당 스니펫은 JavaScript 및 TypeScript에서만 동작합니다. 비워두거나 생략하면 모든 언어에 적용됩니다.
- prefix: 스니펫을 호출할 때 사용되는 단축어로 이 단축키를 입력한 후에 Tab키를 누르면 해당 코드를 불러올 수 있습니다.
- body: 스니펫의 코드 조각으로 여기서 $1, $2는 탭 정지를 나타냅니다. $0은 스니펫이 끝난 후 최종 커서 위치를 나타냅니다. ${1:label}, ${2:another}는 선택적인 플레이스홀더입니다.
- description: 스니펫에 대한 설명입니다. VS Code에서 스니펫을 선택할 때 나타나는 정보를 의미합니다.
{
"HTML 리스트": {
"scope": "html",
"prefix": "list",
"body": [
"<ul>",
"\t<li>$1</li>",
"\t<li>$2</li>",
"</ul>"
],
"description": "HTML List 생성"
},
"HTML 콘솔 출력": {
"scope": "javascript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Console 출력"
}
}
5. 예를 들자면 위와 같이 스니펫을 만들어줄 수 있겠습니다. <ul><li> 태그를 만드는 스니펫 하나와 콘솔에 출력을 하는 스니펫 이렇게 두 개를 만들었습니다.
- 리스트 Snippet은 list라는 단축어를 입력한 후 Tab 키를 누르면, 기본적인 <ul>과 <li> 태그가 생성됩니다. 각 $1, $2는 커서의 이동을 나타내며, 작성한 내용을 빠르게 입력하고 탭 키를 누르면 커서가 다음 위치로 이동합니다.
- 콘솔 Snippet은 log를 입력하고 Tab 키를 누르면 console.log('');가 생성되고, 커서는 첫 번째 $1 위치에 놓입니다. 코드를 작성하고 다시 Tab을 누르면 커서는 $2 위치로 이동하게 됩니다. 이러한 방식으로 스니펫을 효율적으로 사용할 수 있습니다.
등록한 스니펫 사용하기
1. 아까 정의해 뒀던 스니펫의 예약어인 list를 입력하면 위와 같이 list 스니펫의 도움말이 자동으로 출력됩니다. 여기서 Tab 키를 한번 눌러봅시다.
2. 정의해뒀던 코드들이 잘 불러와지는 것을 보실 수 있습니다.