Visual Studio Code의 스니펫
코드 스니펫은 루프 또는 조건문과 같이 반복되는 코드 패턴을 더 쉽게 입력할 수 있도록 하는 템플릿입니다.
Visual Studio Code에서 스니펫은 IntelliSense(⌃Space (Windows, Linux Ctrl+Space))에 다른 제안과 함께 표시되며, 전용 스니펫 선택기(명령 팔레트의 **스니펫 삽입**)에도 표시됩니다. 탭 완성 기능도 지원됩니다. "editor.tabCompletion": "on"으로 활성화하고 **스니펫 접두사**(트리거 텍스트)를 입력한 후 Tab을 눌러 스니펫을 삽입할 수 있습니다.
스니펫 구문은 '보간된 셸 코드'와 \u 사용을 제외하고 TextMate 스니펫 구문을 따릅니다. 두 가지 모두 지원되지 않습니다.
기본 제공 스니펫
VS Code에는 JavaScript, TypeScript, Markdown, PHP와 같은 여러 언어에 대한 기본 제공 스니펫이 있습니다.
현재 파일의 언어에 대한 스니펫 목록을 얻기 위해 명령 팔레트에서 **스니펫 삽입** 명령을 실행하여 해당 언어에 대해 사용 가능한 스니펫을 볼 수 있습니다. 그러나 이 목록에는 직접 정의한 사용자 스니펫과 설치한 확장 프로그램에서 제공하는 스니펫도 포함된다는 점을 명심하십시오.
마켓플레이스에서 스니펫 설치
VS Code 마켓플레이스의 많은 확장 프로그램에는 스니펫이 포함되어 있습니다. 확장 프로그램 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))에서 @category:"snippets" 필터를 사용하여 스니펫이 포함된 확장 프로그램을 검색할 수 있습니다.
사용하려는 확장 프로그램을 찾으면 설치하고 VS Code를 다시 시작하면 새 스니펫을 사용할 수 있습니다.
나만의 스니펫 만들기
확장 프로그램 없이도 자신만의 스니펫을 쉽게 정의할 수 있습니다. 자신만의 스니펫을 생성하거나 편집하려면 파일 > **기본 설정** 아래에서 **스니펫 구성**을 선택한 다음 스니펫이 표시될 언어( 언어 식별자 기준)를 선택하거나, 모든 언어에 표시되도록 하려면 **새 전역 스니펫 파일** 옵션을 선택합니다. VS Code는 기본 스니펫 파일의 생성 및 새로 고침을 자동으로 관리합니다.
스니펫 파일은 JSON으로 작성되며 C 스타일 주석을 지원하고 무제한의 스니펫을 정의할 수 있습니다. 스니펫은 동적 동작을 위해 대부분의 TextMate 구문을 지원하고, 삽입 컨텍스트에 따라 지능적으로 공백을 형식화하며, 쉬운 여러 줄 편집을 허용합니다.
다음은 JavaScript의 for 루프 스니펫의 예입니다.
// in file 'Code/User/snippets/javascript.json'
{
"For Loop": {
"prefix": ["for", "for-const"],
"body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
"description": "A for loop."
}
}
위 예시에서
- "For Loop"는 스니펫 이름입니다.
description이 제공되지 않으면 IntelliSense를 통해 표시됩니다. prefix는 스니펫을 IntelliSense에 표시하는 하나 이상의 트리거 단어를 정의합니다. 접두사에 대해 부분 문자열 일치가 수행되므로 이 경우 "fc"는 "for-const"와 일치할 수 있습니다.body는 삽입 시 여러 줄로 결합될 하나 이상의 콘텐츠 줄입니다. 새 줄과 포함된 탭은 스니펫이 삽입되는 컨텍스트에 따라 형식화됩니다.description은 IntelliSense에서 표시되는 스니펫의 선택적 설명입니다.
추가로, 위 예제의 body에는 세 개의 자리 표시자(순서대로 ${1:array}, ${2:element}, $0)가 있습니다. Tab을 사용하여 다음 자리 표시자로 빠르게 이동할 수 있으며, 이때 자리 표시자를 편집하거나 다음 자리 표시자로 이동할 수 있습니다. 콜론 : 뒤의 문자열(있는 경우)은 기본 텍스트입니다. 예를 들어 ${2:element}의 element입니다. 자리 표시자 이동 순서는 1부터 시작하는 오름차순 숫자이며, 0은 항상 마지막에 오는 선택적 특수 사례로, 지정된 위치에 커서가 있는 스니펫 모드를 종료합니다.
파일 템플릿 스니펫
스니펫이 파일의 내용을 채우거나 바꾸기 위한 것이라면 스니펫 정의에 isFileTemplate 속성을 추가할 수 있습니다. 파일 템플릿 스니펫은 새 파일 또는 기존 파일에서 **스니펫: 스니펫으로 파일 채우기** 명령을 실행할 때 드롭다운으로 표시됩니다.
스니펫 범위
관련 스니펫만 제안되도록 스니펫은 범위가 지정됩니다. 스니펫은 다음 중 하나로 범위를 지정할 수 있습니다.
- 스니펫이 범위 지정되는 **언어**(모두 가능)
- 스니펫이 범위 지정되는 **프로젝트**(모두 가능)
언어 스니펫 범위
모든 스니펫은 다음 중 하나에 정의되었는지에 따라 하나, 여러 개 또는 모든("전역") 언어에 대해 범위가 지정됩니다.
- 언어 스니펫 파일
- 전역 스니펫 파일
단일 언어 사용자 정의 스니펫은 특정 언어의 스니펫 파일(예: javascript.json)에 정의되며, **스니펫: 스니펫 구성**을 통해 언어 식별자로 액세스할 수 있습니다. 스니펫은 정의된 언어로 편집할 때만 액세스할 수 있습니다.
다국어 및 전역 사용자 정의 스니펫은 모두 "전역" 스니펫 파일(파일 접미사 .code-snippets가 있는 JSON)에 정의되며, 이 파일도 **스니펫: 스니펫 구성**을 통해 액세스할 수 있습니다. 전역 스니펫 파일에서 스니펫 정의는 하나 이상의 언어 식별자를 취하는 추가 scope 속성을 가질 수 있으며, 이를 통해 스니펫이 지정된 언어에만 사용 가능하게 됩니다. scope 속성이 없으면 전역 스니펫은 **모든** 언어에서 사용할 수 있습니다.
대부분의 사용자 정의 스니펫은 단일 언어에 범위가 지정되므로 언어별 스니펫 파일에 정의됩니다.
프로젝트 스니펫 범위
프로젝트에 범위가 지정된 전역 스니펫 파일(파일 접미사 .code-snippets가 있는 JSON)도 가질 수 있습니다. 프로젝트 폴더 스니펫은 **스니펫: 스니펫 구성** 드롭다운 메뉴에서 **'.vscode 폴더에 있습니다. 프로젝트 스니펫 파일은 해당 프로젝트에서 작업하는 모든 사용자와 스니펫을 공유하는 데 유용합니다. 프로젝트 폴더 스니펫은 전역 스니펫과 유사하며 scope 속성을 통해 특정 언어에 범위가 지정될 수 있습니다.
스니펫 구문
스니펫의 body는 커서와 삽입되는 텍스트를 제어하는 특수 구문을 사용할 수 있습니다. 다음은 지원되는 기능과 해당 구문입니다.
탭 정지
탭 정지를 사용하면 편집기 커서가 스니펫 내부로 이동하도록 할 수 있습니다. $1, $2를 사용하여 커서 위치를 지정합니다. 숫자는 탭 정지가 방문되는 순서를 나타내고, $0은 최종 커서 위치를 나타냅니다. 동일한 탭 정지의 여러 발생은 동기화되어 연결되고 업데이트됩니다.
자리 표시자
자리 표시자는 ${1:foo}와 같이 값이 있는 탭 정지입니다. 자리 표시자 텍스트가 삽입되고 선택되어 쉽게 변경할 수 있습니다. 자리 표시자는 ${1:another ${2:placeholder}}와 같이 중첩될 수 있습니다.
선택
자리 표시자는 값으로 선택 항목을 가질 수 있습니다. 구문은 파이프 문자(|)로 묶인 쉼표로 구분된 열거형입니다. 예: ${1|one,two,three|}. 스니펫이 삽입되고 자리 표시자가 선택되면 사용자는 선택 항목 중에서 하나를 선택하도록 요청받습니다.
변수
$name 또는 ${name:default}를 사용하면 변수 값을 삽입할 수 있습니다. 변수가 설정되지 않으면 **기본값** 또는 빈 문자열이 삽입됩니다. 변수를 알 수 없는 경우(즉, 해당 이름이 정의되지 않은 경우) 변수 이름이 삽입되고 자리 표시자로 변환됩니다.
다음 변수를 사용할 수 있습니다.
TM_SELECTED_TEXT현재 선택된 텍스트 또는 빈 문자열TM_CURRENT_LINE현재 줄의 내용TM_CURRENT_WORD커서 아래 단어의 내용 또는 빈 문자열TM_LINE_INDEX0 기반 줄 번호TM_LINE_NUMBER1 기반 줄 번호TM_FILENAME현재 문서의 파일 이름TM_FILENAME_BASE확장자를 제외한 현재 문서의 파일 이름TM_DIRECTORY현재 문서의 디렉터리TM_FILEPATH현재 문서의 전체 파일 경로RELATIVE_FILEPATH현재 문서의 상대(열린 작업 영역 또는 폴더 기준) 파일 경로CLIPBOARD클립보드의 내용WORKSPACE_NAME열린 작업 영역 또는 폴더의 이름WORKSPACE_FOLDER열린 작업 영역 또는 폴더의 경로CURSOR_INDEX0 기반 커서 번호CURSOR_NUMBER1 기반 커서 번호
현재 날짜 및 시간 삽입
CURRENT_YEAR현재 연도CURRENT_YEAR_SHORT현재 연도의 마지막 두 자리CURRENT_MONTH월을 두 자리 숫자로 표시(예: '02')CURRENT_MONTH_NAME월의 전체 이름(예: 'July')CURRENT_MONTH_NAME_SHORT월의 짧은 이름(예: 'Jul')CURRENT_DATE날짜를 두 자리 숫자로 표시(예: '08')CURRENT_DAY_NAME요일 이름(예: 'Monday')CURRENT_DAY_NAME_SHORT요일의 짧은 이름(예: 'Mon')CURRENT_HOUR현재 시간을 24시간 형식으로 표시CURRENT_MINUTE분을 두 자리 숫자로 표시CURRENT_SECOND초를 두 자리 숫자로 표시CURRENT_SECONDS_UNIXUnix epoch 이후의 초 단위 시간CURRENT_TIMEZONE_OFFSET현재 UTC 시간대 오프셋을+HH:MM또는-HH:MM형식으로 표시(예:-07:00).
무작위 값 삽입
RANDOM6자리 무작위 10진수RANDOM_HEX6자리 무작위 16진수UUID버전 4 UUID
현재 언어를 존중하여 줄 또는 블록 주석 삽입
BLOCK_COMMENT_START예시 출력: PHP에서는/*, HTML에서는<!--BLOCK_COMMENT_END예시 출력: PHP에서는*/, HTML에서는-->LINE_COMMENT예시 출력: PHP에서는//
아래 스니펫은 JavaScript 파일에는 /* Hello World */를, HTML 파일에는 <!-- Hello World -->를 삽입합니다.
{
"hello": {
"scope": "javascript,html",
"prefix": "hello",
"body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
}
}
변수 변환
변환을 사용하면 변수를 삽입하기 전에 해당 값을 수정할 수 있습니다. 변환 정의는 세 부분으로 구성됩니다.
- 변수 값 또는 변수를 확인할 수 없는 경우 빈 문자열과 일치하는 정규식입니다.
- 정규식의 일치 그룹을 참조할 수 있는 "서식 문자열"입니다. 서식 문자열은 조건부 삽입 및 간단한 수정을 허용합니다.
- 정규식에 전달되는 옵션입니다.
다음 예는 현재 파일의 확장자를 제외한 이름을 삽입하므로 foo.txt는 foo가 됩니다.
${TM_FILENAME/(.*)\\..+$/$1/}
| | | |
| | | |-> no options
| | |
| | |-> references the contents of the first
| | capture group
| |
| |-> regex to capture everything before
| the final `.suffix`
|
|-> resolves to the filename
자리 표시자 변환
변수 변환과 마찬가지로 자리 표시자 변환을 사용하면 다음 탭 정지로 이동할 때 삽입되는 자리 표시자 텍스트를 변경할 수 있습니다. 삽입된 텍스트는 정규식과 일치하며, 일치 또는 일치는 옵션에 따라 지정된 대체 형식 텍스트로 바뀝니다. 자리 표시자 변환 형식은 변수 변환과 동일합니다.
변환 예
예는 스니펫 본문에 나타나는 것처럼 이중 따옴표로 표시되어 특정 문자를 두 번 이스케이프해야 하는 필요성을 보여줍니다. 샘플 변환 및 파일 이름 example-123.456-TEST.js에 대한 결과 출력.
| 예 | 출력 | 설명 |
|---|---|---|
"${TM_FILENAME/[\\.]/_/}" |
example-123_456-TEST.js |
첫 번째 .을 _로 바꿉니다. |
"${TM_FILENAME/[\\.-]/_/g}" |
example_123_456_TEST_js |
각 . 또는 -를 _로 바꿉니다. |
"${TM_FILENAME/(.*)/${1:/upcase}/}" |
EXAMPLE-123.456-TEST.JS |
모두 대문자로 변경 |
"${TM_FILENAME/[^0-9a-z]//gi}" |
example123456TESTjs |
영숫자 문자가 아닌 문자 제거 |
문법
아래는 스니펫에 대한 EBNF(확장된 Backus-Naur 형식)입니다. \(백슬래시)를 사용하여 $, } 및 \를 이스케이프할 수 있습니다. 선택 요소 내에서 백슬래시는 쉼표와 파이프 문자도 이스케이프합니다. 이스케이프해야 하는 문자만 이스케이프할 수 있으므로, $는 이러한 구문 내에서 이스케이프해서는 안 되며, 선택 구문 내에서는 $ 또는 } 둘 다 이스케이프해서는 안 됩니다.
any ::= tabstop | placeholder | choice | variable | text
tabstop ::= '$' int
| '${' int '}'
| '${' int transform '}'
placeholder ::= '${' int ':' any '}'
choice ::= '${' int '|' text (',' text)* '|}'
variable ::= '$' var | '${' var '}'
| '${' var ':' any '}'
| '${' var transform '}'
transform ::= '/' regex '/' (format | text)+ '/' options
format ::= '$' int | '${' int '}'
| '${' int ':' '/upcase' | '/downcase' | '/capitalize' | '/camelcase' | '/pascalcase' '}'
| '${' int ':+' if '}'
| '${' int ':?' if ':' else '}'
| '${' int ':-' else '}' | '${' int ':' else '}'
regex ::= JavaScript Regular Expression value (ctor-string)
options ::= JavaScript Regular Expression option (ctor-options)
var ::= [_a-zA-Z] [_a-zA-Z0-9]*
int ::= [0-9]+
text ::= .*
if ::= text
else ::= text
TextMate 스니펫 사용
기존 TextMate 스니펫(.tmSnippets)도 VS Code에서 사용할 수 있습니다. 자세한 내용은 확장 API 섹션의 TextMate 스니펫 사용 토픽을 참조하십시오.
스니펫에 바로 가기 키 할당
특정 스니펫을 삽입하는 사용자 지정 바로 가기 키를 만들 수 있습니다. 모든 바로 가기 키를 정의하는 keybindings.json(기본 설정: 바로 가기 키 파일 열기)을 열고 추가 인수로 "snippet"을 전달하여 바로 가기 키를 추가합니다.
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"snippet": "console.log($1)$0"
}
}
바로 가기 키는 **스니펫 삽입** 명령을 호출하지만, 스니펫을 선택하도록 하는 대신 제공된 스니펫을 삽입합니다. 사용자 지정 바로 가기 키는 평소처럼 바로 가기 키, 명령 ID 및 바로 가기 키가 활성화될 때에 대한 선택적 when 절 컨텍스트로 정의합니다.
또한, 스니펫을 인라인으로 정의하기 위해 snippet 인수 값을 사용하는 대신, langId 및 name 인수를 사용하여 기존 스니펫을 참조할 수 있습니다. langId 인수는 name으로 표시된 스니펫이 삽입될 언어를 선택합니다. 예를 들어 아래 샘플은 csharp 파일에 사용할 수 있는 myFavSnippet을 선택합니다.
{
"key": "cmd+k 1",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus",
"args": {
"langId": "csharp",
"name": "myFavSnippet"
}
}
다음 단계
- 명령줄 - VS Code에는 파일을 열거나 비교하고 확장 프로그램을 설치하기 위한 풍부한 명령줄 인터페이스가 있습니다.
- 확장 API - VS Code를 확장하는 다른 방법에 대해 알아보세요.
- 스니펫 가이드 - 스니펫을 VS Code에서 사용할 수 있도록 패키지할 수 있습니다.
자주 묻는 질문
.tmSnippet 파일에서 기존 TextMate 스니펫을 사용하려면 어떻게 해야 합니까?
TextMate 스니펫 파일을 VS Code에서 사용할 수 있도록 쉽게 패키지할 수 있습니다. 확장 API 설명서의 TextMate 스니펫 사용을 참조하십시오.
붙여넣은 스크립트에 변수를 넣으려면 어떻게 해야 합니까?
붙여넣은 스크립트에 변수를 넣으려면 $variable 이름의 '$'를 이스케이프해야 스니펫 확장 단계에서 구문 분석되지 않습니다.
"VariableSnippet":{
"prefix": "_Var",
"body": "\\$MyVar = 2",
"description": "A basic snippet that places a variable into script with the $ prefix"
}
이는 다음과 같은 붙여넣은 스니펫으로 이어집니다.
$MyVar = 2
IntelliSense에서 스니펫을 제거할 수 있습니까?
예, **스니펫 삽입** 명령 드롭다운의 스니펫 항목 오른쪽에 있는 **IntelliSense에서 숨기기** 버튼을 선택하여 특정 스니펫이 IntelliSense(완성 목록)에 표시되지 않도록 할 수 있습니다.
그래도 **스니펫 삽입** 명령으로 스니펫을 선택할 수 있지만, 숨겨진 스니펫은 IntelliSense에 표시되지 않습니다.