VS code에서 자주 쓰는 코드 자동 완성하기/비주얼스튜디오코드 snippets 사용법

---

목차

1. "python snippets" 확장 설치하기

2. 나만의 snippets 만들기

---

 

코딩을 하다보면 같은 코드를 반복적으로 입력할 일이 많아 자동으로 입력이 되었으면 싶을 때가 많다.

 

혹은 분명히 공부했던 코드이고 사용도 해봤던 것인데 정확히 어떻게 써야 하는지 기억이 잘 안 나는 경우도 많다.

 

그럴 때는 코드를 자동 완성해주는 snippets를 사용하면 도움이 많이 된다.

 

VS Code 사용자라면 이미 잘 만들어진 확장을 설치할 수 있고, 직접 본인이 원하는 snippet을 만들어 두고 활용할 수도 있다.

 

그 방법을 순서대로 소개한다.

 

1. "python snippets" 확장 설치하기

 

VS Code에는 유용한 확장들이 많은데, 그중에는 유용한 snippets를 지원해주는 확장도 있다.

 

snippets는 언어별로 다를 수밖에 없기 때문에 확장도 언어별로 다양하게 있다.

 

파이썬 사용자라면 "python snippets"를 설치하면 된다.

 

파이썬 스니펫

 

위 확장을 설치하였다면 따로 설정할 필요 없이 바로 적용이 된다.

 

사용해보기 전에 먼저 위 확장의 세부 정보를 보면 어떤 snippets가 있는지 전부 보여주고 있는데, 크게 code snippets와 code examples로 분류된다. 쓸만한 것이 있는지 한번 훑어보자.

 

스니펫 리스트(code snippets)

스니펫 리스트(code examples)

 

리스트를 어느 정도 훑어 봤다면 이제 파이썬 파일을 열고 한번 사용해보자.

 

위의 캡처 화면에 보이는 any를 입력해보면 왼쪽에 사각형이 표시된 snippets가 표시되는데, 위의 것이 code snippets에 해당하고, 밑에 보이는 것처럼 => 표시가 있는 것이 code examples에 해당한다.

 

 

선택해보면 code snippets는 1번 줄처럼 any 함수의 기본적인 형태를 입력해주고, code examples는 3~5번 줄처럼 사용 예시를 입력해준다.

 

 

개인적으로 python snippets 확장의 경우 자동 완성 기능보다는 사용 예시를 제공해준다는 점이 마음에 든다.

 

예를 들어 dict를 입력하면 아래와 같이 딕셔너리에 관련된 수많은 함수의 예시들을 다 보여주기 때문에 기억력이 좋지 못한 필자에게는 매우 도움이 된다.

 

 

반응형

 

2. 나만의 snippets 만들기

 

위에서 본 python snippets도 나름대로 유용한 면이 있다.

 

그러나 내용이 방대하고, 딱 내 입맛에 맞게 자동 완성을 해주는 것은 아니기 때문에 조금 아쉬운 감이 있다.

 

필자의 경우 자주 쓰는 라이브러리를 임포트할 때 특히 자동 완성 기능이 필요하다고 느끼는데, 확장 설치만으로는 구현이 안 된다.

 

그럴 때 VS Code에서는 나만의 snippets를 만들어 사용할 수 있다.

 

VS Code를 실행한 상태에서 Ctrl + Shift + P 단축키를 눌러 명령 팔레트를 열고, snippets를 입력한 뒤에 "사용자 코드 조각 구성"을 선택해보자.

 

 

그러고 나서 "새 전역 코드 조각 파일"을 선택해보자.

 

mysnippet은 필자가 만들어 사용 중인 코드 조각 파일이고, 그 아래에 있는 것을 선택하면 된다.

 

 

그러면 파일 이름을 입력하라고 나오는데, 아무 이름이나 원하는 대로 입력을 한 다음 엔터를 누르면 아래와 같이 기본적인 작성법에 대한 설명이 입력된 코드 조각 파일이 열릴 것이다.

 

{
	// Place your GLOBAL snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

 

예시를 보면서 직접 사용할 snippets를 만들어보자. 필자는 pandas와 selenium을 임포트 하는 코드 조각을 만들어봤다.

 

작성 방법은 간단하다.

 

예시의 "Print to console" 자리에는 내가 만들 스니펫의 이름을 입력한다.

 

scope에는 이 스니펫을 어떤 언어에 적용할지 적으면 되는데, 필자는 파이썬 사용자이므로 파이썬을 적었다.

 

prefix에는 이 코드 조각을 불러올 때 사용할 키워드를 적어 주면 된다. 여러 개의 prefix를 지정하고 싶다면 리스트를 사용하면 된다. (예, ["pandas", "pd"])

 

body에는 내가 입력하고 싶은 코드 조각을 입력해주면 된다.

 

여러 줄을 입력하고 싶다면 아래 예시의 selenium 코드 조각처럼 각 코드 라인을 쉼표로 구분한 리스트 형태로 작성하면 된다.

 

description은 위에서 본 것처럼 코드 조각이 추천될 때 오른 쪽에 나오는 문구로 보이는데, 필자는 그냥 코드 조각의 이름과 똑같이 입력해 사용하고 있다.

 

{
	"import pd": {
		"scope": "python",
		"prefix": "pandas",
		"body": [
			"import pandas as pd"
		],
		"description": "import pd"
	},  # 코드 조각과 코드 조각 사이에는 반드시 쉼표를 찍어 구분한다. 
	
		"import selenium": {
			"scope": "python",
			"prefix": "selenium",
			"body": [
				"from selenium import webdriver",
				"wd = webdriver.Chrome()",
				"URL = ''",
				"wd.get(URL)"
			],
			"description": "import selenium"
		}
}

 

필요한 코드 조각을 다 작성했다면 파일을 저장하고 아무 파이썬 파일이나 열어 prefix에 입력한 문구를 입력해보자.

 

본인이 작성한 코드 조각이 추천될 것이다.

 

[참고] 1. 코드 조각 파일은 파이썬의 딕셔너리 자료형과 구조가 동일하다. 각 코드조각의 이름이 딕셔너리의 키값이고, 딕셔너리의 값으로는 scope, prefix, body, description을 각각 키값으로 하는 또다른 딕셔너리가 들어가 있는 형태이다. 2. 작성한 코드 조각 파일은 .vscode 폴더에 저장되므로, 해당 파일을 열어 언제든지 수정할 수 있다. 3. 코드 조각 파일은 깃허브에 푸시해 두면 다른 PC에서도 사용할 수 있다.