Reactjs code snippets을 사용해서 자동 템플릿을 설정해보자

728x90

유튜브를 보다가 한 유튜버가 fc를 입력했을뿐인데 컨포넌트 형식이 툭 떨어지는것을 보고 이거다 싶어서 검색을 해봤다.

검색해보다가 vscode 확장프로그램인 Reactjs code snippets를 많이 사용하는것을보고 바로 설치했다.

설치를 하였다고 내가 원하는 형식으로 바로 툭떨어지는 것이아니라 내가 하고싶은 형태에 따라 따로 커스텀을 해줘야했는데

vscode 에서 command + shift + p를 누르고 snippets을검색하면

위와같이 사용자 코드 조각 구성이라고 나온다 이걸 선택하면

종류별로 많이 나오게되는데 나는 컨포넌트를 만들고싶어서 typescriptreact.json 파일을 선택했다.

맨처음 선택하게된다면

나는 이미 설정을했기때문에 다른 typescript.json의 초기상태를 예로

이렇게 모두 주석처리가 되어있는것으로 보이게 되는데 여기서 템플릿 설정을 하면된다.

내가 하고싶은 템플릿의 설정은 다음과 같았다

파일명을 그대로 가져올것
파일명의 앞은 어떤 형태든 대문자로 변경되어 들어갈것
타입스크립트를 사용하기때문에 interface가 자동으로 셋팅될것 (interface면 앞에 I(대문자로 시작하는 파일명)이 들어갈것, 나는 type이면 앞에'T', interface면 앞에'I'를 붙이는것을 선호한다)
해당 컴포넌트를 바로 사용하기위해 export default {파일명)이 들어갈것

우선 간단하게 위의 4가지가 자동으로 생성되길 원했다 그렇다면 어떻게 생성할까?

https://snippet-generator.app/

snippet generator

Snippet generator for Visual Studio Code, Sublime Text and Atom. Enjoy :-)

snippet-generator.app

우선 위의 사이트에 접속한다.

접속하면 왼쪽에 내가 원하는 템플릿의 형태를 작성하면 오른쪽에 json형태에 넣기 좋게 변환이 자동으로 된다. 여기서 왼쪽에 내가 원하는 형태의 형식을 작성하고 위에 말했던 typescriptreact.json에 들어가서 적용해보자

{
  "create component": {
    "prefix": "cct",
    "body": [
      "import React, { FC } from 'react';",
      "",
      "interface I${TM_FILENAME_BASE/(^.)(.*)/${1:/upcase}${2}/}Props {",
      "  $1",
      "}",
      "",
      "const ${TM_FILENAME_BASE/(^.)(.*)/${1:/upcase}${2}/}: FC<I${TM_FILENAME_BASE/(^.)(.*)/${1:/upcase}${2}/}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:${TM_FILENAME_BASE/(^.)(.*)/${1:/upcase}${2}/}}",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${TM_FILENAME_BASE/(^.)(.*)/${1:/upcase}${2}/};"
    ],
    "description": ""
  }
}

prefix에 해당 템플릿을 사용할 명령어를 지정하면된다. 나는 이렇게 작성하였고 테스트를 해봤다.