[VScode] React snippet(템플릿) 설정으로 반복 타이핑을 피해보자

스니펫(snippet)

재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어

 

 

리액트에서 컴포넌트를 생성할 때 반복적으로 적어주는 템플릿이 있다.

이를 스니펫이라고 일컫는데, vscode에서 스니펫을 설정하여 반복적인 타이핑 작업을 줄여보자.

 

 

https://snippet-generator.app/

snippet generator

 

2024.02.13 내용 변경 (수정 후)

 

vscode에서 뭔가 바뀌었는지.. 원래 아래 수정 전 내용 복붙하면 잘 동작했었는데 이제 깨져서 나온다,,

지금은 Code > Preferences > Configure User Snippets에 새롭게 변경한 내용을 복붙해서 쓰고 있다.

 

{
  "폴더명 템플릿": {
    "prefix": "foldername-template",
    "body": [
      "import { Flex } from '@nuua/wuua-ui-system'",
      "",
      "const  ${TM_DIRECTORY/.*[\\\\\\|\\/]+(.*)/$1/} = () => {",
      "  return <Flex></Flex>",
      "}",
      "",
      "export default ${TM_DIRECTORY/.*[\\\\\\|\\/]+(.*)/$1/}"
    ],
    "description": ""
  },


  "파일명 템플릿": {
    "prefix": "filename-template",
    "body": [
      "import { Flex } from '@nuua/wuua-ui-system'",
      "",
      "const ${TM_FILENAME_BASE} = () => {",
      "  return <Flex></Flex>",
      "}",
      "",
      "export default ${TM_FILENAME_BASE}"
    ],
    "description": ""
  }

}

 

 

 

---

이전 내용 (수정 전)

 

 

위 사이트에 접속 후, 좌측 칸에 아래 코드 입력

"Customized React Functional Component": {
  "prefix": "tem",
  "body": [
    "import { } from '@chakra-ui/react'",
    "",
    "const ${TM_FILENAME_BASE} = () => {",
    "    return(",
    "        <div>",
    "        </div>",
    "    )",
    "}",
    "",
    "export default ${TM_FILENAME_BASE};"
  ],
  "description": "Customized React Functional Component"
}

 

 

좌측에 코드를 입력하면 자동으로 우측 코드가 바뀐다. 우측 코드를 복붙한 뒤 VScode로 돌아와서

 

 

File > Preferences > User Snippets으로 들어가면

 

 

위와 같이 어느 언어에 스니펫을 적용할 건지 고르도록 한다.

나는 타입스크립트+ 리액트 환경에서 개발을 하므로, typescriptreact.json을 선택했다.

 

 

아까 웹사이트에서 복붙한 코드를 위와 같이 붙여넣기 후 저장한다.

 

 

끝~ 이제 잘 되는지 보자!

 

새로운 파일을 만들고, 단축어인 crfc를 입력하면 아래와 같이 자동완성이 된다.

선택 후 엔터를 입력하면 스니펫(템플릿)이 잘 출력되는 것을 확인할 수 있다.