Modern React, JS & TypeScript Snippets

VS Code snippets for React, JavaScript, and TypeScript.

WRITE LESS - DO MORE +

Type a prefix in a .js, .ts, .jsx, or .tsx file and press Tab to expand.

React

Imports

// imt / impt → PropTypes import
import PropTypes from 'prop-types'

// lazy → Lazy component import
const Component = lazy(() => import('./Component'))

Components

// rf / rfc → Named function component
export function Component() {
  return (
    <div>Component</div>
  )
}

// rfd / rfcd → Default exported function component
function Component() {
  return (
    <div>Component</div>
  )
}

export default Component

// ra / rafc → Named arrow component
export const Component = () => {
  return (
    <div>Component</div>
  )
}

// rad / rafcd → Default exported arrow component
const Component = () => {
  return (
    <div>Component</div>
  )
}

export default Component

Typed Components

// tsrf / tsfc → Typed function component
interface Props {
  title: string
}

export function Component({ title }: Props) {
  return (
    <div>Component</div>
  )
}

// tsrfd / tsfcd → Typed default exported function component
interface Props {
  title: string
}

function Component({ title }: Props) {
  return (
    <div>Component</div>
  )
}

export default Component

// tsra / tsafc → Typed arrow component
interface Props {
  title: string
}

export const Component = ({ title }: Props) => {
  return (
    <div>Component</div>
  )
}

// tsrad / tsafcd → Typed default exported arrow component
interface Props {
  title: string
}

const Component = ({ title }: Props) => {
  return (
    <div>Component</div>
  )
}

export default Component

Hooks

// us / useState → useState declaration
const [state, setState] = useState(initialState)

// usl / useStateLazy → useState lazy initializer
const [state, setState] = useState(() => initialState)

// ured / useReducer → useReducer declaration
const [state, dispatch] = useReducer(reducer, initialState)

// ue / useEffect → useEffect block
useEffect(() => {
  // side effect
}, [])

// ule / useLayoutEffect → useLayoutEffect block
useLayoutEffect(() => {
  // layout effect
}, [])

// ucx / useContext → useContext declaration
const context = useContext(Context)

// uc / useCallback → useCallback declaration
const memoizedCallback = useCallback((args) => {
  // callback body
}, [])

// um / useMemo → useMemo declaration
const memoizedValue = useMemo(() => {
  return value
}, [])

// uref / useRef → useRef declaration
const ref = useRef(null)

// uid / useId → useId declaration
const id = useId()

// utr / useTransition → useTransition declaration
const [isPending, startTransition] = useTransition()

// udv / useDeferredValue → useDeferredValue declaration
const deferredValue = useDeferredValue(value)

// uee / useEffectEvent → useEffectEvent declaration
const handleEvent = useEffectEvent((event) => {
  // event handler
})

JavaScript

Variables

// l → Let declaration
let name

// l= → Let assignment
let name = value

// dl= → Destructuring let assignment
let { name } = value

// co / co= → Const assignment
const name = value

// dco= → Destructuring const assignment
const { name } = value

// deso → Destructure object
const { value } = object

// desa → Destructure array
const [value] = array

Functions

// arrow → Arrow function assignment
const name = (args) => {
  // body
}

// f → Anonymous function
function (args) {
  // body
}

// fn → Named function
function name(args) {
  // body
}

// afb → Arrow function expression
(args) => {
  // body
}

// afn → Async function
async function name(args) {
  // body
}

Control Flow

// if → If statement
if (condition) {
  // body
}

// el → Else statement
else {
  // body
}

// ifel → If/else statement
if (condition) {
  // if body
} else {
  // else body
}

// elif → Else if statement
else if (condition) {
  // body
}

// ter → Ternary expression
condition ? trueValue : falseValue

// tc → Try/catch block
try {
  // try body
} catch (error) {
  // catch body
}

// tf → Try/finally block
try {
  // try body
} finally {
  // finally body
}

// tcf → Try/catch/finally block
try {
  // try body
} catch (error) {
  // catch body
} finally {
  // finally body
}

// sw → Switch statement
switch (value) {
  case caseValue:
    // case body
    break
  default:
    // default body
}

Iterables

// fe → forEach loop
items.forEach((item) => {
  // body
})

// map → Map callback
items.map((item) => {
  // body
})

// reduce → Reduce callback
items.reduce((previous, current) => {
  // body
  return previous
}, initialValue)

// filter → Filter callback
items.filter((item) => {
  // body
})

// find → Find callback
items.find((item) => {
  // body
})

Modules

// exd → Export default
export default value

// imp → Named import
import { moduleName } from 'module'

// imd → Default import
import moduleName from 'module'

// imr → React import
import React from 'react'

// imcss / impcss → CSS import
import './styles.css'

// imcssmd / impcssmd → CSS module import
import styles from './styles.module.css'

Console

// cl → console.log
console.log(value)

// ce → console.error
console.error(error)

// cw → console.warn
console.warn(value)

// ct → console.table
console.table(value)

Timers

// st → setTimeout
setTimeout(() => {
  // body
}, delay)

// si → setInterval
setInterval(() => {
  // body
}, delay)

// sim → setImmediate
setImmediate(() => {
  // body
})

Return

// r → Return statement
return value

TypeScript

// tst → Type declaration
type Name = {
  // properties
}

// tsi → Interface declaration
interface Name {
  // properties
}

// tsen → Enum declaration
enum Name {
  // members
}

// tsu → Union type declaration
type Name = TypeA | TypeB

// tsrec → Record type declaration
type Name = Record<string, unknown>

Conventions

• Single quotes by default
• No semicolons
• Tab stops for names, values, and conditions
• Aliases for common prefixes (e.g. us and useState)

License

MIT

Credits

Inspired by:

• @nathanchapman
• @ymulenll