[VS Code] React 코드 스닛펫(snippet) 커스텀 만들기 방법

☘️ 문제점

React 에서 컴포넌트의 틀을 직접 코드로 작성하다 보면 번거롭고, 복붙을 하게 되면 실수하는 경우가 발생한다.

그래서 이러한 문제점을 해결하기 위해 코드 스닛펫을 사용하여 간편하게 코드의 틀을 만들 수 있어 시간을 절약할 수 있다.

 

☘️ 코드 스닛펫 Extension

코드 스닛펫을 간단하게 익스텐션(Extension)을 이용해 사용할 수 있다.

다양한 익스텐션이 있는데 그중에서 내가 사용하는 익스텐션은 Reactjs code snippets 이다.

익스텐션

 

해당 익스텐션의 스니펫의 종류는 Reactjs code snippets 에서 자세히 볼 수 있다.

스니펫 종류

 

코드 스닛펫 익스텐션 - 사용 방법

다양한 스니펫 중에서 내가 제일 많이 사용하는 건 rsc 이다.

아래처럼 키워드를 입력하고 엔터를 누르면 자동으로 코드가 만들어진다.

사용방법

 

☘️ 코드 스닛펫 Custom

하지만 정해진 코드 스니펫 이외에도 다른 코드 스니펫이 필요한 경우 직접 커스텀하여 만들 수 있다.

 

1. 코드 스닛펫 형태 작성하기

먼저 만들고 싶은 코드 스닛펫의 형태를 작성한다.

참고로 여기서 TM_FILENAME_BASE 는 파일이름에서 확장자명을 뺀 부분이다.

import { useState } from 'react';

const ${TM_FILENAME_BASE} = () => {
    return(
        <div>
          컴포넌트 작성하기
        </div>
    );
}

export default ${TM_FILENAME_BASE};

 

2. 코드 스닛펫 변형

위에서 작성한 코드 스니펫을 사용하기 위해 코드 스니펫으로 생성해 주는 사이트 에서 작성한 코드를 붙여 넣는다.

붙여넣기

그러면 오른쪽에 생성된 것을 복사한다.

 

3. 코드 스닛펫 설정

vs code 로 돌아와서 ctrl + shift + p (winodw) 또는 cmd + shift + p (mac) 를 눌러

configure user snippets 를 입력하여 

설정

원하는 언어를 선택한다. 

언어

 

4. 코드 스니펫 붙여 넣기

위에서 복사한 코드 스니펫을 붙여 넣는다.

참고로 prefix 에는 단축어이며 나는 !comp 를 단축어로 설정하였다.

붙여넣기

 

5. 커스텀 코드 스닛펫 사용하기

그러면 이제 !comp 를 입력하면 코드 스닛펫을 사용할 수 있게 된다.

단축어

커스텀한 코드 스닛펫이 잘 적용되었다!

커스텀 사용

 

☘️ 마치며...

평상시에 코드 스닛펫이 유용하게 사용하고 있어 이를 공유하고 싶어 글을 작성했다! 모두 유용하게 사용하길!