효율적인 코딩을 위한 VS Code 스니펫 마스터하기 – techsyncer

Visual Studio Code (VS Code)의 최신 코드 조각을 작성할 때, 같은 내용을 반복해서 입력했다는 생각이 들었던 적이 있나요? 아마 오늘 하루 동안 함수 선언을 10번이나 입력했거나, 같은 매개변수 집합을 20번째로 정의한 적이 있을 것입니다. Visual Studio Code snippets를 사용하면 시간과 안정성을 되찾을 수 있다는 사실을 알고 계셨나요?

Visual Studio Code snippets는 VS Code에 저장된 작은 텍스트 조각입니다. 이러한 조각들은 메뉴나 키 조합을 통해 호출할 수 있으며, 각 발생 사이에는 몇 가지 차이점이 있는 텍스트 블록을 반복해서 입력해야 할 때 많은 시간을 절약할 수 있습니다.

예를 들어, 아래의 예시에서는 VS Code에서 wvb를 입력하기만 하면, 상자에 표시된 Write-Verbose 텍스트와 같이 훨씬 더 많은 텍스트를 확장할 수 있는 옵션이 제공됩니다. 이것이 바로 조각의 힘입니다!

이 문서에서는 기본 조각, 확장 조각 및 직접 만드는 방법을 포함하여 VS Code 조각을 사용하는 방법에 대해 알아보겠습니다!

전제 조건

이 문서는 손을 더럽히는 실습을 위한 안내서입니다. VS Code 조각을 사용하는 방법을 따라가기 위해서는 VS Code 버전 1.17 이상이 필요합니다. 전체적인 공개를 위해, 저는 Windows에서 VS Code 1.38.1을 사용할 것입니다.

특정 플랫폼용 최신 버전의 VS Code를 다운로드할 수 있습니다. 여기에서 다운로드하세요.

VS Code 조각 찾기

당신이 자신의 스니펫을 만들기 전에 (당신이 할 것입니다), 사용 가능한 내장 스니펫을 찾는 방법을 배우는 것이 중요합니다.

메뉴 인터페이스에서 모든 스니펫을 찾을 수 있습니다. 메뉴 인터페이스를 사용하여 스니펫을 검토하고 사용할 수 있습니다. 메뉴에 액세스하려면 F1 또는 Ctrl-Shift-P를 누르고 “snippet”을 입력한 다음 Enter를 누릅니다. 아래에 보이는 것과 유사한 메뉴가 팝업됩니다.

Insert Snippet을 선택하고 Enter를 누르면 아래에 나열된 사용 가능한 스니펫의 드롭다운이 표시됩니다. 기본적으로 많은 스니펫이 제공되고 아래로 스크롤하여 더 많은 스니펫을 볼 수 있습니다.

사용 가능한 스니펫의 드롭다운을 통해 VS Code에서 언어 확장을 추가하여 사용할 수 있는 내장 스니펫을 검토할 수 있습니다.

언어 확장

VS Code를 사용하여 여러 가지 다른 언어로 작업할 수 있습니다. 각 언어는 고유한 세부 사항이 있습니다. 이러한 차이를 지원하기 위해 VS Code는 언어 확장을 지원합니다.

언어 확장은 VS Code에 다양한 프로그래밍 언어에 대한 스마트 편집 기능을 제공합니다. 언어 확장은 다음과 같은 프로그래밍 언어에 대한 추가 지원을 제공합니다:

구문 강조
인텔리센스
서식 지정
오류 확인
스니펫 완성

확장은 VS Code 확장 메뉴를 통해 설치됩니다.

C:\Users<UserName>.vscode\extensions\ms-code.-\snippets에 위치한 Windows의 JSON 파일을 열어 언어 확장 프로그램이 제공하는 스니펫의 정의를 확인할 수 있습니다.

확장 프로그램 자체는 스니펫과 관련이 없지만, 많은 확장 프로그램이 내장된 스니펫을 함께 제공하므로 이를 알고 계셔야 합니다.

스니펫 확장하기

