React Redux JSDoc snippets for VSCode

README.md

React Redux with JSDoc snippets

1. Installation

Follow simple steps in your VSCode to install snippets

• Press cmd + shift + p
• Enter Configure User Snippets
• Press Enter
• Choose extension you want apply snippets to
• Copy and paste snippets you want

2. Usage

• Create React Component - rc
• Create Functional React Component - rcf
• Create React Redux connected component - rrc
• Create Reducer - reducer
• Create Redux Action - raction
• Create Redux Types consts - rconsts
• Create

Create Component's reducer

{
	"Create reducer file": {
		"prefix": "reducer",
		"body": [
			"/**",
			"	* $1 component's reducer",
			"	* @name $1Reducer",
			"	* @memberof app.reducers",
			"	* @typedef $1Reducer",
			"	* @default {}",
			"	*/",
			"",
			"const defaultState = {};"
			"",
			"/**",
			"	* $1 component's reducer",
			"	* @name reducer",
			"	* @memberof app.components.$1",
			"	* @param {$1Reducer} state state of reducer",
			"	* @param {object} action action of reducer",
			"	* @param {$1ReduxActions} action.type redux action type",
			"	* @param {any} action.payload payload of action",
			"*/",
			"",
			"export default (state = defaultState, action) => {"
			"	switch (action.type) {",
			" 	case :",
			"		default:",
			"			return state;",
			"	}"
			"}"
		]
	}
}

Create React Component

{
  "Create React Component": {
		"prefix": "rc",
		"body": [
			"import React from 'react'",
			"import PropTypes from 'prop-types'",
			"import styles from './styles.less'",
			"",
			"import {",
			"	$1PropsObject,",
			"	$1DefaultPropsObject,",
			"} from './props'",
			"",
			"/**",
			"	* $1 component",
			"	* This Component used for ...",
			"	* @namespace $1",
			"	* @memberof app.components",
			"	* @requires React",
			"*/",
			"",
			"class $1 extends React.Component {",
			"",
			"	/**",
			"		* $1 Component's methods",
			"		* @namespace methods",
			"		* @memberof app.components.$1",
			"	*/",
			"",
			"	constructor(props) {",
			"		super(props);",
			"		this.state = {",
			"			",
			"		};",
			"	}",
			"",
			"	/**"
			"		* Renderer of $1 component.",
			"		* @memberof app.components.Subscribe.methods",
			"		* @returns {jsx}",
			"	*/",
			"",
			"	render() {",
			"		return (",
			"			",
			"		);",
			"	}",
			"}",
			"",
			"$1.propTypes = $1PropsObject",
			"$1.defaultProps = $1DefaultProps",
			"",
			"export default $1;"
		]
	}
}

Create React Functional Component

{
  "Create Functional React Component": {
    "prefix": "rcf",
    "body": [
      "import React from 'react'",
      "import styles from './styles.less'",
      "",
      "import {",
      "	$1PropsObject,",
      "	$1DefaultPropsObject,",
      "} from './props'",
      "",
      "/**",
      "	* $1 component",
      "	* This Functional Component used for ...",
      "	* @namespace $1",
      "	* @memberof app.components",
      "	* @requires React",
      "*/",
      "",
      "const $1 = () {",
      "	return (",
      "		",
      "	);",
      "}",
      "",
      "$1.propTypes = $1PropsObject",
      "$1.defaultProps = $1DefaultProps",
      "",
      "export default $1;"
    ]
  },
}

Create React Redux Component

{
  "Create React Redux Component": {
		"prefix": "rrc",
		"body": [
			"import React from 'react'",
			"import { connect } from 'react-redux'",
			"import styles from './styles.less'",
			"",
			"import {",
			"	$1PropsObject,",
			"	$1DefaultPropsObject,",
			"} from './props'",
			"",
			"/**",
			"	* $1 component",
			"	* This React-connected Component used for ...",
			"	* @namespace $1",
			"	* @memberof app.components",
			"	* @requires react",
			" * @required react-redux",
			"*/",
			"",
			"class $1 extends React.Component {",
			"",
			"	/**",
			"		* $1 Component's methods",
			"		* @namespace methods",
			"		* @memberof app.components.$1",
			"	*/",
			"",
			"	constructor(props) {",
			"		super(props);",
			"		this.state = {",
			"			",
			"		};",
			"	}",
			"",
			"	/**"
			"		* Renderer of $1 component.",
			"		* @memberof app.components.Subscribe.methods",
			"		* @returns {jsx}",
			"	*/",
			"",
			"	render() {",
			"		return (",
			"			",
			"		);",
			"	}",
			"}",
			"",
			"$1.propTypes = {",
			"	",
			"}",
			"",
			"$1.defaultProps = {",
			"	",
			"}",
			"",
			"const mapStateToProps = () => ({",
			"	",
			"});",
			"",
			"const mapDispatchToProps = (dispatch) => ({",
			"	",
			"});",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)($1);"
		]
	}
}

Create redux consts

{
	"Create redux action's consts": {
		"prefix": "rconsts",
		"body": [
			"/**",
			"	* $1 component's redux actions types",
			"	* @name reduxActions",
			"	* @memberof app.components.$1",
			"	* @typedef $1ReduxActions",
			"	*",
			"	* @param {string} $2_START start action type",
			"	* @param {string} $2_SUCCESS success action type",
			"	* @param {string} $2_FAIL fail action type",
			"*/",
			"",
			"const reduxActions = {",
			"	$2_START: '$2/START'",
			"	$2_SUCCESS: '$2/SUCCESS'",
			"	$2_FAIL: '$2/FAIL'",
			"};"
		]
	},
}