VSCode 사용자 코드 조각, 마크다운 말머리(Yaml Front Matter)

VSCode 마크다운을 이용해 블로그 글쓰기를 하고 있습니다. 매번 글을 쓸 때마다 공통적으로 들어가는 또는 자주 사용되는 부분들을 VSCode 사용자 코드 조각을 이용해 쉽고 빠르게 입력할 수 있도록 설정해 글 쓰는 시간을 줄입니다.

vscode

VSCode 사용자 코드 조각을 설정하는 방법은 마크다운이나 HTML 또는 자바스크립트 등 동일합니다.

제 경우 마크다운을 이용해 포스팅 초안을 만들고 완성되면 티스토리 블로그 마크다 에디터에 붙여 넣기를 해 포스팅을 발행하고 있습니다. 주로 사용자 코드 조각은 애드센스 광고 코드와 포스팅 말머리(Front Matter)를 넣는 용도로 사용합니다.

VSCode 사용자 코드 조각

자세한 사항은 아래 링크 VSCode Docs에서 확인할 수 있습니다.

vscode 사용자 가이드

VSCode 사용자 코드 조각 만들기

VSCode를 열고 하단에 톱니바퀴 모양의 설정 버튼을 클릭합니다.

사용자 코드 조각

입력창이 나타나면 markdown을 입력하거나 목록을 스크롤 해 markdown을 찾아 선택합니다.

markdown 입력

아래 이미지처럼 샘플 json 파일이 생성된 것을 볼 수 있습니다.

코드조각 샘플 파일

주석 부분을 해제하고 본인에 맞게 수정해 줍니다.

"Markdown Front Matter": {  # 원하는 이름으로 변경
  "prefix": "tit", # 입력후 Ctrl + Space 인텔리센스 표시
  "body": [
    "Title: 블로그 제목" # 자동완성 될 코드 조각
  ],
  "description": "Yaml Front Matter"  # 인테리센스에 나타날 요약 설명
}

아래 이미지는 Yaml 형식으로 말머리(Front Matter) 코드 조각을 만들어 보았습니다.

코드 수정

수정된 markdown.json 파일

"Markdown Front Matter": {
  "prefix": "-",
  "body": [
    "---",
    "Title: $1",
    "Publish Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
    "Modify Date: ",
    "Categories: [$2]",
    "Tags: [$3]",
    "Slug: ",
    "Thumbnail: ",
    "Description: ",
    "---"
  ],
  "description": "Yaml Front Matter"
}

마크다운 파일을 하나 만들고 설정한 "-"를 입력 후 Ctrl + Space 키를 눌러 인텔리센스 창이 나타나면 선택합니다.

코드 조각 IntelliSense

마크다운 파일에 출력된 코드 조각

# 마크다운 파일
---
Title:
Publish Date: 2020-08-26 13:53:46
Modify Date:
Categories: []
Tags: []
Slug:
Thumbnail:
Description:
---

날짜 관련 변수 사용

변수 관련 내용은 vscode 사용자 가이드에서 보실 수 있습니다.

아래 변수 앞에 $ 표시를 붙여 사용할 수 있습니다.

현재 날짜 및 시간을 삽입하려면 :

  • CURRENT_YEAR 올해
  • CURRENT_YEAR_SHORT 올해의 마지막 두 자리
  • CURRENT_MONTH 두 자리로 된 월 (예 : '02')
  • CURRENT_MONTH_NAME 월의 전체 이름 (예 : 'July')
  • CURRENT_MONTH_NAME_SHORT 월의 짧은 이름 (예 : 'Jul')
  • CURRENT_DATE 월의 날짜
  • CURRENT_DAY_NAME 요일의 이름 (예 : '월요일')
  • CURRENT_DAY_NAME_SHORT 오늘의 짧은 이름 (예 : 'Mon')
  • CURRENT_HOUR 24 시간제 형식의 현재 시간
  • CURRENT_MINUTE 현재 분
  • CURRENT_SECOND 현재 초
  • CURRENT_SECONDS_UNIX Unix 시대 이후의 시간 (초)

vscode 사용자 가이드 참조

반응형