메뉴 인터페이스를 통해 스니펫을 선택하면 스니펫의 내용이 파일에 나타납니다. 스니펫 정의를 유용한 코드로 변환하는 이 과정을 “확장(expanding)”이라고 합니다.

프리픽스를 호출할 때, VS Code는 해당 프리픽스를 읽고 스니펫에서 정의한 지침을 실행합니다. 이 지침은 스니펫마다 다를 수 있습니다. 스니펫 호출, 변환 및 삽입 전체 과정을 “확장(expanding)”이라고 합니다.

VS Code 확장 프로그램 스니펫 사용하기

일부 스니펫은 VS Code에 기본적으로 제공되지만, 확장 프로그램을 설치하면 종종 해당 확장 프로그램만의 스니펫이 함께 제공됩니다. 예를 들어, Microsoft의 Python 확장 프로그램, PowerShell 확장 프로그램, C# 확장 프로그램 등이 스니펫을 포함한 확장 프로그램의 예입니다.

확장 프로그램 스니펫이 저장되는 위치

이러한 확장 프로그램은 일반적으로 Windows에서 컴퓨터의 C:\Users<사용자이름>.vscode\extensions 디렉토리에 설치됩니다. 아래에서 확인할 수 있습니다.

확장 프로그램을 위한 폴더는 ms-vscode.- 네이밍 규칙을 따릅니다. 이러한 각 폴더에는 확장 프로그램과 함께 제공되는 스니펫 폴더가 있습니다.

Contents of *C:\Users<UserName>.vscode\extensions*

확장 프로그램 코드 스니펫 예제

확장 프로그램 스니펫을 사용하는 방법을 보여주기 위해 PowerShell 확장 프로그램을 예로 들어보겠습니다. 이 확장 프로그램에는 PowerShell 영역 블록과 *for* 루프를 빠르게 생성하기 위한 몇 가지 유용한 스니펫이 함께 제공됩니다.

PowerShell 스크립트에서 for 루프를 생성하고 영역 블록으로 묶어야 한다고 가정해보겠습니다. 이를 위한 코드는 아래에 표시되어 있습니다. 아래 스크린샷의 코드는 50자로, 숫자 1부터 10까지 반복하는 for 루프를 영역 블록 안에 생성합니다.

이 예제에서 모든 문자를 하나하나 입력하는 대신, Microsoft에서 제공하는 PowerShell 확장 프로그램에 함께 설치된 region과 for라는 두 가지 스니펫을 사용할 수 있습니다.

아래를 살펴보면 이러한 스니펫을 사용하여 타이핑을 대폭 줄일 수 있는 간편함을 확인할 수 있습니다!

비주얼 스튜디오 코드 사용자 지정 코드 스니펫 만들기

VS Code 자체에 포함되어 있는 스니펫이나 확장 프로그램으로 제공되는 스니펫에 국한되지 않아도 됩니다. 아마도 기존의 확장 프로그램에는 필요한 코드 레이아웃이 없거나 스니펫을 직접 서식 지정하고 싶을 수도 있습니다. 다행히도, 직접 스니펫을 만들 수 있습니다! 이 섹션에서는 그 방법에 대해 알아보겠습니다.

사용자 지정 스니펫을 만들려면, VS Code에서 사용자 스니펫을 열려면 파일 → 기본 설정 → 사용자 스니펫을 클릭하십시오. 이렇게 하면 스니펫 언어 선택 범위가 열립니다. 여기에서 스니펫을 만들고자하는 언어를 지정할 수 있습니다. 아래 스크린샷에서 이것이 어떻게 보이는지 예제를 볼 수 있습니다.

언어를 선택하면, VS Code는 Windows의 C:\Users<사용자 이름>\AppData\Roaming\Code\User\snippets에 language.json 파일을 생성합니다. 다른 언어에 대해 생성된 모든 사용자 스니펫은 이 디렉토리에 파일을 갖게 됩니다.

사용 가능한 언어는 위에서 본 것과 다를 수 있습니다. 위의 VS Code 설치에서는 많은 언어 확장이 이미 설치되어 있습니다.

