Zenn
Open4

VSCodeのスニペット置き場｜React + TypeScript

React
TypeScript
VS Code
warugakiwarugaki

参考記事
https://dev.to/danielbellmas/react-typescript-snippets-2mlm

Default Exported React Component

  "Typescript default React component": {
    "prefix": "rfcd",
    "body": [
      "import { 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};"
    ],
  }

Exported React Component


  "Typescript React component": {
    "prefix": "rfc",
    "body": [
      "import { 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>",
      "  )",
      "}",
    ],
  }

Default Exported React Component | not interface

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

Exported React Component | not interface


  "Typescript React component": {
    "prefix": "rfcn",
    "body": [
      "import { FC } from 'react'",
      "",
      "export const ${TM_FILENAME_BASE}: FC = () => {",
      "  return (",
      "    <div>",
      "     ${1:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}",
    ],
  }
warugakiwarugaki

オレオレ react + ts + style（emotion）

スタイルファイルが別ファイルの場合

  "Typescript React component named export": {
    "prefix": "srfcn",
    "body": [
      "import ${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}Style from '@/styles/${TM_FILENAME_BASE}Style';",
      "",
      "export const ${TM_FILENAME_BASE} = ():JSX.Element => {",
      "  return (",
      "    <div className=\"${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}\" css={${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}Style}>",
      "     ${1:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}"
    ]
  }

スタイル定義が同ファイル内


  "Typescript React component named export with emotion": {
    "prefix": "srfne",
    "body": [
      "import { css } from '@emotion/react';",
      "",
      "const ${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}Style = css`",
      "${BLOCK_COMMENT_START} ${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}Style ${BLOCK_COMMENT_END}",
      "`;",
      "",
      "export const ${TM_FILENAME_BASE} = ():JSX.Element => {",
      "  return (",
      "    <div className=\"${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}\" css={${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}Style}>",
      "     ${1:$TM_FILENAME_BASE}",
      "    </div>",
      "  )",
      "}"
    ]
  }
warugakiwarugaki

ほかにやりたいこと

hygenで 対話式でテンプレートファイルを作成できるようにする