[VScode] 코드 스니펫(Code Snipet)을 이용하여 나만의 코드 템플릿을 만드는 방법

 

 

 

보통 컴포넌트들을 많이 만들 때마다, 기본 틀이 되는 컴포넌트 코드를 쓰는 게 매우 귀찮다.

이럴 때, 코드 스니펫(Code Snipet)을 쓰면 매우 편하게 단축키만 입력하면

자동으로 내가 설정해 놓은 코드를 불러 올 수 있다.

 

코드 스니펫을 이용한 나만의 코드 템플릿 만들기

 

만약 내가 컴포넌트를 만들 때, 다음과 같은 형태를 자주 사용한다고 가정해보자.

 

샘플 컴포넌트 코드

import React from "react";

export const SnipetTestComponent = () => {
  return <></>;
};

 

이제 내가 컴포넌트를 만들때마다, 위의 코드를 간편하게 작성되도록 코드 스니펫에 전역으로 등록해보자.

 

 

1. F1을 눌러 snippets을 검색 및 Snippets: Configure User Snippets 선택

 

 

2. global 검색후, global.code-snuppets.code-snippets 선택

 

 

그럼 이제 아래와 같은 파일이 하나 열리는데, 여기에 내가 자주 사용되는 코드를 작성하면 된다..

 

 

 

이제 저 위에 넣을 코드를 작성해야 하는데, 코드 스니펫 코드를 간단하게 작성해주는 사이트가 있다.

 

snippet-generator 사이트 이동

 

이 사이트에 내가 자주 사용되는 코드를 그냥 쓰기만 하면, 자동으로 변환해준다.

내가 등록하고자 하는 코드를 복사해서 붙여넣어 주고, 변환 된, 코드를 복사하도록 하자.

 

 

 

이제 복사할 소스를 그대로 global.code-snuppets.code-snippets 파일에 붙여 넣도록 하자.

 

그리고 스니펫을 reactComponent로 지어주었다. (이건 사용자 마음대로 써주도록하자.)

그리고 중요한 게, prefix인데, 여기에는 내가 사용 할 "단축어"를 입력해주도록 하자.

나는 아래와 같이 "prefix": "rea"라고 선언했다. 이제 컴포넌트 파일을 만들고 rea라고 입력하면

 

내가 작성한 컴포넌트 코드들이 자동으로 입력될 것이다.

 

 

 

근데 이렇게 하면 컴포넌트를 만들 때마다, 컴포넌트명을 바꿔줘야 한다.. 현재 컴포넌트명이 문자열이기 때문..

코드를 아래와 같이 바꿔주도록 하자.

 

 

 

샘플코드

"reactComponent": {
    "prefix": "rea",
    "body": [
      "import React from \"react\";",
      "",
      "export const ${1:${TM_FILENAME_BASE}} = () => {",
      "  return <></>;",
      "};"
    ],
    "description": ""
},

 

 

테스트

0

이렇게 컴포넌트를 만들고 내가 선언한 단축어인 "rea"를 입력하기만 해도

내가 사용하고자 등록한 코드들이, 자동으로 등록되는 것을 볼 수 있다. 물론 파일명을 따라서..

 

이렇게 하면 컴포넌트를 만들기 편할 거 같다. 끝