스니펫을 만들고자하는 언어를 찾고 Enter를 눌러 해당 언어의 JSON 파일을 엽니다. 이 파일에 사용자 지정 스니펫이 저장되며, 여기에서 사용자 지정 스니펫을 생성할 수 있습니다.

사용자 지정 스니펫을 지정해야 할 네 가지 데이터 항목이 있습니다:

A snippet name (line 9 below)
A prefix, which is what you’ll use to call your snippet (line 8 below)
A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
A description, which will show up in your IntelliSense (line 2 below)

*Example snippet definition of the For statement*

사용자 정의 Python 스니펫 만들기

파이썬 프로그래밍 언어에 대한 사용자 지정 스니펫을 만드는 데 필요한 것을 알아보겠습니다. 이 예제에서는 dt 접두사가 사용자 지정 파이썬 스니펫을 호출합니다. 이 스니펫은 현재 시간이 미리 입력된 메시지를 출력합니다.

JSON 파일 생성

먼저 스니펫 언어 선택기를 열고 Python을 입력한 후 Enter를 눌러 python.json 파일을 생성합니다. 이렇게 하면 Windows C:\Users<사용자이름>\AppData\Roaming\Code\User\snippets 폴더에 python.json 파일이 나타납니다.

아래 이미지에서 기본 상태를 확인할 수 있습니다.

이름과 접두사 할당

이제 JSON 파일 편집을 시작하는 시간입니다. 먼저 이름과 접두사 (dt)를 정의합니다. 스니펫 접두사는 스니펫을 호출할 때 입력하는 값으로 짧고 명확해야 합니다. 스니펫 접두사가 짧을수록 호출할 때 입력해야 하는 문자 수가 적어집니다.

아래 예제에서 이렇게 보이는 예를 확인할 수 있습니다.

본문 정의

본문에는 스니펫을 호출할 때 확장될 코드가 포함됩니다. 이 코드는 간단한 텍스트와 주석일 수도 있습니다. 나중에 살펴볼 다른 기능도 포함될 수 있습니다. 본문에 여러 줄이 있는 경우 주의해야 할 몇 가지 사항이 있습니다.

각 줄은 이중 인용부호 안에 있어야 합니다.
각 줄은 쉼표로 끝나야 합니다.
모든 줄은 대괄호 안에 있어야 합니다 (“[“와 “]”).

아래 예제에서 이렇게 보이는 예를 확인할 수 있습니다.

설명 정의

아래에 정의된 접두사로 설명하는 메시지입니다.

설명은 스니펫 목록에서 접두사 아래에 표시되며, 스니펫이 무엇을 하는지에 대한 자세한 정보를 제공합니다. 또한 생성된 유사한 스니펫과의 차이를 알 수 있게 도와줍니다.

아래는 접두사와 설명을 식별하는 스니펫 예시 스크린샷입니다.

스니펫을 생성할 때 이미 사용자 정의 Python 스니펫이 없는 경우, 아래 코드 스니펫과 같은 python.json 파일이 생성됩니다.

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

이 JSON 파일을 저장한 후, 이제 사용자 정의 스니펫이 VS Code의 모든 Python 파일에서 사용할 수 있습니다.

이제 Python 탭을 열고 접두사 dt를 입력하면 사용자 정의 스니펫이 나타납니다. Enter 키를 누르면 스니펫 본문이 Python 탭으로 확장됩니다.

포함된 텍스트를 사용하여 사용자 정의 JavaScript 스니펫 생성

스니펫은 스니펫 본문에서 정의한 단어에만 국한되지 않습니다. 스니펫은 호출하는 파일에서 텍스트를 포함할 수도 있습니다.

VS Code에는 사용할 수 있는 내부 변수가 있습니다. 이러한 변수는 현재 강조된 텍스트를 가져와 스니펫에 삽입하는 플레이스홀더입니다. 예를 들어, 스니펫에 변수 $TM_SELECTED_TEXT를 넣으면 선택한 텍스트가 표시됩니다. 모든 내부 VS Code 변수에 대한 자세한 내용은 VS Code 변수 참조 페이지를 확인하세요.

