VS Code Snippets

snippets.code-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"
	// }

	"React Component": {
		"scope": "typescriptreact",
		"prefix": "nxReactComponent",
		"description": "Create a react component",
		"body": [
			"type ${1:Name}Props = {",
			"  ${2}",
			"}",
			"function ${1:Name}(props: ${1:Name}Props) {",
			"  const { $0 } = props",
			"  ",
			"  return <></>",
			"}"
		],
	},

	"React Hook": {
		"scope": "typescript,typescriptreact",
		"prefix": "nxReactHook",
		"description": "Create a react hook",
		"body": [
			"type Use${1:Name}Params = {",
			"  ${2}",
			"}",
			"function use${1:Name}(params: Use${1:Name}Params) {",
			"  const { $0 } = params",
			"  ",
			"}"
		],
	},

	"Component Story legacy": {
		"scope": "typescript,typescriptreact",
		"prefix": "nxStoryLegacy",
		"description": "Create a story for a react component (CSF2)",
		"body": [
			"import type { ComponentMeta, ComponentStory } from '@storybook/react'",
			"",
			"import { ${1:Component} } from '.'",
			"",
			"export default {",
			"  title: '${2}',",
			"  component: ${1:Component},",
			"  args: {",
			"    ${0}",
			"  },",
			"  parameters: {",
			"    design: {",
			"      type: 'figma',",
			"      url: ''",
			"    },",
			"  },",
			"} as ComponentMeta<typeof ${1:Component}>",
			"",
			"export const Story: ComponentStory<typeof ${1:Component}> = function (args) {",
			"  return (",
			"    <${1:Component}  {...args} />",
			"  )",
			"}"
		]
	},


	"Component Story": {
		"scope": "typescript,typescriptreact",
		"prefix": "nxStory",
		"description": "Create a story for a react component (CSF3)",
		"body": [
			"import type { Meta, StoryObj } from '@storybook/react'",
			"",
			"import { ${1:Component} } from '.'",
			"",
			"export default {",
			"  title: '${2}',",
			"  component: ${1:Component},",
			"  args: {",
			"    ${0}",
			"  },",
			"  parameters: {",
			"    design: {",
			"      type: 'figma',",
			"      url: ''",
			"    },",
			"  },",
			"} satisfies Meta<typeof ${1:Component}>",
			"",
			"export const Story: StoryObj<typeof ${1:Component}> = {",
			"  render (args) {",
			"    return (",
			"      <${1:Component} {...args} />",
			"    )",
			"  },",
			"}",
			""
		]
	},

	"React memo": {
		"prefix": "nxReactMemo",
		"body": [
			"${TM_SELECTED_TEXT/^(.*?)(function ([A-z]*?)[<\\(].*)/$1/s}const ${TM_SELECTED_TEXT/^(.*?)(function ([A-z]*?)[<\\(].*)/$3/s} = memo(${TM_SELECTED_TEXT/^(.*?)(function ([A-z]*?)[<\\(].*)/$2/s})",
			""
		],
		"description": "React memo"
	},
	
	"React useMemo": {
		"prefix": "nxReactUseMemo",
		"body": [
			"${TM_SELECTED_TEXT/^(.*?)=(.*)$/$1/s} = useMemo(() => {",
			"	return (${TM_SELECTED_TEXT/^(.*?)=(.*)$/$2/s})",
			"}, [${0}])",
			""
		],
		"description": "React useMemo"
	},

	"React useEvent": {
		"prefix": "nxReactUseEvent",
		"body": [
			"const ${TM_SELECTED_TEXT/^function ([A-z]*?)[<\\(].*/$1/s} = useEvent${0}(${TM_SELECTED_TEXT})",
			""
		],
		"description": "React useEvent"
	},

	"React useCallback": {
		"prefix": "nxReactUseCallback",
		"body": [
			"const ${TM_SELECTED_TEXT/^function ([A-z]*?)[<\\(].*/$1/s} = useCallback${1}(${TM_SELECTED_TEXT}, [${0}])",
			""
		],
		"description": "React useCallback"
	},

	"Extract return to variable": {
		"prefix": "nxExtractReturn",
		"body": [
			"const result = ${TM_SELECTED_TEXT/return (.*)/$1/s}"
			"${0}",
			"return result",
			""
		],
		"description": "React useCallback"
	},
	"React Lazily": {
		"prefix": "nxReactLazily",
		"body": [
			"import { lazily } from 'react-lazily'",
			"// eslint-disable-next-line @getify/proper-arrows/where",
			"const ${TM_SELECTED_TEXT/^import ({ [A-z]*? }) from ('.*?')/$1/s} = lazily(() => import(${TM_SELECTED_TEXT/^import ({ [A-z]*? }) from ('.*?')/$2/s}))",
		],
		"description": "Wraps a component import with lazily for lazy loading"
	}
}