VScode에 코드 스니펫 저장하기

코딩을 하다 보면 반복적으로 작성해야 하는 코드들이 있는데 이걸 일일이 작성하고 있으면 상당히 귀찮고 피곤하다.

이런 작업을 자동화해주는 방법을 알게되어 공유한다.

React로 코딩을 하다 보면 아래와 같이 파일명으로 함수형 컴포넌트를 만들 일이 많아진다.

export default function FileName() {
    return <div></div>;
}

이 작업이 너무 귀찮아서 코드 스니펫으로 넣어봤다.

순서

VScode에서 맥북 기준 Comman+P(윈도우는 Control+P)를 누르고 >을 누르면

위와 같은 화면이 나오는데 Snippets: Configure Snippets을 클릭해준다.

그 후 New Global Snippets Files... 을 클릭하고 원하는 파일 이름이 입력 후 엔터를 누르면

위와 같은 JSON 형식이 나타나는데,

{
    "reactFunctionComponent": {
        "prefix": "rfc",
        "body": "export default function ${1:${TM_FILENAME_BASE}}(){ return <div>${1:${TM_FILENAME_BASE}}</div>;}",
        "description": "Creates a React Function component"
    },
}

위와 같이 입력해주고 파일을 저장하면

앞으로 VScode를 사용하면서 rfc 를 입력만 해줘도, 파일 이름의 함수형 컴포넌트가 만들어진다.

작업하다가 자동화 하고 싶은 코드 조각이 생기면 하나씩 넣어봐야겠다.