데모를 위해 간단하게 선택한 텍스트를 콘솔에 출력하는 줄을 생성하는 스니펫을 만들어 보겠습니다. log-it라고 불리는 것입니다.

스니펫 언어 선택기를 열고, JavaScript를 입력한 다음 Enter를 눌러 javascript.json 파일을 만듭니다. 이 파일은 이전 섹션에서 만든 python.json 파일과 유사하게 보일 것입니다. 다만, 이번에는 Python 코드 대신 샘플 JavaScript 코드가 들어 있습니다. 아래 스크린샷에서 기본 상태를 확인할 수 있습니다.

이제 다음 JSON을 사용하여 스니펫을 만들어 보세요.

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

이 JSON 파일을 저장한 다음 JavaScript 파일에서 이 스니펫을 사용할 수 있습니다.

이 스니펫을 강조 표시된 텍스트와 함께 호출하면 $TM_SELECTED_TEXT가 강조 표시된 텍스트로 대체됩니다. 강조 표시된 텍스트 없이 이 스니펫을 호출하면 $TM_SELECTED_TEXT는 비어 있게 됩니다. 아래 스크린샷에서 이를 확인할 수 있습니다.

*JavaScript `$TM_SELECTED_TEXT`Snippet in Action*

탭 스톱이 포함된 사용자 정의 PowerShell 스니펫 만들기

지금까지 본 예제들은 호출할 때 완전한 형태였습니다. 심지어 JavaScript의 경우에도 먼저 텍스트를 강조 표시해야 한다고 가정합니다. 그렇다면 호출 이후에 스니펫에 값을 입력해야 하는 경우는 어떻게 해야 할까요?

console.log()에 값을 입력하고 싶다면 어떻게 할까요? 스니펫의 여러 위치에 값을 입력하려면 어떻게 해야 할까요?

이 섹션에서는 탭 정지를 사용하여 생성된 코드 스니펫에 텍스트를 입력하는 방법을 배우게 됩니다. 탭 정지는 스니펫 내에서 커서가 이동할 위치로 지정되는 곳입니다. 탭을 누를 때마다 이러한 위치를 순서대로 방문합니다. 이 탭 정지를 사용하여 스니펫이 확장된 후에 값을 입력할 수 있습니다.

스니펫 변수 $0, $1, $2 등을 사용하여 스니펫 본문에서 탭 정지를 지정하면 스니펫을 호출하고 탭을 눌렀을 때 커서가 다음으로 이동할 위치를 스니펫에 지정합니다.

탭 정지는 일반적인 순서(1 다음에 2 다음에 3 등)에 따라 배치되지만 한 가지 예외가 있습니다. 탭 정지 0은 다른 모든 탭 정지 이후에 커서가 위치할 곳입니다. 이를 설명하기 위해 아래 스니펫은 현재 날짜와 추가 텍스트를 포함하는 Write-Output 메시지로 확장됩니다.

이 내용은 두 개의 탭 정지

Write-Output 메시지 끝에 있는 $1
$0은 스니펫이 비어있는 줄에서 종료되도록 다음 줄에 있습니다.

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

이 스니펫을 저장하고 PowerShell 파일에서 접두사 dtPS를 입력하여 호출합니다.

스니펫이 확장되면 커서가 탭 정지 1의 위치로 이동합니다. 여기에 원하는 값을 추가하거나 코드를 입력한 후 탭을 눌러 커서를 다음 탭 정지로 이동합니다. 이렇게 모든 지정한 탭 정지를 거칠 때까지 계속됩니다.

아래 스크린샷에서 이를 확인할 수 있습니다.

탭 정지 위치에 기본값 추가하기

탭 정지는 시작에는 좋지만, 필요한 경우 특정 값을 그 자리에 두고 이를 변경할 수 있는 기능이 필요한 경우는 어떨까요? 이제 기본값을 포함해야 할 때입니다.

위의 예제는 탭 정지가 있었지만, 스니펫이 확장되면 그 자리에 텍스트가 없었습니다. 커서는 탭 정지 위치로 이동한 다음 사용자가 직접 제어해야 했습니다.

