VS Code User Snippets

typescript.json

{
/*
	// Place your snippets for TypeScript 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"
	}
*/
	"feature store": {
		"prefix": "fs",
		"body": [
			"import * as _ from 'lodash'",
			"import { ThunkAction } from 'redux-thunk'",
			"import { AppState, LoadEndpoint, thunk, loadEndpoint, StatusResult } from '../../state'",
			"",
			"export interface Store {",
			"",
			"}",
			"",
			"const init: Store = {",
			"",
			"}",
			"",
			"export default (state: Store = init, action: Actions): Store => {",
			"\tswitch(action.type) {",
			"\t\tcase '':",
			"",
			"\t\tdefault:", 
			"\t\t\treturn state",
			"\t}",
			"}",
			"",
			"// Actions",
			"",
			"export type Actions = ''",
			"",
			"interface ActionCreators {",
			"",
			"}",
			"",
			"export const actions: ActionCreators = {",
			"",
			"}",
			"",
			"interface Selectors {",
			"",
			"}",
			"",
			"export const selectors: Selectors = {",
			"",
			"}"
		]
	}
}

typescriptreact.json

{
/*
	// Place your snippets for TypeScript 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"
	}
*/
	"react svg": {
		"prefix": "svg",
		"body": [
			"import * as React from 'react'",
			"import { OneColorProps } from './Utils'",
			"",
			"export default ({ primary = '${3:#333}' }: OneColorProps) => (",
			"\t<svg viewBox=\"0 0 ${1:size} ${1:size}\" style={{ height: \"100%\" }}>",
			"\t\t${2:body}",
			"\t</svg>",
			")"
		] 
	},
	"export default": {
		"prefix": "ed",
		"body": "export { default as ${0:name} } from \"./${0:name}\""
	},
	"connected stateless component": {
		"prefix": "connected sfc",
		"body": [
			"import * as React from 'react'",
			"import { connect } from 'react-redux'",
			"",
			"interface StateProps {",
			"",
			"}",
			"",
			"interface DispatchProps {",
			"",
			"}",
			"",
			"interface OwnProps {",
			"\tchildren?: React.ReactNode",
			"}",
			"",
			"const ${0:Name}: React.SFC<StateProps & DispatchProps & OwnProps> = ({ children }) => (",
			"\t<div>",
			"",
			"\t</div>",
			")",
			"",
			"export default connect<StateProps, DispatchProps, OwnProps>(",
			"\t(state, ownProps) => ({",
			"",
			"\t}),{",
			"",
			"\t}",
			")(${0:Name})"
		]
	},
	"stateless component": {
		"prefix": "sfc",
		"body": [
			"import * as React from 'react'",
			"",
			"interface OwnProps {",
			"\tchildren?: React.ReactNode",
			"}",
			"",
			"const ${0:Name}: React.SFC<OwnProps> = ({ children }) => (",
			"\t<div>",
			"",
			"\t</div>",
			")",
			"",
			"export default ${0:Name}"
		]
	}
}