Develop/React

[VSCode] 파일명으로 바로 컴포넌트 생성하기

kimpeupeu 2023. 2. 20. 10:03

저는 타입스크립트 기반으로 함수 컴포넌트를 생성할 스니펫을 만들겁니다.

{
  "Create a react function component": {
    // 스니펫 실행할 키워드
    "prefix": "rfc",
    // 실행 후 생성될 모습, 각 item이 라인이 됩니다.
    // TM_FILENAME_BASE는 확장자를 뺀 현재 파일명
    "body": [
      "import React from \"react\";",
      "",
      "interface ${TM_FILENAME_BASE}Props {}",
      "",
      "const $TM_FILENAME_BASE: React.FC<${TM_FILENAME_BASE}Props> = ({}) => {",
      "\treturn <></>;",
      "};",
      "",
      "export default $TM_FILENAME_BASE;",
      ""
    ],
    // 해당 스니펫 이름
    "description": "Create a function component using Typescript"
  }
}

해당 스니펫은 아래의 경로로 들어가 적용언어를 선택해 적용시켜주면됩니다. 

그러면 아래와 같이 실행할 수 있습니다.

파일명을 기반으로 함수 컴포넌트가 짜잔!

귀찮은 반복 코딩을 줄이세용!

반응형