탭 정지 위치에 값이 있을 수 있는 방법이 있었으면 좋겠다면, 스니펫이 확장되고 해당 값도 함께 확장되는 방법이 있을 것입니다. 탭 정지가 해당 위치에 도달하면 기본값이 덮어쓰여지거나 그냥 지나갈 수 있을 것입니다.

사용자 지정 스니펫에 기본값을 추가하는 방법을 살펴보겠습니다. 위의 PowerShell 스니펫 JSON 파일을 편집하여 수행할 수 있습니다.

먼저, 스니펫 언어 선택기를 열고 PowerShell을 선택한 다음 탭 정지를 $1에서 ${1:this is my default message}로 변경합니다. 콜론 뒤의 값이 기본값이 됩니다. 이 값은 스니펫과 함께 확장됩니다.

탭 정지에 도달하면 두 가지 일이 발생할 수 있습니다. 기본값이 덮어쓰여질 수도 있고, 탭을 눌러 지나갈 수도 있으며 기본값을 유지할 수도 있습니다.

아래에서 내용의 변경 사항을 확인할 수 있습니다.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

업데이트되고 저장된 후, 이러한 기본값은 확장되며 호출될 때 IntelliSense 창에도 표시됩니다. 스크린샷에서 확인할 수 있습니다.

기본 메시지는 탭 정지를 사용하여 수행할 수 있는 좋은 예입니다. 탭 정지는 선택의 옵션을 제공합니다. 다음 섹션에서는 탭 정지에 선택 사항을 추가하는 예제를 볼 수 있습니다.

탭 정지에 선택 사항 추가하기

탭 정지는 기본값이나 값을 갖지 않는 것에 제한되지 않습니다. VS Code 스니펫 정의에서 사용자가 스니펫을 확장할 때 선택 옵션을 제공할 수 있도록 정의할 수 있습니다.

스니펫에서 다른 값을 또는 명령을 선택하고 싶은 상황이 있을 수 있습니다. 다른 선택 사항을 갖는 세 가지 다른 스니펫을 생성하는 대신, 스니펫을 편집하여 탭 정지로 선택 사항을 표시할 수 있습니다. 아래 스크린샷에서 확인할 수 있습니다.

다음 구문이 스니펫 본문에서 사용될 때, 탭 정지는 선택 사항을 표시합니다:

${N|Choice1,Choice2,Choice3[,Choice]|}

위의 탭 정지는 다음 선택 사항을 선택할 수 있도록 수정되었습니다:

Write-Output
Write-Warning
Write-Error

이는 탭 정지 뒤에 두 개의 파이프 문자 ( | )를 배치하여 수행되었습니다. 선택 사항은 쉼표로 구분된 파이프 문자 안에 넣습니다. 아래 코드 블록에서 확인할 수 있습니다.

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- 선택 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- 선택 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- 선택 3
|}

아래에서 예제 스니펫을 확인할 수 있습니다.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

이제 사용자 지정 스니펫을 확장하면 어떤 옵션을 선택할지에 대한 선택이 IntelliSense 창에 나타납니다. 아래 스크린샷에서 확인할 수 있습니다.

여기에서 원하는 선택을 선택하고 해당 선택으로 확장되는 것을 볼 수 있습니다. 아래의 예시 스크린샷에서는 코드 전체 라인이 세 가지 다른 Write 명령을 선택할 수 있는 옵션으로 대체되고, 각각을 문제없이 호출하고 실행할 수 있음을 보여줍니다.

요약

사용자 정의 스니펫은 간단한 텍스트나 코드일 수 있습니다. 메시지, 기본 값 또는 선택지를 포함할 수 있는 탭 스톱이 있을 수 있으며, 강조된 텍스트도 포함할 수 있습니다.

모든 코드 블록의 모든 문자를 일일이 입력해야 하는 번거로운 작업이 될 필요는 없습니다. 스니펫을 사용하면 for, foreach, 또는 switch 문의 정확한 구문을 매번 기억할 필요가 없습니다. 스니펫은 이러한 상황에 완벽하게 적합합니다.

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

더 읽어보기

PowerShell 함수 소개