Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>ES6 - React and Javascript SnippetsNew to Visual Studio Code? Get it now.
ES6 - React and Javascript Snippets

ES6 - React and Javascript Snippets

withoutnicks

|
743 installs
| (0) | Free
Collection of snippets for Javascript, React and Typescript
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🏂🏻 - React and Javascript Snippets

Collection of snippets for Javascript, Typescript, React with JSX and TSX.

This extension uses single quotes and no semicolons

Index

  • Global
  • Components
  • Hooks
  • Console
  • Modules
  • Control
  • Functions
  • Object
  • Types
  • Iterables
  • Returning values
  • Timers

Global Snippets

l - Let Statement

let name

l= - Let Assignment

let name = value

dl= - Destructuring Let Assignment

let { name } = value

co - Const Statement

const name

co= - Const Assignment

const name = value

dco= - Destructuring Const Assignment

const { name } = value

Control

if - If Statement

if (condition) {
  // your code
}

el - Else Statement

else {
 // your code
}

ifel - If/Else Statement

if (condition) {
  // your code
} else {
  // your code
}

elif - Else If Statement

else if (condition) {
 //your code
}

ter - Ternary Operator

condition ? expression : expression

tc - Try/Catch

try {
  //your code
} catch (err) {
  //your code
}

tf - Try/Finally

try {
  //your code
} finally {
  //your code
}

tcf - Try/Catch/Finally

try {
  //your code
} catch (err) {
  //your code
} finally {
  //your code
}

sw - Switch Case

switch (expr) {
  case value:
    //your code
    break
  default:
  //your code
}

Functions

arrow - Arrow Function

const name = (args) => {
  //your code
}

f - Anonymous Function

function (arguments) {
  //your code
}

fn - Named Function

function name(arguments) {
  //your code
}

afb - Arrow Function with Body

;(arguments) => {
  //your code
}

Objects

deso - Destructure Object

const { value } = object

desa - Destructure Array

const [value] = array

Iterables

fe - forEach Loop

array.forEach((item) => {
  //your code
})

map - Map

array.map((item) => {
  //your code
})

reduce - Reduce

array.reduce((previous, current) => {
  //your code
}, initial)

filter - Filter

array.filter((item) => {
  //your code
})

find - Find

array.find((item) => {
  //your code
})

Returning values

r - Return

return value

Modules

exd - Export Default

export default value

imp - Import Module

import { moduleName } from "module"

imd - Import Module As

import moduleName from "module"

imr - Import React

import React from "react"

impcss - Import CSS

import "./styles.css"

impcssmd - Import CSS Module

import styles from "./styles.module.css"

Console

cl - Console.log

console.log(value)

ce - Console.error

console.error(value)

cw - Console.warn

console.warn(value)

ct - Console.table

console.table(value)

Timers

st - setTimeout

setTimeout(() => {
  //your code
}, delay)

si - setInterval

setInterval(() => {
  //your code
}, delay)

sim - setImmediate

setImmediate(() => {
  //your code
})

Types

imt - Import PropTypes

import PropTypes from "prop-types"

Components

rf - React Functional Component Export

export function Component () {
  return <>{/* your code */}</>
}

rfd - React Functional Component Default Export

function Component () {
  return <>{/* your code */}</>
}

export default Component

ra - React Arrow Functional Component Export

export const Component = () => {
  return <>{/* your code */}</>
}

rad - React Arrow Functional Component Default Export

const Component = () => {
  return <>{/* your code */}</>
}

export default Component

tsra - Typescript React Arrow Functional Component Export

interface Props {}

const Component = ({}: Props) => {
  return <>{/* your code */}</>
}

export default Component

tsrad - Typescript React Arrow Functional Component Default Export

interface Props {}

const Component = ({}: Props) => {
  return <>{/* your code */}</>
}

export default Component

lazy - Lazy Import Snippet

const Component = lazy(() => import("./Component"))

Hooks

us or useState Snippet

const [state, setState] = useState(initialState)

usl or useStateLazy Snippet

const [state, setState] = useState(() => fn)

ured or useReducer Snippet

const [state, dispatch] = useReducer(reducer, initialState)

ue or useEffect Snippet

useEffect(() => {
  // your code
}, [])

ucx or useContext Snippet

const context = useContext(Context)

uc or useCallback Snippet

const memoizedCallback = useCallback(callbackFn, [])

um or useMemo Snippet

const memoizedValue = useMemo(() => value, [])

uref or useRef Snippet

const ref = useRef(initialValue)

uid or useId Snippet

const id = useId()

Credits

This extension is born from my taste for 2 more extensions, Is a fusion of both, more snippets and content in:

  • @nathanchapman 💛
  • @ymulenll 💙
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft