VSCode 마크다운을 이용해 블로그 글쓰기를 하고 있습니다. 매번 글을 쓸 때마다 공통적으로 들어가는 또는 자주 사용되는 부분들을 VSCode 사용자 코드 조각을 이용해 쉽고 빠르게 입력할 수 있도록 설정해 글 쓰는 시간을 줄입니다.
VSCode 사용자 코드 조각을 설정하는 방법은 마크다운이나 HTML 또는 자바스크립트 등 동일합니다.
제 경우 마크다운을 이용해 포스팅 초안을 만들고 완성되면 티스토리 블로그 마크다운 에디터에 붙여 넣기를 해 포스팅을 발행하고 있습니다. 주로 사용자 코드 조각은 애드센스 광고 코드와 포스팅 말머리(Front Matter)를 넣는 용도로 사용합니다.
VSCode 사용자 코드 조각
자세한 사항은 아래 링크 VSCode Docs에서 확인할 수 있습니다.
VSCode 사용자 코드 조각 만들기
VSCode를 열고 하단에 톱니바퀴 모양의 설정 버튼을 클릭합니다.
입력창이 나타나면 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 키를 눌러 인텔리센스 창이 나타나면 선택합니다.
마크다운 파일에 출력된 코드 조각
# 마크다운 파일
---
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 시대 이후의 시간 (초)
