VS Code React/Redux/react-router 代码片段插件,让你写 React 写到飞起来

2,811 阅读1分钟

React/Redux/react-router Snippets

discountry

| 774 installs | React Ecosystem code snippets all in one Installation Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Copied to clipboard More Info

React/Redux/react-router Snippets

Version
Install
Ratings

Useful React Ecosystem snippets for Visual Studio Code, including:

  • Quick import
  • React
  • Redux
  • react-redux
  • react-router

Screenshot

Screenshot

Usage

import

Trigger Content
imr import React from 'react';
imrc import React, { Component } from 'react';
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, Route } from 'react-router-dom';
imnl import { NavLink } from 'react-router-dom';
imwr import { withRouter } from 'react-router';

React

Trigger Content
rcc→ class component skeleton
rccp→ class component skeleton with prop types after the class
rcjc→ class component skeleton without import and default export lines
rcfc→ class component skeleton that contains all the lifecycle methods
rsc→ stateless component skeleton
rscp→ stateless component with prop types skeleton
rpt→ empty propTypes declaration
con→ class default constructor with props
conc→ class default constructor with props and context
est→ empty state object
cwm→ componentWillMount method
cdm→ componentDidMount method
cwr→ componentWillReceiveProps method
scu→ shouldComponentUpdate method
cwup→ componentWillUpdate method
cdup→ componentDidUpdate method
cwun→ componentWillUnmount method
ren→ render method
sst→ this.setState with object as parameter
ssf→ this.setState with function as parameter
props→ this.props
state→ this.state
bnd→ binds the this of method inside the constructor
pta→ PropTypes.array,
ptar→ PropTypes.array.isRequired,
ptb→ PropTypes.bool,
ptbr→ PropTypes.bool.isRequired,
ptf→ PropTypes.func,
ptfr→ PropTypes.func.isRequired,
ptn→ PropTypes.number,
ptnr→ PropTypes.number.isRequired,
pto→ PropTypes.object.,
ptor→ PropTypes.object.isRequired,
pts→ PropTypes.string,
ptsr→ PropTypes.string.isRequired,
ptnd→ PropTypes.node,
ptndr→ PropTypes.node.isRequired,
ptel→ PropTypes.element,
ptelr→ PropTypes.element.isRequired,
pti→ PropTypes.instanceOf(ClassName),
ptir→ PropTypes.instanceOf(ClassName).isRequired,
pte→ PropTypes.oneOf(['News', 'Photos']),
pter→ PropTypes.oneOf(['News', 'Photos']).isRequired,
ptet→ PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
ptetr→ PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
ptao→ PropTypes.arrayOf(PropTypes.number),
ptaor→ PropTypes.arrayOf(PropTypes.number).isRequired,
ptoo→ PropTypes.objectOf(PropTypes.number),
ptoor→ PropTypes.objectOf(PropTypes.number).isRequired,
ptsh→ PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}),
ptshr→ PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}).isRequired,

Redux

Trigger Content
rat Redux constant(actionTypes)
rac Redux actionCreator
reducer Redux reducer
store Redux store
selector Redux selector

react-redux

Trigger Content
imconnect import { connect } from 'react-redux';
improvider import { Provider } from 'react-redux';
provider react-redux Provider Container
mstp mapStateToProps
mdtp mapDispatchToProps
connect react-redux connect React Component
container Redux container

react-router

Trigger Content
imrr import { BrowserRouter, Route } from 'react-router-dom';
imnl import { NavLink } from 'react-router-dom';
imwr import { withRouter } from 'react-router';
router react-router Router template
route react-router Route component
navlink react-router NavLink component

Acknowledgments

License

MIT


Categories

Snippets

Tags

javascript snippet

Resources

More Info

Version 0.2.4
Last updated June 13, 2017 10:40:15 AM CST
Publisher discountry
Report Report Abuse

Q & A

Ask a question Visit publisher's GitHub repositoryfor extension related questions.