Snippets

How to get to "snippets" in VSCode

• Cmd + P

• In textbox, type & click: >Snippets: Configure User Snippets

• Find typescriptreact.code-snippets & click

  • Mine has the extension .code-snippets for whatever reason, but I think the standard .json should work as well? (article for instructions to configure snippets here)

How to create snippets (snippet generator)

• Snippet Generator

Aaron's snippets

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	//
	// Snippet generator: https://snippet-generator.app/
	//
	// JavaScript
	"function": {
		"scope": "typescriptreact,typescript",
		"prefix": "f",
		"body": [
			"function ${1:}() {",
			"  ${2:}",
			"}"
		],
		"description": "function"
	},
	"console.log": {
		"scope": "typescriptreact,typescript",
		"prefix": "cl",
		"body": [
			"console.log(${1:})"
		],
		"description": "console log"
	},
	"arrow function": {
		"scope": "typescriptreact,typescript",
		"prefix": "arr",
		"body": [
			"() => {${1:}}"
		],
		"description": "arrow function"
	},
	"if": {
		"scope": "typescriptreact,typescript",
		"prefix": "iff",
		"body": [
			"if (${1:}) {",
			"  ${2:}",
			"}"
		],
		"description": "if"
	},
	"ifelse": {
		"scope": "typescriptreact,typescript",
		"prefix": "ifel",
		"body": [
			"if (${1:}) {",
			"  ${2:}",
			"} else {",
			"  ${3:}",
			"}"
		],
		"description": "ifelse"
	},
	"try catch": {
		"scope": "typescriptreact,typescript",
		"prefix": "tryc",
		"body": [
			"try {",
			"  ${1:}",
			"} catch {",
			"  ${2:}",
			"}"
		],
		"description": "try catch"
	},
	// React
	"reactFunctionalComponent": {
		"prefix": "rfc",
		"body": [
			"interface Props {}",
			"",
			"export function ${1:ComponentName}({}: Props) {",
			"  return (",
			"    <${2}>",
			"      ${3}",
			"    </${2}>",
			"  );",
			"}"
		],
		"description": "reactFunctionalComponent"
	},
	"reactFunctionalComponentContext": {
		"prefix": "rfc-context",
		"body": [
			"import React, { createContext, useContext } from 'react';",
			"",
			"// context (with default values)",
			"interface ContextProps {",
			"",
			"}",
			"const Context = createContext<ContextProps | undefined>(undefined)",
			"",
			"// context provider (makes context accessible to children)",
			"interface ProviderProps {",
			"  children: React.ReactNode;",
			"}",
			"export function ContextProvider${1:Item}({ children }: ProviderProps) {",
			"  return <Context.Provider value={{}}>{children}</Context.Provider>;",
			"}",
			"",
			"// context hook (to use the context within children components)",
			"export function useContext${1:Item}() {",
			"  const context = useContext(Context);",
			"  if (context === undefined) {",
			"    throw new Error('useContext${1:Item} must be used within a Context${1:Item}Provider');",
			"  }",
			"  return context;",
			"}",
			""
		],
		"description": "reactFunctionalComponent-context"
	},
	"reactFunctionalComponentIndex": {
		"prefix": "rfci",
		"body": [
			"export * from './${1:ComponentName}';",
		],
		"description": "reactFunctionalComponentIndex"
	},
	"useEffect": {
		"scope": "typescriptreact,typescript",
		"prefix": "useeff",
		"body": [
			"useEffect(() => {",
			"  ${1:}",
			"}, [${2:}])"
		],
		"description": "useEffect"
	},
	// Pavewise
	"reactFunctionalComponentPagePavewise": {
		"prefix": "rfcp-pavewise",
		"body": [
			"interface PageProps {}",
			"",
			"export default function Page({}: PageProps) {",
			"${1}",
			"  return (",
			"    <>",
			"      ${2}",
			"    </>",
			"  )",
			"}"
		],
		"description": "reactFunctionalComponentPagePavewise"
	},
	"reactFunctionalComponentLayoutPavewise": {
		"prefix": "rfcl-pavewise",
		"body": [
			"import { PageLayout } from '@components/layout/_pages/PageLayout';",
			"import Page from './page';",
			"",
			"interface LayoutProps {}",
			"",
			"export default function Layout({}: LayoutProps) {",
			"  return (",
			"    <PageLayout header={null}>",
			"      <Page />",
			"    </PageLayout>",
			"  );",
			"}",
			""
		],
		"description": "reactFunctionalComponentLayoutPavewise"
	},
	"reactFunctionalComponentIndexLayoutPavewise": {
		"prefix": "rfci-layout-pavewise",
		"body": [
			"export { default } from './layout';",
		],
		"description": "reactFunctionalComponentIndexLayoutPavewise"
	},
	"reactFunctionComponentSchema": {
		"prefix": "rfc-schema",
		"body": [
			"import { z } from 'zod';",
			"",
			"/**",
			" * See documentation: https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/new/router-folder#schema.ts",
			" */",
			"",
			"// FE schemas",
			"export const schema = z.object({});",
			"",
			"export const schemaCreate = schema.pick({});",
			"",
			"export const schemaUpdate = schema.pick({}).partial();",
			"",
			"// BE schemas",
			"export const schemaBE = z.object({});",
			"",
			"export const schemaBECreate = schemaBE.pick({});",
			"",
			"export const schemaBEUpdate = schemaBE.pick({}).partial();",
			"    "
		],
		"description": "reactFunctionComponentSchema"
	},
	"reactFunctionComponentAdapterFns": {
		"prefix": "rfc-adapterFns",
		"body": [
			"import { TDocBE, TDocBECreate, TDoc, TDocCreate } from './types';",
			"",
			"/**",
			" * See documentation: https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/new/router-folder#adapterfns.ts",
			" */",
			"",
			"export function adapterFn(data: TDocBE): TDoc {",
			"  return data;",
			"  // return {};",
			"}",
			"",
			"export function adapterFnToBE(data: TDocCreate): TDocBECreate {",
			"  return data;",
			"  // return {};",
			"}",
			""
		],
		"description": "reactFunctionComponentAdapterFns"
	},
	"reactFunctionalComponentFormCRUD": {
		"prefix": "rfc-formcrud",
		"body": [
			"import { Stack } from '@mui/material';",
			"import { useFormField } from '~/hooks';",
			"import { DevTool } from '@hookform/devtools';",
			"import { useFormDoc } from './_lib';",
			"import { TYPE } from '../../../_config';",
			"",
			"interface Props {}",
			"",
			"export function FormCRUD({}: Props) {",
			"  const { form, onSubmit, isLoading } = useFormDoc();",
			"  const { TextFieldRhf, FormHeader, FormButtonsContainer, ButtonSubmit } = useFormField();",
			"",
			"  return (",
			"    <>",
			"      <FormHeader details=\"Form details...\">{TYPE.display.singular}</FormHeader>",
			"",
			"      <Stack gap={1} sx={{ width: 1 }}>",
			"        <TextFieldRhf form={form} name=\"name\" label=\"Name\" />",
			"        <FormButtonsContainer>",
			"          <ButtonSubmit onClick={form.handleSubmit(onSubmit)} disabled={isLoading} isLoading={isLoading} />",
			"          {/* <ButtonCancel onClick={() => setOpenModal(false)} disabled={isLoading} /> */}",
			"        </FormButtonsContainer>",
			"",
			"        <DevTool control={form.control} placement=\"top-right\" />",
			"      </Stack>",
			"    </>",
			"  );",
			"}",
			""
		],
		"description": "reactFunctionalComponentFormCRUD"
	},
	"storybookStory": {
		"prefix": "sb-s",
		"body": [
			"import type { Meta, StoryObj } from '@storybook/react';",
			"import { StorybookProviders } from '~/context';",
			"import { ${1:ComponentName} as Component } from './index';",
			"// import { FX_DATA } from '~/fixtures';",
			"// import * as InnerComponentStories from '../InnerComponent/InnerComponent.stories';",
			"",
			"// COMPONENT",
			"const meta = {",
			"  component: Component,",
			"  title: 'Components/UI/${1:ComponentName}',",
			"  tags: ['autodocs'],",
			"  decorators: [",
			"    (Story) => (",
			"      <StorybookProviders>",
			"        <Story />",
			"      </StorybookProviders>",
			"    ),",
			"  ],",
			"} satisfies Meta<typeof Component>;",
			"export default meta;",
			"",
			"// STORIES",
			"type Story = StoryObj<typeof meta>;",
			"const defaultArgs: Story['args'] = {",
			"  // data: undefined,",
			"  // isLoading: false,",
			"  // isError: false,",
			"  // propsInnerComponent: InnerComponentStories.Default.args,",
			"};",
			"const standardArgs: Story['args'] = {",
			"  ...defaultArgs,",
			"  // data: FX_DATA,",
			"  // propsInnerComponent: InnerComponentStories.Standard.args,",
			"};",
			"",
			"export const Playground: Story = {",
			"  args: standardArgs,",
			"  parameters: {",
			"    layout: 'centered',",
			"  },",
			"};",
			"",
			"export const Default: Story = {",
			"  args: defaultArgs,",
			"};",
			"",
			"export const Standard: Story = {",
			"  args: standardArgs,",
			"};",
			"",
			"// export const Loading: Story = {",
			"//   args: {",
			"//     ...Standard.args,",
			"//     isLoading: true,",
			"//   },",
			"// };",
			"",
			"// export const Error: Story = {",
			"//   args: {",
			"//     ...Standard.args,",
			"//     isError: true,",
			"//   },",
			"// };",
			"",
			"// export const Empty: Story = {",
			"//   args: {",
			"//     ...Standard.args,",
			"//     data: undefined,",
			"//   },",
			"// };",
			"",
			"// export const WithoutDataField: Story = {",
			"//   args: {",
			"//     ...Standard.args,",
			"//     data: { ...FX_DATA, field: undefined },",
			"//   },",
			"// };",
			""
		],
		"description": "storybookStory"
	},
}