Visual Studio Code - Snippets for Javascript (Babel), React, Redux, React Router, JSX - (This file is always being updated)

javascript.json

/** TODO:
* - Add shortcut acronyms to each prefix
* - Remove empty div and return placeholders from component snippets
* - Add prop-types to all new file components
*/
{
	// Component snippets
	"New Class Component": {
		"prefix": "new class component",
		"body": [
			"class ${ComponentName} extends Component {",
			"\trender() {",
			"\t\treturn (",
			"\t\t\t<div>$0</div>",
			"\t\t)",
			"\t}",
			"}"
		],
		"description": "A new component template"
	},
	"New File Class Component": {
		"prefix": "new file class component",
		"body": [
			"import React, { Component } from 'react'",
			"",
			"class ${ComponentName} extends Component {",
			"\trender() {",
			"\t\treturn (",
			"\t\t\t<div>$0</div>",
			"\t\t)",
			"\t}",
			"}",
			"",
			"${ComponentName}.defaultProps = {",
			"\t",
			"}",
			"",
			"export default ${ComponentName}"
		],
		"description": "ES6 React component boilerplate for new files"
	},
	"New File Class Component With Prop Types": {
		"prefix": "new file class component with prop types",
		"body": [
			"import React, { Component } from 'react'",
			"import PropTypes from 'prop-types'",
			"",
			"const propTypes = {",
			"\t",
			"}",
			"",
			"class ${ComponentName} extends Component {",
			"\trender() {",
			"\t\treturn (",
			"\t\t\t<div>$0</div>",
			"\t\t)",
			"\t}",
			"}",
			"",
			"${ComponentName}.propTypes = propTypes",
			"",
			"export default ${ComponentName}"
		],
		"description": "ES6 React component boilerplate for new files with prop-types (npm install --save prop-types)"
	},
	"New Functional Component Variable (ES6)": {
		"prefix": "new functional component",
		"body": [
			"const ${functionName} = (props) => (",
			"\treturn <div>$0</div>",
			")"
		],
		"description": "ES6 React functional (stateless) component variable"
	},
	"New File Functional Component Variable": {
		"prefix": "new file functional component",
		"body": [
			"import React from 'react'",
			"",
			"const ${functionName} = (props) => (",
			"\t$0",
			")",
			"",
			"export default ${functionName}"
		],
		"description": "React functional (stateless) component variable for a new file"
	},
	"New File Functional Component Variable With Prop Types": {
		"prefix": "new file functional component with prop types",
		"body": [
			"import React from 'react'",
			"import PropTypes from 'prop-types'",
			"",
			"const propTypes = {",
			"\t",
			"}",
			"",
			"const ${componentName} = (props) => (",
			"\t$0",
			")",
			"",
			"${componentName}.propTypes = propTypes",
			"",
			"export default ${componentName}"
		],
		"description": "React functional (stateless) component variable for a new file with prop types"
	},
	"New File Functional Higher Order Component ": {
		"prefix": "new file functional higher order component hoc",
		"body": [
			"import React from 'react'",
			"",
			"const ${componentName} = (WrappedComponent) => {",
			"\treturn (props) => {",
			"\t\treturn (",
			"\t\t\t$0",
			"\t\t)",
			"\t}",
			"}",
			"",
			"export default ${componentName}"
		],
		"description": "React functional (stateless) component variable for a new file"
	},
	"New File Class Higher Order Component ": {
		"prefix": "new file class higher order component hoc",
		"body": [
			"import React, { Component } from 'react'",
			"",
			"const ${componentName} = (WrappedComponent) => {",
			"\treturn class extends Component {",
			"\t\tstate = {",
			"\t\t\t",
			"\t\t}",
			"",
			"\t\trender() {",
			"\t\t\treturn (",
			"\t\t\t\t$0",
			"\t\t\t)",
			"\t\t}",
			"\t}",
			"}",
			"",
			"export default ${componentName}"
		],
		"description": "React functional (stateless) component variable for a new file"
	},
	// Constructor snippets
	"Constructor with Super": {
		"prefix": "constructor with super",
		"body": [
			"constructor(props) {",
			"\tsuper(props)",
			"\t$0",
			"}"
		],
		"description": "Boilerplate constructore function"
	},
	"Constructor with Super and State": {
		"prefix": "constructor with super and state",
		"body": [
			"constructor(props) {",
			"\tsuper(props)",
			"\tthis.state = {",
			"\t\t$0",
			"\t}",
			"}"
		],
		"description": "Boilerplate constructore function"
	},
	"Bind a Function": {
		"prefix": "bind function",
		"body": "this.${FunctionName} = this.${FunctionName}.bind(this)"
	},
	// Props and State snippets
	"Default Properties": {
		"prefix": "default properties",
		"body": [
			"${ComponentName}.defaultProps = {",
			"\t",
			"}"
		],
		"description": "Boilerplate for default property object"
	},
	"Set State": {
		"prefix": "set state",
		"body": [
			"this.setState({",
			"\t$0",
			"})"
		]
	},
	"Set State One Line": {
		"prefix": "set state one line",
		"body": "this.setState({ $0 })"
	},
	"Set State With Previous State": {
		"prefix": "set state with previous state",
		"body": [
			"this.setState( (prevState, props) => {",
			"\treturn {",
			"\t\t$0",
			"\t}",
			"})"
		]
	},
	// Logging snippets
	"Log to Console": {
		"prefix": "log to console",
		"body": "console.log('$0')"
	},
	// JSX snippets
	"React Router Link Component": {
		"prefix": "link react-router component",
		"body": "<Link to=\"${Path}\">${AnchorText}</Link>"
	},
	"Empty <div>": {
		"prefix": "div empty",
		"body": "<div>$0</div>"
	},
	"Generic Tag": {
		"prefix": "tag",
		"body": "<${Tag}></${Tag}>",
		"description": "An empty opening and closing tag"
	},
	"Generic Tag with New Line": {
		"prefix": "tag with new line",
		"body": [
			"<${Tag}>",
			"\t$0",
			"</${Tag}>"
		],
		"description": "An empty opening and closing tag"
	},
	// Import snippets
	"Import React": {
		"prefix": "import react",
		"body": "import React from 'react'"
	},
	"Import Prop Types": {
		"prefix": "import prop types",
		"body": "import PropTypes from 'prop-types'"
	},
	"Import React Router": {
		"prefix": "import react router dom",
		"body": "import { BrowserRouter as Router, Link, Route } from 'react-router-dom'"
	},
	"Import from": {
		"prefix": "import from",
		"body": "import ${1:ComponentName} from '${2:./}${1:ComponentName}'"
	},
	"Import from folder": {
		"prefix": "import from js/",
		"body": "import ${ComponentName} from './${FolderName}/${ComponentName}'",
		"description": "For importing files from a custom folder"
	},
	"Import from js/ folder": {
		"prefix": "import from js/",
		"body": "import ${ComponentName} from './js/${ComponentName}'",
		"description": "For importing files from js/"
	},
	"Import Bootstrap CSS": {
		"prefix": "bootstrap import",
		"body": "import 'bootstrap/dist/css/bootstrap.css'"
	},
	"Import CSS Class Module": {
		"prefix": "import css class module",
		"body": "import classes from './${Filename}.css'"
	},
	"Import from Redux": {
		"prefix": "import from redux",
		"body": "import { $0 } from 'redux'"
	},
	"Import from React Redux": {
		"prefix": "import from react-redux",
		"body": "import { $0 } from 'react-redux'"
	},
	// Redux
	"Dispatch Prop Function Redux": {
		"prefix": "redux dispatch prop function",
		"body": "${1:onFunctionHandler}: () => dispatch({type: '${2:ACTION_TYPE}'})"
	},
	"Redux Connect": {
		"prefix": "redux connect",
		"body": [
			"const mapStateToProps = state => {",
			"\treturn {",
			"\t\t",
			"\t}",
			"}",
			"",
			"const mapDispatchToProps = dispatch => {",
			"\treturn {",
			"\t\t",
			"\t}",
			"}",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)(${ComponentName})",
			"",
		],
		"description": "Remember to import { connect } from 'react-redux'"
	},
	"Redux Basic Reducer": {
		"prefix": "redux reducer basic",
		"body": [
			"const initialState = {",
			"\t",
			"}",
			"",
			"const ${1:reducer} = (state = initialState, action) => {",
			"\tswitch (action.type) {",
			"\t\tcase ${2:ACTION_TYPE}: {",
			"\t\t\treturn {",
			"\t\t\t\t...state,",
			"\t\t\t}",
			"\t\t}",
			"\t\t",
			"\t\tdefault: return state",
			"\t}",
			"}",
			"",
			"export default ${1:reducer}"
		],
		"description": "Boilerplate code for a simple Redux reducer"
	},
	// React Native
	"React Native New File Functional Component": {
		"prefix": "react native new file functional component",
		"body": [
			"import React from 'react'",
			"import { StyleSheet, View } from 'react-native'",
			"import {  } from 'react-native-elements'",
			"import PropTypes from 'prop-types'",
			"",
			"const propTypes = {",
			"",
			"}",
			"",
			"const ${componentName} = props => (",
			"\t<View>",
			"\t\t",
			"\t</View>",
			")",
			"",
			"const styles = StyleSheet.create({",
			"\tcontainer: {",
			"\t\t",
			"\t}",
			"})",
			"",
			"${componentName}.propTypes = propTypes",
			"",
			"export default ${componentName}"
		],
		"description": "React functional (stateless) component variable for a new file with prop types"
	},
	// AdderPad Themes
	"AdderPad Theme Button": {
		"prefix": "adder pad theme button",
		"body": [
			"${button}: {",
			"\ttype: '${type}',",
			"\tname: '${name}'",
			"},"
		]
	},
	"AdderPad Theme Button Toggle": {
		"prefix": "adder pad theme button toggle",
		"body": [
			"${button}: {",
			"\toff: {",
			"\t\ttype: '${type}',",
			"\t\tname: '${name}'",
			"\t},",
			"\ton: {",
			"\t\ttype: '${type}',",
			"\t\tname: '${name}'",
			"\t},",
			"},"
		]
	},
}