Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

UgRoss/vscode-react

Repository files navigation

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)

  • JavaScript (.js)
  • JavaScript React (.jsx)
  • TypeScript (.ts)
  • TypeScript React (.tsx)

📖 Snippets List

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

Import

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';

React

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
useState→ useState hook
useEffect→ useEffect hook
useContext→ useContext hook
useReducer→ useReducer hook
useCallback→ useCallback hook
useMemo→ useMemo hook
useRef→ useRef hook
useImperativeHandle→ useImperativeHandle hook
useDebugValue→ useDebugValue hook
useLayoutEffect→ useLayoutEffect hook

PropTypes

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

Redux

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

Tests

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

AltStyle ă«ă‚ˆăŁăŠć€‰æ›ă•ă‚ŒăŸăƒšăƒŒă‚ž (->ă‚ȘăƒȘă‚žăƒŠăƒ«) /