Visual Studio Code Snippet (for React)

오늘은 내가 Visual에서 사용하는 두가지 Snippet을 소개하려고 한다. snippet이란 간단하게 말해서 IDE에서 제공하는 자동작성을 직접 만드는 것이라고 생각하면 좋다.

Visual Studio Code Snippet

 

VSCode에서 Snippets을 설정하는 방법

1. cmd + shift + p를 눌러 snippets를 검색한다.
2. Snippets: Configure User Snippets 선택
3. Snippet을 지정할 파일 타입을 선택(내 경우에는 typescriptreact.json 선택)
4. Snippet 입력 후 사용

 

VSCode Snippets 구문

"[snippet 이름(기능에는 아무 영향이 없고 구분하기 위한 이름)]" : {
    /** 해당 Snippet을 호출하기 위한 단축어 */
    "prefix": "anything",
    "body" : [
        "String[] 타입으로",
        "하나의 element에 한 줄 이라고 생각하고",
        "코드 작성"       
    ]
}

 

아래는 내가 자주 사용하는 두가지 Snippet은 React에서 컴포넌트를 만드는 Snippet과 NexstJS 페이지 컴포넌트를 만드는 Snippet이다.

 "React Arrow Function": {
        "prefix": "raf",
        "body": [
            "import { ReactNode } from 'react'",
            "",
            "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = (): ReactNode => {",
            "return <div></div>",
            "}",
            "",
            "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}"
        ],
        "description": "Create Arrow Functional Component"
    },
    "Next Page Component": {
        "prefix": "npc",
        "body": [
            "import type { NextPage} from 'next'",
            "",
            "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}: NextPage = () => {",
            "return <div></div>",
            "}",
            "",
            "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}"
        ]
    },

 

여기서 `TM_FILENAME_BASE/(.*)/${1:/pascalcase}/` 는 파일명을 가져와 첫 글자를 대문자로 만든 값을 가져오는 것을 뜻한다. 따라서 컴포넌트 파일을 만든 후 파일 내에서 “raf”를 입력 후 Tab을 누르면 React 컴포넌트가 생성된다.

프로젝트 초기에 많은 파일을 만들어야 할 일이 자주 생기는데 아주 유용하게 사용할 수 있다.