스니펫(Snippets) 설정
VSCode를 사용하다보면 반복적으로 사용하게 되는 긴 코드들이 있다.
예를 들어 처음 HTML의 구조를 만드는 일이라거나, 자주 사용하는 스타일 코드와 같은 것들.
이러한 코드를 직접 입력하는 것은 생각보다 번거로운 일이다.
이를 보완하기 위한 기능인 스니펫에 대해 알아보자.
스니펫(Snippets)?
스니펫이란 재사용 가능한 코드조각 이라고 할 수 있다.
VSCode에서 HTML 파일의 처음에서 ! + Tab을 누르면 HTML 구조가 만들어지는 것과 같이, 내가 필요한 코드를 약어를 이용하여 자동완성 되게 할 수 있다.
내장 코드 조각(Built-in Snippet)
위에서 설명한 것과 같이 HTML 파일의 처음에서 ! + Tab 을 하면 HTML 구조가 만들어지는 것이 내장 스니펫이다.
언어마다 기본적으로 내장이 되어있는 스니펫 예약어들이 있다.
사용자 정의 코드 조각(User Snippet)
내장되어있는 예약어 말고도 사용자가 원하는 코드를 자동완성 하기 위해 직접 정의할 수 있다.
사용하는 사람이 직접 등록하다보니 원하는대로 자유롭게 작성하고 사용할 수 있다.
스니펫 등록하기
스니펫을 등록하기 위해서는 등록할 언어의 확장자를 가진 json 파일을 만들어야 한다.
혹은 이미 만들어져 있는 파일에 접근하여 수정할 수 있다.
스니펫 파일 검색 창 띄우기
json 파일을 만들거나 수정하기 위한 방법은 세가지가 있다.
File->Preferences->Configure User Snippets를 클릭한다.
-
우측 하단의 설정아이콘 ->
Snippets
-
Ctrl+Shift+P에서 Snippets 검색
위와 같이 접근하면 상단에 어떤 언어에 대한 스니펫을 만들 것인지 찾을 수 있다.
스니펫 파일 만들기/찾기
스니펫 파일에 접근하는 방법을 알아보자.
특정 언어 스니펫
나는 html 파일을 검색해보도록 하겠다.
나는 이전에 한 번 등록을 한 적이 있어서 위와 같이 .json 파일이 자동완성으로 뜬다.
한 번도 작성한 적 없는 경우는 위와 같이 언어 이름만 뜨는 것을 볼 수 있다.
처음 스니펫 파일에 접근하면 위와 같은 화면을 볼 수 있다.
이제 저기에 원하는 스니펫의 이름과 예약어, 코드 조각, 설명을 입력하면 된다.
글로벌 스니펫
만약에 특정한 언어에 대한 스니펫이 아니라 모든 파일에서 사용할 수 있는 스니펫 파일을 만들고자 한다면
특정 언어 파일이 아닌 글로벌 스니펫 파일에 접근해야 한다.
스니펫 검색 창에서 New Blobal Snippets File을 선택한다.
내가 만들고자 하는 파일의 이름을 작성하거나 내가 사용하는 스니펫 파일 이름을 검색한다.
나는 mySnippet 이라는 이름을 작성 후 엔터를 눌렀다.
mySnippet.code-snippets 라는 파일이 열린 것을 볼 수 있다.
이 곳에 내가 원하는 스니펫 코드를 작성할 수 있다.
스니펫 자동완성 사이트
스니펫은 직접 입력할 수도 있지만 작성 방법이 번거롭다.
이를 쉽게 작성하기 위해서 스니펫 코드를 자동으로 만들어주는 사이트를 사용할 수 있다.
스니펫 자동완성 사이트
스니펫 등록/수정하기
위의 링크를 들어가면 다음과 같은 화면을 볼 수 있다.
각 칸에 차례대로 코드조각의 설명, 사용할 축약어, 코드조각을 입력하면 된다.
나는 HTML 문서의 lang 값이 한국어(ko)로 된 구조를 자동완성 하기 위해서 위와 같이 작성했다.
-
코드 설명: HTML 한국어스니펫
-
축약어: !!
-
코드 조각
<html lang="ko-KR"> <head> <meta charset="UTF-\" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>$1</title> <style>$2</style> </head> <body> $3 </body> </html>```
이때 자동 완성된 코드에서 Tab으로 탐색하고자 하는 영역에 $숫자를 입력해서 미리 지정할 수도 있다.
숫자의 순서대로 탐색이 가능하다.
우측 하단에 있는 Copy snippet 버튼을 눌러 복사 한 후 VSCode로 돌아와 html.json 파일에 붙여 넣고 저장하면 된다.
특정 언어 스니펫 파일
특정 언어 스니펫 파일인 경우, 위와 같이 복사한 내용을 그대로 붙여넣고 저장하면 된다.
글로벌 스니펫 파일
만약 특정 언어에 대한 파일이 아닌 글로벌 스니펫 파일인 경우 scope라는 속성을 작성해야 한다.
이 속성은 해당 스니펫이 어떤 언어에 대한 스니펫인지를 알려주는 역할이다.
나는 HTML의 스니펫이기 때문에 scope 값으로 HTML을 작성해주었다.
스니펫 파일은 둘 중 하나만 작성
나는 예시로 특정언어 스니펫 파일과 글로벌 스니펫 파일을 다 작성했지만 둘 중 하나만 작성해서 사용하면 된다.
여러개의 스니펫
스니펫 파일에 여러가지의 스니펫을 작성할 수 있다.
이 경우 각 스니펫 코드 사이에 콤마(,)를 이용해서 구분지어 사용한다.
이제 우리가 등록한 !! + Tab으로 HTML 한국어버전 스니펫을 사용할 수 있다.
스니펫 사용하기
등록한 스니펫을 사용해보기 위해 VSCode로 test.html 이라는 빈문서를 열었다.
아까 내가 등록한 !!를 입력하면 위와 같이 스니펫 미리보기 창이 뜨는 것을 확인할 수 있다.
키보드 방향키로 원하는 코드를 확인한 후 마우스로 클릭 또는 Tab을 누르면 된다.
만약 무언가 잘못 눌러서 스니펫 미리보기 창이 꺼진 경우, 예약어 위치에서 Ctrl + Space Key를 누르면 다시 미리보기 창을 띄울 수 있다.
Tab을 눌러 자동완성을 하면 $숫자를 작성했던 위치에 희미한 선이 그려져 있는 것을 볼 수 있다.
Tab을 눌러보면 해당 위치 순서대로 커서가 이동한다.
두번째로 만들었던 alist 스니펫도 확인해보자.
코드 자동완성과 동시에 $숫자를 작성했던 위치에 희미한 선으로 tab 탐색이 가능한 것을 알 수 있다.
스니펫 추천
등록해두면 유용하게 사용하는 스니펫이 무엇이 있는지 보자.
JavaScript
console.log()
"console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
],
"description": "console"
}Ajax
"Ajax 요청": {
"prefix": "ajax",
"body": [
"$.ajax({",
" url: '$1',",
" type: '$2',",
" data: {$3},",
" success: function(response) {",
" console.log(response);",
" },",
" error: function(xhr, status, error) {",
" console.error(error);",
" }",
"});"
],
"description": "Ajax 요청 스니펫"
}CSS
screen reader onry
"sr-only": {
"prefix": "sronly",
"body": [
".sr-only {",
" position: absolute;",
" left: -9999px;",
" top: auto;",
" width: 1px;",
" height: 1px;",
" overflow: hidden;",
"}"
],
"description": "sr-only"
}a11y
"a11y": {
"prefix": "a11y",
"body": [
".a11y-hidden {",
" clip: rect(1px, 1px, 1px, 1px);",
" clip-path: inset(50%);",
" width: 1px;",
" height: 1px;",
" margin: -1px;",
" overflow: hidden;",
" padding: 0;",
" position: absolute;",
"}"
],
"description": "a11y"ellipsis
"ellipsis": {
"prefix": "ellipsis",
"body": [
".ellipsis {",
" white-space: nowrap;",
" overflow: hidden;",
" text-overflow: ellipsis;",
"}"
],
"description": "ellipsis - 한 줄 ... 만들기"
},
"ellipsis multi": {
"prefix": "ellipsis-multi",
"body": [
".ellipsis-multi {",
" white-space: nowrap;",
" overflow: hidden;",
" text-overflow: ellipsis;",
" ",
" display: -webkit-box;",
" -webkit-box-orient: vertical;",
" -webkit-line-clamp: 3;",
"}"
],
"description": "ellipsis multi - 여러줄 ... 만들기"
}이 외 생각나는게 있다면 추가하도록 하겠다.
