React Typescript 스니펫

새로운 구성 요소를 생성할 때 동일한 코드를 입력하는 데 지쳤다면 VS Code가 제공하는 멋진 솔루션인 코드 스니펫 🔥이 있습니다.

다음은 Typescript로 React 구성 요소를 만들기 위한 두 가지 스니펫입니다.

내보낸 기본 React 구성 요소

  "Typescript default React component": {
    "scope": "typescriptreact",
    "prefix": "rfcd",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
  }

내보낸 React 구성 요소

"Typescript React component": {
    "scope": "typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React, { FC } from 'react'",
      "",
      "interface ${TM_FILENAME_BASE}Props {",
      "  $1",
      "}",
      "",
      "export const ${TM_FILENAME_BASE}: FC<${TM_FILENAME_BASE}Props> = ({ $2 }) => {",
      "  return (",
      "    <div>",
      "     ${3:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
    ],
  }

흐름 분석

이 경우 접두사를 입력합니다(이 경우 rfc 또는 rfcd ). (원하는대로 부를 수 있습니다 🙂).

인터페이스 소품을 작성합니다.

기능으로 이동하려면 탭을 누르십시오.

인터페이스에 작성한 소품을 추가합니다. (이것은 최적화할 수 있는 또 다른 단계처럼 느껴집니다. 인터페이스에서 소품을 가져오지만 아직 해결책을 찾지 못했습니다.)

탭을 누릅니다.

구성 요소의 반환 작성을 시작하거나 구성 요소의 이름과 함께 그대로 두십시오.

Vs Code는 스니펫에서 사용할 수 있는 변수를 제공합니다. 여기에서는 (확장자 없이) 파일 이름을 제공하는 TM_FILENAME_BASE 변수를 사용하고 있습니다.

일반적인 규칙은 파일 이름을 구성 요소 이름과 동일하게 만드는 것이지만, 그렇지 않은 경우 해당 변수를 변경할 수 있습니다 look here for more information .

To create your own snippets you'll need to go to Code > Preferences (User Snippets under File > Preferences on Windows), and then select the language for which the snippets should appear, or the New Global Snippets file option.

Folder Template이라는 확장 프로그램에 대해 들었는데, 내부에 미리 만들어진 템플릿이 있는 폴더 구조를 생성합니다. 아직 시도하지는 않았지만 좋은 생산성 해킹인 것 같습니다. 가까운 장래에 그것에 대해 게시하십시오 🙂.