Visual Studio Code의 코드 스니펫 기능을 활용한 Front matter 작성법을 정리한 글입니다.

1. YFM(YAML Front Matter)Permalink

블로그에 포스팅 하기 위해서는 마크다운 형식 파일에 글을 작성하고, 파일의 시작 부분에 3중 하이픈 안에 글과 관련된 정보를 넣어야 합니다.

---
title: YAML Front Matter
description: A very simple way to add structured data to a page.
---

이 3중 하이픈 안에 위치한 블록을 YAML Front Matter(YFM)이라고 합니다. YFM은 마크다운 파일의 최상단에 위치하며 해당 페이지와 내용에 대한 메타데이터를 담고 있고 있습니다. YFM에서는 글의 제목, 날짜, 카테고리, 태그, 레이아웃 등을 정의할 수 있습니다.

이 포스팅의 YFM은 다음과 같습니다.

---
title: '[GitHub Pages] 코드 스니펫으로 Front Matter 작성하기'
excerpt: 'Visual Studio Code의 코드 스니펫 기능을 활용한 Front matter 작성법을 정리한 글입니다.'
category: 
  - GitHub Pages
tags:
  - GitHub Pages
  - Markdown
toc: true
toc_sticky: true
date: 2023-02-03
last_modified_at: 2023-02-03
---

하지만 포스팅할 때마다 YFM을 처음부터 작성하는 것이 번거로워서, 코드 스니펫을 통해 빠르게 작성하려고 합니다.

2. 코드 스니펫Permalink

스니펫(snippet)은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. - 위키 백과

코드를 몇개의 글씨를 이용해서 축약시켜 놓고, 필요할 때마다 불러서 사용하는 방법을 코드 스니펫이라고 합니다.
저는 Visual Studio Code를 활용하여 글을 작성하는데, VSCode에서 제공하는 코드 스니펫 기능을 활용하여 코드 스니펫을 만들어보도록 하겠습니다.

3. VSCode 에서 코드 스니펫 만들기Permalink

1. 코드 스니펫 만들기Permalink

Code > 기본 설정 > 사용자 코드 조각 구성 으로 이동한 후, ‘markdown’을 선택해줍니다. 코드 스니펫으로 만들 YFM 구조 부분은 블로그 포스팅에만 사용하기 때문에 마크다운 파일에서만 적용할 수 있도록 markdown.json에 작성합니다.

3. YFM 구조 입력Permalink

{
	"Front Matter":{
		"prefix": "front_matter",
		"body":[
			"---",
			"title: '$1'",
			"excerpt: '$2'",
        	"category:", 
			"  - $3",
			"tags:" ,
			"  - $4", 
			"  - $5",
			"toc: true",
			"toc_sticky: true",  
			"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
			"last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
			"---"
		], 
		"description": "블로그 front matter"
	}
}

포스팅에 사용할 YFM 구조를 입력합니다. 이때 각 내용은 다음과 같습니다.

• 코드 조각 제목 : 코드 조각 이름입니다.
• prefix : 명령어로, 에디터에서 명령어를 쓰면 body의 내용이 작성됩니다.
• body : 명령어를 입력하면 에디터에 작성될 내용입니다.
• description : 코드 스니펫에 대한 설명입니다.

제가 작성할 때 활용한 문법 중에 $1, $2, $3 과 같이 $표시가 된 것들이 있는데, 이를 Tabstops라고 합니다. Tab키를 통해서 순서대로 내용을 입력할 수 있습니다.
그리고 이를 활용해서 ${1|one,two,three|} 처럼 파이프 라인 안에 작성하면 해당 값 중에서 선택이 가능합니다.

그리고 스니펫 문법 중 여러 변수를 활용할 수 있는데, 저는 현재 날짜를 작성해주기 위해서 $CURRENT_YEAR, $CURRENT_MONTH, $CURRENT_DATE 변수를 활용해 주었습니다.

더 많은 스니펫 문법은 https://code.visualstudio.com/docs/editor/userdefinedsnippets에서 확인할 수 있습니다.

하지만 바로 마크다운 파일에 들어가서 prefix를 입력하면 실행이 되지 않습니다. suggestions에 대한 설정을 바꿔주어야 합니다.

4. 설정 변경Permalink

shift+command+P를 통해서 ‘Preferences: Configure Language Specific Settings(기본 설정: 언어별 설정 구성)’에 접근합니다. 그리고 마크다운을 선택해줍니다. 그리고 텍스트편집기 > 제안 사항 에서 ‘Editor: QuickSuggestions’과 ‘Editor: Snippet Suggestions’의 설정을 변경해줍니다.

그리고 prefix인 front_matter을 입력해 보면 description과 함께 스니펫이 나타납니다.