vs-code tsx snippets

typescriptreact.json

{

	"tsx-test-filename": {
		"prefix": "tsx-test-filename",
		"body": [
			"${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}",
		],
		"description": "TSX filename"
	},
	"tsx": {
		"prefix": "tsx",
		"body": [
			"import React, { FunctionComponent } from 'react'",
			"",
			"interface Props {}",
			"",
			"export const ${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}: FunctionComponent<Props> = (props) => {",
			"    return (",
			"        <>${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}</>",
			"    )",
			"}",
			"",
			"${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}.displayName = '${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}'",
			"",
		],
		"description": "TSX filename"
	},
	"tsx-fc": {
		"prefix": "tsx-func-component",
		"body": [
			"import React, { FunctionComponent } from 'react'",
			"import { cn } from 'src/core/bem'",
			"",
			"interface Props {}",
			"",
			"export const ${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}: FunctionComponent<Props> = (props) => {",
			"    return (",
			"        <div className={cn('${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}')()}>",
			"            ${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}",
			"        </div>",
			"    )",
			"}",
			"",
			"${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}.displayName = '${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}'",
			"",
		],
		"description": "TSX func component"
	},
	"tsx-fc-parent": {
		"prefix": "tsx-func-parent-component",
		"body": [
			"import React, { FunctionComponent } from 'react'",
			"import { pCn } from 'src/core/bem'",
			"",
			"interface Props {}",
			"",
			"export const ${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}: FunctionComponent<Props> = (props) => {",
			"    const cnPar = pCn('${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}')",
			"    return (",
			"        <div className={cnPar()()}>",
			"            ${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}",
			"        </div>",
			"    )",
			"}",
			"",
			"${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}.displayName = '${TM_FILENAME_BASE/^(.)|([.-](.))/${1:/upcase}${3:/upcase}/g}'",
			"",
		],
		"description": "TSX func component"
	},
}