VS Code React and Redux Snippets

Visual Studio Marketplace Downloads Visual Studio Marketplace Version

This extension provides you React snippets for VS Code

Snippets Demo

Supported languages (file extensions)

💡Tip: You can use the "insert snippet" action to find snippets: command+shift+p/ctrl+shift+p -> Insert Snippet -> type to search

Prefix	Method
`imr→`	`import React from 'react';`
`imrc→`	`import React, { Component } from 'react';`
`imrd→`	`import ReactDOM from 'react-dom';`
`impt→`	`import PropTypes from 'prop-types';`
`imc→`	`import ${1:ComponentName} from 'components/${1:ComponentName}';`
`imconnect→`	`import { connect } from 'react-redux';`
`improvider→`	`import { Provider } from 'react-redux';`
`imrr→`	`import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';`
`imrrlink→`	`import { Link } from 'react-router-dom';`

Prefix	Description
`rc→`	React functional component
`rcwr→`	React functional component without `return ()`
`rcm→`	React functional component with `memo`
`rcc→`	React class component with `constructor`
`rpc→`	React `PureComponent` component
`rhoc→`	React Higher-Oder component
`rhocc→`	React Higher-Oder class component
`rbind→`	Method binding (`this.${1:methodName} = this.${1:methodName}.bind(this);`)

Hooks:

Prefix	Description
`pta→`	PropTypes array
`ptar→`	PropTypes array required
`ptb→`	PropTypes bool
`ptbr→`	PropTypes bool required
`ptf→`	PropTypes func
`ptfr→`	PropTypes func required
`ptn→`	PropTypes number
`ptnr→`	PropTypes number required
`pto→`	PropTypes object
`ptor→`	PropTypes object required
`pts→`	PropTypes string
`ptsr→`	PropTypes string required
`ptsym→`	PropTypes symbol
`ptsymr→`	PropTypes symbol required
`ptnd→`	PropTypes node
`ptndr→`	PropTypes node required
`ptel→`	PropTypes element
`ptelr→`	PropTypes element required
`ptelt→`	PropTypes elementType
`pteltr→`	PropTypes elementType required
`pti→`	PropTypes instanceOf
`ptir→`	PropTypes instanceOf required
`pte→`	PropTypes enum (oneOf)
`pter→`	PropTypes enum (oneOf) required
`ptet→`	PropTypes oneOfType
`ptetr→`	PropTypes oneOfType required
`ptao→`	PropTypes arrayOf
`ptaor→`	PropTypes arrayOf required
`ptoo→`	PropTypes objectOf
`ptoor→`	PropTypes objectOf required
`ptsh→`	PropTypes shape
`ptshr→`	PropTypes shape required
`ptex→`	PropTypes exact
`ptexr→`	PropTypes exact required
`ptany→`	PropTypes any

Prefix	Description
`rcr→`	React Redux Component
`rccr→`	React Redux Class component
`useDispatch→`	`useDispatch` hook
`useSelector→`	`useSelector` hook
`useStore→`	`useStore` hook
`mdtp→`	mapDispatchToProps template
`mstp→`	mapStateToProps template
`rmap→`	mapStateToProps & mapDispatchToProps template
`rconnect→`	Redux connect
`reducer→`	Redux reducer template
`action→`	Redux action template

Prefix	Description
`desc->`	`describe` block
`test->`	`test` block
`tit->`	`it` block
`rtest->`	Base React component unit test setup