[VS Code] 코드 스니핏 만들기 | Code Snippets

껄껄껄

코딩무새입니다.

 

---

 

코드 스니핏에 대해서 알고 계신가요?

코드 스니핏은 자주 사용하는 코드 덩어리를 쉽게 꺼내 쓸 수 있게 만들 수 있게 해주는 예약 명령입니다.

 

VS Code 코드 스니핏?

VS Code에도 이러한 코드 스니핏 기능이 있는데요.

저는 VS Code도 자주 사용하기 때문에 제가 자주 사용하는 코드 뭉치 또한 저장해서 사용한답니다.

 

기본적으로 내재되어 있는 스니핏을 살펴볼까요?

언어는 javascript입니다.

편집기에 for만 입력해도 For Loop라고 설명이 된 스니핏을 볼 수 있습니다.

 

for를 선택하면 자동으로 지정된 코드 덩어리를 가져와서 바로 작성해 주죠.

참 편리하지 않나요?

 

그럼 원하는 코드 스니핏을 커스텀해서 만들려면 어떻게 해야 할까요?

 

스니핏 생성

1. 코드 스니핏 설정

VS Code를 켜주시고요.

다음 순서대로 클릭해 주세요.

File > Preferences > Configure Snippets

 

2. 언어 선택

스니핏 생성을 원하시는 언어를  골라줍니다. 

전 javascript를 선택했어요.

 

3. javascript.json  파일 생성

언어를 선택하면 javascript.json이라는 파일이 생깁니다.

Example: 아래에 있는 json 구조가 스니핏의 형태입니다.

Print to console

• 스니핏의 이름입니다. 위의 예제에서 for를 입력했을 때 오른쪽에 For Loop라고 표시되는 부분이에요.

prefix

• 스니핏 명령으로, for에 해당합니다.

body

• 이 부분에는 선택한 언어의 소스코드를 입력해 주시면 됩니다. 여기서 ${1:code}, ${2:code} 같은 식으로 가변 내용을 입력할 수 있고요. 스니핏 생성 후 tab으로 순서대로 이동할 수 있습니다.
• 좀 더 상세히 설명드리면, 예로 ${1:code}를 설명해 볼게요.
  • $: 변수의 시작을 알려주는 문법
  • {}: 중괄호 안의 내용을 적용
  • 1: tab의 이동순서
  • code: 기본으로 들어갈 코드

description

- 스니핏에 대한 설명

 

4. 스니핏 작성

저는 아래와 같이 생성했어요. 저장 필수.

 

스니핏 이름: Arrow Function

스니핏 명령: af

스니핏 코드: 화살표 함수 생성하기

스니핏 설명: Creates an arrow function

 

스니핏 사용

그럼 사용해 볼까요?

지정한 명령어인 af를 입력해 봅니다.

af - Arrow Function이라고 나오네요.

그럼 body와 description은 어디 있을까요?

 

스니핏에 마우스를 대보면 오른쪽 끝에 `>` 표시가 생겨요.

선택하시면 body와 description을 확인할 수 있습니다.

 

그럼 af를 선택해 볼게요.

와우~ body처럼 코드가 생겼어요!

tab으로 이동하면 셔 코드를 변경하여 원하는 함수로 만들어 줍니다.

정상적으로 잘 동작하네요.

당연하겠죠? 껄껄껄

 

스니핏 추가

스니핏을 또 추가하고 싶으면 어떻게 할까요?

다시 javascript.json 파일을 열어봅니다.

위의 설명한 방법으로 다시 오픈하셔도 되고요.

일반적으로 아래 경로에 javascript.json 파일이 있으니 바로 찾아쓰셔도 돼요.

C:\Users\{사용자명}\AppData\Roaming\Code\User\snippets

 

기존 스니핏 json 형식에 붙여 새로운 스니핏을 추가해 주면 됩니다.

 

저장 후 사용해 보면 스니핏이 잘 동작하네요.

 

샘플

제가 예제로 사용한 javascript.json 코드 공유합니다.

{
	"Arrow Function": {
		"prefix": "af",
		"body": [
			"const ${1:func} = (${2:params}) => {",
			"  ${3://code}",
			"};"
		],
		"description": "Creates an arrow function"
	},
	"Fetch API": {
		"prefix": "fetchauto",
		"body": [
		  "fetch('${1:url}', {",
		  "  method: '${2:POST}',",
		  "  headers: {",
		  "    'Content-Type': 'application/json',",
		  "    'Authorization': 'Bearer ${3:token}'",
		  "  },",
		  "  body: JSON.stringify(${4:data})",
		  "})",
		  ".then(response => {",
		  "  if (!response.ok) {",
		  "    throw new Error(`HTTP error! status: ${response.status}`);",
		  "  }",
		  "  return response.json();",
		  "})",
		  ".then(data => {",
		  "  console.log(data);",
		  "})",
		  ".catch(error => console.error('Error:', error));"
		],
		"description": "Fetch API template with headers and error handling"
	  }
}

 

---

 

코드 스니핏을 활용하면 생산성이 높아집니다.

실제로 자주 사용하는 코드들만 저장해서 사용하거든요.

프로젝트 단위가 아니라 에디터에 등록하는 것으로 생각해 주시면 됩니다.

그래서 한번 등록한 스니핏은  VS Code를 사용하여 코딩한다면, 계속 사용할 수 있어요.

스니핏 잘 사용해 보세요!!!