✂️VS Code Snippets

1 Feb 2023

These snippets make use of the EasySnippet extension.

typescriptreact

A simple component scaffold

// @prefix component-react
// @description Basic React component scaffold

import { ReactNode, ComponentPropsWithoutRef } from 'react'
import { clsx } from 'clsx'
import '$2.styles.css'

interface $2Props extends  ComponentPropsWithoutRef<'$1'> {
  children?: ReactNode
}

export const ${2:Button} = ({ className, children, ...rest }: $2Props) => {
  const ${2/(.*)/${1:/downcase}/}Class = clsx(className, '${2/(.*)/${1:/downcase}/}')

  return (
    <${1:div} className={${2/(.*)/${1:/downcase}/}Class} {...rest}>
      {children}$0
    </$1>
  )
}

Conditional rendering using a ternary operator

// @prefix better JSX Conditional
// @description {x ? ( ... ) : null}

{
  $1 ? $0 : null
}

More info

useState hook

// @prefix useState
// @description useState hook

const [$1, set${1/(.*)/${1:/capitalize}/}}] = useState<$2>($0)

Debugger

Creates a <pre> tag with the JSON stringified version of the variable.

// @prefix pre
// @description React debugger

<pre>{JSON.stringify(someData, null, 2)}</pre>