Visual Studio Code Snippets for Javascript React

javascriptreact.json.txt

{
	// Place your snippets for JavaScript React here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},

	// reactjs specific snippets

	"Class Component With State": {
		"prefix": "cc",
		"body": [
			"import React, { Component } from 'react';",
			"import PropTypes from 'prop-types';",
			"",
			"class $1 extends Component {",
			"\tconstructor(props) {",
			"\t\tsuper(props);",
			"\t\tthis.state = { $2 };",
			"\t}",
			"",
			"\trender() {",
			"\t\treturn (",
			"\t\t\t<div>$0</div>",
			"\t\t);",
			"\t}",
			"}",
			"",
			"$1.propTypes = {",
			"};",
			"",
			"$1.defaultProps = {",
			"};",
			"",
			"export default $1;",
			""
		],
		"description": "Class Component With State"
	},

	"Class Component Redux": {
		"prefix": "ccr",
		"body": [
			"import React, { Component } from 'react';",
			"import PropTypes from 'prop-types';",
			"import { connect } from 'react-redux';",
			"",
			"class $1 extends Component {",
			"\tconstructor(props) {",
			"\t\tsuper(props);",
			"\t\tthis.state = { $2 };",
			"\t}",
			"",
			"\trender() {",
			"\t\treturn (",
			"\t\t\t<div>$0</div>",
			"\t\t);",
			"\t}",
			"}",
			"",
			"$1.propTypes = {",
			"};",
			"",
			"$1.defaultProps = {",
			"};",
			"",
			"function mapStateToProps(state) {",
			"\treturn {",
			"\t};",
			"}",
			"",
			"function mapDispatchToProps(dispatch) {",
			"\treturn {",
			"\t};",
			"}",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)($1);",
			""
		],
		"description": "Class Component Redux"
	},

	".propTypes and .defaultProps": {
		"prefix": "propt",
		"body": [
			"$1.propTypes = {",
			"};",
			"",
			"$1.defaultProps = {",
			"};"
		],
		"description": ".propTypes and .defaultProps"
	},

	"Proptypes.$1": {
		"prefix": "PT",
		"body": [
			"PropTypes.$1"
		],
		"description": "Proptypes.$1"
	},

	"Import React, { Component }": {
		"prefix": "imrc",
		"body": [
			"import React, { Component } from 'react';"
		],
		"description": "Import React, { Component }"
	},

	"setState": {
		"prefix": "ss",
		"body": [
			"this.setState({ $1: $2 });"
		],
		"description": "setState"
	},

	"setState with func": {
		"prefix": "sss",
		"body": [
			"this.setState((prevState, props) => {",
			"\treturn { $1: $2 };",
			"});"
		],
		"description": "setState"
	},
	"Bind Function": {
		"prefix": "bind",
		"body": [
			"this.$1 = this.$1.bind(this);"
		],
		"description": "Binding React function to this."
	},
	"Import module": {
		"prefix": "imp",
		"body": [
			"import $1 from \"./$1\";"
		],
		"description": "Import module"
	},

	// for generic javascript
	"forEach": {
		"prefix": "fore",
		"body": "${1:array}.forEach(${2:currentItem} => {\n\t${0}\n});",
		"description": "Creates a forEach statement in ES6 syntax"
	},
	"forOf": {
		"prefix": "foro",
		"body": "for (const ${1:item} of ${2:object}) {\n\t${0}\n}",
		"description": "Iterating over property values of iterable objects"
	},
	"forIn": {
		"prefix": "fori",
		"body": "for (const ${1:item} in ${2:object}) {\n\tif (Object.prototype.hasOwnProperty.call($2, $1)) {\n\t\tconst ${3:element} = ${2}[${1}];\n\t\t${0}\n\t}\n}",
		"description": "Iterating over property names of iterable objects"
	},
	"forl": {
		"prefix": "forl",
		"body": "for (let ${2:i} = 0, len = ${1:array}.length; $2 < len; $2++) {\n\tconst ${3:item} = $1[$2];$0\n}\n",
		"description": "Improved native array loop"
	},
	"Return Promise (without reject)": {
		"prefix": "prom",
		"body": "return new Promise((resolve) => {\n\t$1;\n});",
		"description": "Return Promise (without reject)"
	},
	"eslint comment": {
		"prefix": "esl",
		"body": "/* eslint ${1:rule}:0 */",
		"description": "Eslint rule override"
	},
	"own": {
		"prefix": "own",
		"body": "Object.prototype.hasOwnProperty.call(${1:object}, ${2:property});\n",
		"description": "hasOwnProperty"
	},

	// referenced from extension: burkeholland.simple-react-snippets-1.0.8
	// more reactjs specific
	"Stateless Function Component": {
		"prefix": "sfc",
		"body": [
			"const $1 = ($2) => {",
			"\treturn $0",
			"}",
			" ",
			"export default $1;"
		],
		"description": "Stateless Function Component"
	},
	"componentDidMount": {
		"prefix": "cdm",
		"body": [
			"componentDidMount() {",
			"\t$0",
			"}"
		],
		"description": "componentDidMount"
	},
	"componentWillMount": {
		"prefix": "cwm",
		"body": [
			"componentWillMount() {",
			"\t$0",
			"}"
		],
		"description": "componentWillMount"
	},
	"componentWillReceiveProps": {
		"prefix": "cwrp",
		"body": [
			"componentWillReceiveProps(nextProps) {",
			"\t$0",
			"}"
		],
		"description": "componentWillReceiveProps"
	},
	"shouldComponentUpdate": {
		"prefix": "scu",
		"body": [
			"shouldComponentUpdate(nextProps, nextState) {",
			"\t$0",
			"}"
		],
		"description": "shouldComponentUpdate"
	},
	"componentWillUpdate": {
		"prefix": "cwu",
		"body": [
			"componentWillUpdate(nextProps, nextState) {",
			"\t$0",
			"}"
		],
		"description": "componentWillUpdate"
	},
	"componentDidUpdate": {
		"prefix": "cdu",
		"body": [
			"componentDidUpdate(prevProps, prevState) {",
			"\t$0",
			"}"
		],
		"description": "componentDidUpdate"
	},
	"componentWillUnmount": {
		"prefix": "cwun",
		"body": [
			"componentWillUnmount() {",
			"\t$0",
			"}"
		],
		"description": "componentWillUnmount"
	},
	"componentDidCatch": {
		"prefix": "cdc",
		"body": [
			"componentDidCatch(error, info) {",
			"\t$0",
			"}"
		],
		"description": "componentDidCatch"
	},

	"render": {
		"prefix": "ren",
		"body": [
			"render() {",
			"\treturn (",
			"\t\t $0",
			"\t)",
			"}"
		],
		"description": "render"
	}

}