VSCode User Snippets (상용구) 사용하기

지루한 타이핑 반복을 피하는 방법: 스니펫, 상용구, 매크로

코딩을 하다보면 일부분만 다르고 전체적으로는 비슷한 판박이 코드(보일러 플레이트)를 작성할 때가 있습니다.

이때 처음부터 타이핑하는 것 보다는 기존 코드를 복사-붙여넣기해서 부분적으로 수정하는 것이 더 빠를 수 있습니다.

그런데 그 복사-붙여넣기 보다 우아한 방법이 있는데, 그것은 바로 User Snippets 기능입니다.

스니펫 기능이 무엇인지는, VSCode에서 React 애플리케이션을 작성할 때, 컴포넌트 코드를 만들어주는 React Snippets Extension을 사용해보신 분은 알고 계실겁니다.

혹은 잘 모르시는 분들이라면 아래 이미지를 참조하십시오.

이미지는 React Native Snippet Extension의 설명 페이지에서 가져왔습니다.

User Snippets 작성 방법

기존 VSCode Marketplace에서 제공하는 Snippet Extension도 같은 방법으로 만들어집니다.

팀에서 자주 사용하는 필요한 스니펫이 있으면 프로젝트에 추가해서 사용할 수 있습니다.

프로젝트 저장소의 .vscode 디렉터리 아래에 [언어].code-snippets 파일을 생성합니다.

+- .vscode/
   +- ...
   +- typescript.code-snippets

파일 내용 구조는 이렇습니다.

{
  "[스니펫 이름]": {
    "scope": "[사용 언어]",
    "prefix": "[에디터에서 스니펫을 선택하는 약어]",
    "body": [
      "[내용]",
      "(한 줄에 하나씩 적어줍니다.)",
      ""
    ],
    "description": "['이 스니펫은 -입니다' 설명]"
  }
}

제가 사용하고 있는 스니펫 파일의 예제입니다. (스니펫이 하나만 등록되어 있습니다.)

{
  "ProtocolMessage": {
    "scope": "typescript",
    "prefix": "protom",
    "body": [
      "import { JsonProperty, Serializable } from 'typescript-json-serializer'",
      "",
      "import { ProtocolMessage } from '../../ProtocolMessage'",
      "import { ProtocolMessageTag } from '../../ProtocolMessageTag'",
      "",
      "@Serializable()",
      "export class $TM_FILENAME_BASE implements ProtocolMessage {",
      "  public static readonly type: string = '$TM_FILENAME_BASE'",
      "",
      "  @JsonProperty()",
      "  public readonly type: string = $TM_FILENAME_BASE.type",
      "",
      "  constructor(",
      "    @JsonProperty()",
      "    public readonly name: string",
      "  ) {}",
      "",
      "  public get tags(): ProtocolMessageTag[] {",
      "    return []",
      "  }",
      "}",
      ""
    ],
    "description": "파일 이름과 같은 ProtocolMessage 타입의 서브 클래스 코드를 작성하는 스니펫입니다."
  }
}

어려운 것이 없습니다. 그럼 이어서 사용 방법을 알아보겠습니다.

사용 방법

UpdateAlarmSubscriptionForUser.ts 라는 파일을 생성했습니다.

그리고 에디터를 열고 위에서 설정한 prefix protom를 적고 탭을 누릅니다.

스니펫 코드가 작성됩니다.

소감

아직도 날코딩이나 복사-붙여넣기를 하고 계시다면 User Snippets 기능을 사용해보시기 바랍니다.

일일이 타이핑하거나, 복사-붙여넣기하는 방법보다 효율적입니다.

감사합니다.

References

Snippets in Visual Studio Code