Visual Studio Code 같은 코드 에디터에서 코드를 작성하다보면 생각보다 반복적인 코드를 작성하는 경우가 많다.

예를 들어서 React 컴포넌트를 만든다면 함수 선언식이나 화살표 함수로 작성하는 경우가 많은데, 컴포넌트를 만들어야 할 일이 빈번하다면 이를 반복하는 일이 개발을 할 때 피곤함을 주는 요소가 된다. (물론 리액트의 경우 Reactjs code snippets 같은 vscode extension이 있다! 정말 좋으니 복사 붙여넣기를 반복하는 분들께는 써보는 것을 추천한다.)

그러므로 VSCode에서 코드 조각들을 Shortcut으로 만들어주는 Code Snippet를 설정해보자!

1. vscode 폴더에 필요한 파일 추가하기

vscode로 만든 파일에는 .vscode 라는 숨김 폴더 내에 확장자가 .code-snippets인 파일을 추가하여 스니펫을 설정할 수 있다.

현재 루트 디렉토리 기준으로 vscode 폴더가 없는 경우 생성을 한 후, 여러분이 원하는 이름의 .code-snippets 파일을 추가하자. 본인의 경우 astro.js 내에서 글을 발행할 때 쓰는 md 파일 내에 boiler plate가 필요해 article.md.code-snippets 파일을 추가하였다. 추가한 파일의 양식은 다음과 같다.

// .vscode/article.md.code-snippets
{
  "Article Markdown": {
    "prefix": "article.md",
    "body": [
      "---",
      "title: ",
      "description: ",
      "date: ",
      "draft: false",
      "---",
    ],
    "description": "Article Markdown Template"
  }
}

여기서 중요한 부분은 prefix 와 body 이다.

• prefix : 코드 스니펫을 호출할 때 사용할 이름
• body : 코드 스니펫의 내용

그러므로 prefix는 다른 스니펫과 겹치치 않도록 네이밍을 하는 것이 중요하다. 또한 body에는 boiler plate로 설정하고 싶은 코드를 작성해두면 된다.

위 부분에서 Article Markdown이라는 이름은 그저 식별하기 위한 이름이고, Description은 Snippet을 호출할 때 보여주는 설명이다.

2. 코드 스니펫 호출하기

이제 파일을 작성하는 곳으로 가서 여러분이 만든 스니펫을 호출하면 된다!

3. 특정 확장자에서 코드 스니펫 호출하도록 설정하기 (optional)

보통 여러분이 작성하는 파일에서는 에디터에서 적는 내용에 따라 Suggestion을 해주기 때문에 상관이 없지만, 특정 파일에서는 이를 의도적으로 설정할 필요가 있다.

본인은 마크다운 파일 내에서 스니펫이 호출되어야 했는데, .md 파일에서 스니펫이 호출되지 않는 문제가 있었다. 이를 해결하기 위해서는 .vscode 폴더 내에 settings.json 파일을 추가하고 다음과 같은 설정을 해주어야 한다.

// .vscode/settings.json
{
  "[markdown]": {
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    }
  }
}

짜잔!