[VS Code] Custom 자동 완성, Snippets

Posted Jul 2, 2023

By JIHWAN PARK 3 min read

VS Code에서 Custom 자동 완성(Code Snippets)을 만드는 방법을 소개합니다.

Github Blog를 작성하다 보면 동일한 구조를 작성하는 경우가 많다. 예를 들어서 코딩테스트 관련 게시글의 경우 동일한 양식으로 작성을 하고 있고, 블로그 글의 정보를 나타내는 Header 부분이라던지, Header 부분의 현재 시간을 적을 때라던지 등의 경우가 있다.

이럴 때 VS Code의 Snippets을 활용하면 편리하게 사용할 수 있다.

📄 Snippets: Configure User Snippets > markdown.json

Ctrl + Shift + P를 눌러 Snippets 을 입력하고 Snippets: Configure User Snippets 을 선택
그리고 markdown.json을 선택
여기에 아래와 같이 원하는 것을 작성하면 된다.
자세한 문법은 VS Code 공식문서와 구글링을 통해 작성 해보기!

  
{
  "Print Date": {
    "prefix": "now",
    "body": [
      "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND +0900"
    ],
    "description": "Print date"
  },
  "Post Head": {
    "prefix": "post",
    "body": [
      "---",
      "title:",
      "author: JIHWAN PARK",
      "categories: []",
      "tag: []",
      "math: true",
      "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND +0900",
      "last_modified_at: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND +0900",
      "---",
      "> ",
      "{: .prompt-info}"
    ],
    "description": "Print date"
  }
}

prefix : 설정할 단축키
body : 자동 완성할 내용
description : 설명
ex) now를 치고 Ctrl + Space를 누르면 현재 시간이 작성됨

📄 settings.json

prefix를 치고 탭이나 엔터만 눌러도 완성되게 하려면 아래와 같은 설정을 추가하면 된다.
마찬가지로 Ctrl + Shift + P를 누르고 settings.json을 검색하고 Preferences: Open User Settings (JSON)을 열고 아래의 내용을 추가한다.

  
{
  "[markdown]": {
    "editor.quickSuggestions": {
      "other": "on",
      "comments": "on",
      "strings": "on"
    }
  }
}

🔎 뭐가 다른지는 모르겠음..

참고한 블로그에 보면 이렇게 작성하면 된다고 해서 해보면 되는데, 밑줄이 그어져서 불편..
그래서 그냥 자동완성 하면 위에 코드처럼 되길래 위에 처럼 작성해서 쓰고있음.

  
{
  "[markdown]": {
    "editor.quickSuggestions": true
  }
}

📜 참고한 자료들

ETC, Environment

VS Code Snippets

This post is licensed under CC BY 4.0 by the author.

📄 Snippets: Configure User Snippets > markdown.json

📄 settings.json

Trending Tags