Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VSCode Snippets for React
{
"Insert a function": {
"prefix": "f",
"body": [
"function $1($2) {\n $0\n}\n"
],
"description": "Insert a function"
},
"const arrow": {
"prefix": "c>",
"body": [
"const $1 = ($2) => {\n $3\n}\n"
],
"description": "named arrow function"
},
"const arrow implicit return": {
"prefix": "c>(",
"body": [
"const $1 = ($2) => (\n $3\n)\n"
],
"description": "named arrow function"
},
"arrow with body (type name first)": {
"prefix": "=>",
"body": [
"= ($1) => {",
" $0",
"}"
],
"description": "arrow function with body"
},
"import named": {
"prefix": "i",
"body": [
"import { $1 } from '$2';"
],
"description": "import named item(s)"
},
"import default": {
"prefix": "I",
"body": [
"import $1 from '$2';"
],
"description": "import default"
},
"import default from file": {
"prefix": "Id",
"body": [
"import $1 from './$1';"
],
"description": "import default from file with same name"
},
"import React": {
"prefix": "ir",
"body": [
"import React from 'react';"
],
"description": "import React"
},
"import connect": {
"prefix": "ic",
"body": [
"import { connect } from 'react-redux';"
],
"description": "import connect"
},
"import PropTypes": {
"prefix": "ipt",
"body": [
"import PropTypes from 'prop-types';"
],
"description": "import PropTypes"
},
"import ReactDOM": {
"prefix": "ird",
"body": [
"import ReactDOM from 'react-dom';"
],
"description": "import ReactDOM"
},
"import index.css": {
"prefix": "ics",
"body": [
"import './index.css';"
],
"description": "import index.css"
},
"export default": {
"prefix": "E",
"body": [
"export default $1"
],
"description": "export default"
},
"export redux action": {
"prefix": "ea",
"body": [
"export const $1 = '$1';"
],
"description": "export redux action"
},
"export const": {
"prefix": "ec",
"body": [
"export const $1"
],
"description": "export const"
},
"className": {
"prefix": "cn",
"body": [
"className='$1'"
],
"description": "className"
},
"dispatch action object": {
"prefix": "dao",
"body": [
"dispatch({ type: $1 });"
],
"description": "dispatch action object"
},
"begin success error": {
"prefix": "bse",
"body": [
"export const $1_BEGIN = '$1_BEGIN';",
"export const $1_SUCCESS = '$1_SUCCESS';",
"export const $1_ERROR = '$1_ERROR';"
],
"description": "begin success error"
},
"console.log": {
"prefix": "cl",
"body": [
"console.log($1)"
],
"description": "console.log"
},
"PropTypes.object": {
"prefix": "pto",
"body": [
"PropTypes.object"
],
"description": "PropTypes.object"
},
"PropTypes.string": {
"prefix": "pts",
"body": [
"PropTypes.string"
],
"description": "PropTypes.string"
},
"PropTypes.array": {
"prefix": "pta",
"body": [
"PropTypes.array"
],
"description": "PropTypes.array"
},
"PropTypes.func": {
"prefix": "ptf",
"body": [
"PropTypes.func"
],
"description": "PropTypes.func"
},
"PropTypes.number": {
"prefix": "ptn",
"body": [
"PropTypes.number"
],
"description": "PropTypes.number"
},
"React class component file": {
"prefix": "rcc",
"body": [
"import React from 'react';",
"",
"class $1 extends React.Component {",
" render() {",
" return (",
" $0",
" );",
" }",
"}",
"",
"export default $1;"
],
"description": "React class component"
},
"ReactDOM.render": {
"prefix": "rdr",
"body": [
"ReactDOM.render($1, $2)"
],
"description": "ReactDOM.render"
},
"document.querySelector": {
"prefix": "dq",
"body": [
"document.querySelector($1)"
],
"description": "querySelector"
},
"React function component": {
"prefix": "rfc",
"body": [
"import React from 'react';",
"",
"const $1 = () => (",
" <div />",
");",
"",
"export default $1;"
]
},
"React class boilerplate": {
"prefix": "rbc",
"body": [
"import React from 'react';",
"import ReactDOM from 'react-dom';",
"",
"class $1 extends React.Component {",
" render() {",
" return (",
" $0",
" );",
" }",
"}",
"",
"ReactDOM.render(",
" <$1 />,",
" document.querySelector('#root')",
");"
]
},
"React boilerplate": {
"prefix": "rb",
"body": [
"import React from 'react';",
"import ReactDOM from 'react-dom';",
"",
"const $1 = () => (",
" <div />",
");",
"",
"ReactDOM.render(",
" <$1 />,",
" document.querySelector('#root')",
");"
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.