VS Code React Personal Snippets

ds.json

{ 
  "Default storybook story": {
    "scope": "typescript,typescriptreact",
    "prefix": "ds",
    "body": [
      "import React from \"react\";",
      "import { Story } from \"@storybook/react/types-6-0\";",
      "import { Props, $1 as Component } from \"./$1\";",
      "",
      "const storyToExport = {",
      "  title: \"$2/$1\",",
      "  component: Component,",
      "};",
      "",
      "const Template: Story<Props> = (args) => <Component {...args} />;",
      "",
      "export const $1 = Template.bind({});",
      "$1.args = {",
      "$0",
      "};",
      "export default storyToExport;"
    ],
    "description": "Default storybook story"
  }
}

emotion.json

{
  "Insert theme function to css": {
    "scope": "javascript,typescript,typescriptreact,css",
    "prefix": "tcss",
    "body": ["${({ theme }) => theme.$1}"],
    "description": "Insert theme function to css"
  },
  "Import @emotion/styled": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "iem",
    "body": ["import styled from \"@emotion/styled\""],
    "description": "Insert import of emotion styled"
  },
  "Add container component": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "emc",
    "body": ["const Container = styled.div`", "$1", "`;"],
    "description": "Insert import of emotion styled"
  }
}

rfc.json

{
  "React full component": {
    "scope": "typescript,typescriptreact",
    "prefix": "rfc",
    "body": [
      "import React from \"react\";",
      "",
      "export interface Props {",
      "  $2",
      "}",
      "",
      "export const $1 = ({ $3 }: Props) => {",
      "  return <div>$0</div>;",
      "};"
    ],
    "description": "React full component"
  }
}

rspec.json

{  
  "React component test": {
    "scope": "typescript,typescriptreact",
    "prefix": "rspec",
    "body": [
      "import { fireEvent, render } from '@testing-library/react';",
      "import { $1 } from './$1';",

      "describe('$1', () => {",
      "  beforeEach(() => {",
      "    jest.resetAllMocks();",
      "  });",
      "",
      "  it('should $2', async () => {",
      "    const { findByTestId } = render(",
      "    <$1 />",
      "    );",
      "    fireEvent.click(await findByTestId('test-id'));",
      "  });",
      "});"
    ],
    "description": "React component test"
  }
}

trans.json

{
  "Insert translate hook to console": {
    "scope": "typescript,typescriptreact",
    "prefix": "trans",
    "body": ["const { t } = useTranslation();", "$0"],
    "description": "Insert transalte hook"
  }
}