VS Code ES7 React/Redux/JS snippets

This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.

To install the extension: es7-react-js-snippets on marketplace.

GitHub link: vscode-react-snippets.

This is a fork of vscode-react-snippets original.

Search command

You can search through snippets with ES7 snippet search command which can be run with CMD + Shift + P or just use CMD + Shift + R keybinding.

Supported languages (file extensions)

• JavaScript (.js)
• JavaScript React (.jsx)

Snippets info

Every space inside { } and ( ) means that this is pushed into next line :) $ represent each step after tab.

Basic Methods

Prefix	Method
imp→	import moduleName from 'module'
imn→	import 'module'
imd→	import { destructuredModule } from 'module'
ime→	import * as alias from 'module'
ima→	import { originalName as aliasName} from 'module'
imsc→	import styled from 'styled-components'
exp→	export default moduleName
exd→	export { destructuredModule } from 'module'
exa→	export { originalName as aliasName} from 'module'
enf→	export const functionName = (params) => { }
edf→	export default (params) => { }
met→	methodName = (params) => { }
fre→	arrayName.forEach(element => { })
fof→	for(let itemName of objectName { })
fin→	for(let itemName in objectName { })
anfn→	(params) => { }
nfn→	const functionName = (params) => { }
dob→	const {propName} = objectToDescruct
dar→	const [propName] = arrayToDescruct
sti→	setInterval(() => { }, intervalTime
sto→	setTimeout(() => { }, delayTime)
prom→	return new Promise((resolve, reject) => { })
cmmb→	comment block
cp→	const { } = this.props
cs→	const { } = this.state

ESLint

Prefix	Method
eld→	/* eslint-disable */

React

Prefix	Method
imr→	import React from 'react'
imrd→	import ReactDOM from 'react-dom'
imrc→	import React, { Component } from 'react'
imrcp→	import React, { Component } from 'react' & import PropTypes from 'prop-types'
imrpc→	import React, { PureComponent } from 'react'
imrpcp→	import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'
imrm→	import React, { memo } from 'react'
imrmp→	import React, { memo } from 'react' & import PropTypes from 'prop-types'
impt→	import PropTypes from 'prop-types'
imrr→	import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
redux→	import { connect } from 'react-redux'
rconst→	constructor(props) with this.state
rconc→	constructor(props, context) with this.state
est→	this.state = { }
cwm→	componentWillMount = () => { } DEPRECATED!!!
cdm→	componentDidMount = () => { }
cwr→	componentWillReceiveProps = (nextProps) => { } DEPRECATED!!!
scu→	shouldComponentUpdate = (nextProps, nextState) => { }
cwup→	componentWillUpdate = (nextProps, nextState) => { } DEPRECATED!!!
cdup→	componentDidUpdate = (prevProps, prevState) => { }
cwun→	componentWillUnmount = () => { }
gdsfp→	static getDerivedStateFromProps(nextProps, prevState) { }
gsbu→	getSnapshotBeforeUpdate = (prevProps, prevState) => { }
ren→	render() { return( ) }
sst→	this.setState({ })
ssf→	this.setState((state, props) => return { })
props→	this.props.propName
state→	this.state.stateName
rcontext→	const ${1:contextName} = React.createContext()
cref→	this.${1:refName}Ref = React.createRef()
fref→	const ref = React.createRef()
bnd→	this.methodName = this.methodName.bind(this)

React Hooks

• All hooks from official docs are added with hook name prefix.

Prefix	Method
useState→	const [state, setState] = useState(initialState);
useEffect→	useEffect(() => { }, [input])
useEffectClean→	useEffect(() => { return () => {} }, [input])
useContext→	const context = useContext(contextValue)
useReducer→	const [state, dispatch] = useReducer(reducer, initialState, init)
useCallback→	useCallback(() => { },[input])
useMemo→	useMemo(() => function, input)
useRef→	const ref = useRef(initialValue)
useImperativeHandle→	useImperativeHandle(ref, () => { }, [input])
useDebugValue→	useDebugValue(value)
useLayoutEffect→	useLayoutEffect(() => { return () => {}, [input] })
rhc	Custom hook

Redux

Prefix	Method
rxaction→	redux action template
rxconst→	export const $1 = '$1'
rxreducer→	redux reducer template
rxselect→	redux selector template
rxuseSelector→	redux useSelector template
rxuseDispatch→	redux useDispatch template
rxuseStore→	redux useStore template

PropTypes

Prefix	Method
pta→	PropTypes.shape([])
ptar→	PropTypes.shape([]).isRequired
ptb→	PropTypes.bool
ptbr→	PropTypes.bool.isRequired
ptf→	PropTypes.func
ptfr→	PropTypes.func.isRequired
ptn→	PropTypes.number
ptnr→	PropTypes.number.isRequired
pto→	PropTypes.shape({})
ptor→	PropTypes.shape({}).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(name)
ptir→	PropTypes.instanceOf(name).isRequired
pte→	PropTypes.oneOf([name])
pter→	PropTypes.oneOf([name]).isRequired
ptet→	PropTypes.oneOfType([name])
ptetr→	PropTypes.oneOfType([name]).isRequired
ptao→	PropTypes.arrayOf(name)
ptaor→	PropTypes.arrayOf(name).isRequired
ptoo→	PropTypes.objectOf(name)
ptoor→	PropTypes.objectOf(name).isRequired
ptsh→	PropTypes.shape({ })
ptshr→	PropTypes.shape({ }).isRequired
ptany→	PropTypes.any
ptypes→	const propTypes = {};
dtypes→	const defaultProps = {};

Console

Prefix	Method
clg→	console.log(object)
clo→	console.log("object", object)
ctm→	console.time("timeId")
cte→	console.timeEnd("timeId")
cas→	console.assert(expression,object)
ccl→	console.clear()
cco→	console.count(label)
cdi→	console.dir
cer→	console.error(object)
cgr→	console.group(label)
cge→	console.groupEnd()
ctr→	console.trace(object)
cwa→	console.warn
cin→	console.info

Region

Prefix	Method
rgc	// #region constants
rgf	// #region functions
rgsc	// #region styled-components
rgrc	// #region components

Styled Components

Snippet	Content
isc	Import Styled Components
iscn	Import Styled Components/Native
isg	Styled Components Global Style
scp	Props snippet into component
sch	Hover pseudo-class
scb	Before pseudo-class
sca	After pseudo-class
scd	Styled Div
scs	Styled Span
scb	Styled Button
sca	Styled Anchor
sch1	Styled H1
sch2	Styled H2
sch3	Styled H3
sch4	Styled H4
sch5	Styled H5
sch6	Styled H6
scp	Styled Paragraph
scol	Styled Ordered List
scul	Styled Unordered List
scli	Styled List Item
scim	Styled Image
scin	Styled Input

React Components

rch

// #region constants

// #endregion

// #region functions

// #endregion

/**
 * 
 */
class useHook = () => {
 return { };
}

export default useHook;

rcc

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

// #region constants

// #endregion

// #region styled-components

// #endregion

// #region functions

// #endregion

// #region component
const propTypes = {};

const defaultProps = {};

/**
 * 
 */
class FileName extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  render() {
    return <div>$2</div>;
  }
}

FileName.propTypes = propTypes;
FileName.defaultProps = defaultProps;
// #endregion

export default FileName;

rpc

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

// #region constants

// #endregion

// #region styled-components

// #endregion

// #region functions

// #endregion

// #region component
const propTypes = {};

const defaultProps = {};

/**
 * 
 */
class FileName extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  render() {
    return <div>$2</div>;
  }
}

FileName.propTypes = propTypes;
FileName.defaultProps = defaultProps;
// #endregion

export default FileName;

rfc

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

// #region constants

// #endregion

// #region styled-components

// #endregion

// #region functions

// #endregion

// #region component
const propTypes = {};

const defaultProps = {};

/**
 * 
 */
const FileName = () => {
  return <div>$0</div>;
}

FileName.propTypes = propTypes;
FileName.defaultProps = defaultProps;
// #endregion

export default FileName;

reduxmap

// #region redux HOC
const mapStateToProps = (state) => ({
  {$1}: {$2:selector}(state),
});

const actionCreators = {
  {$3}Action: {$3},
};
// //#endregion

connect(
      mapStateToProps,
      actionCreators
    )(Component);

Others

cmmb

/**
 * $1
 */

desc

describe('$1', () => {
  $2;
});

test

test('should $1', () => {
  $2;
});

tit

it('should $1', () => {
  $2;
});

stest

import React from 'react';
import { fireEvent } from '@testing-library/react';
import { render } from '../../../../../tests/testUtils';
import { ${1:ComponentName} } from '../${1:ComponentName}'

describe('<${1:ComponentName} />', () => {
  const defaultProps = {}

  it('render', () => {
    const { container, getByText } = render(<${1:ComponentName} {...defaultProps} />)
    getByText('');
  });
});

shtest

import { renderHook } from '@testing-library/react-hooks';
import ${1:HookName} from '../${1:HookName}'

describe('<${1:HookName} />', () => {
  it('Should ', () => {
    const { result } = renderHook(() => ${1:HookName}());
  });
});

jmock

jest.mock('${1:moduleName}', () => ({
  __esModule: true,
  default: jest
    .fn(() => '')
    .mockImplementationOnce(() => ('mockedReturn'))
    .mockReturnValueOnce('mockedValue'),
}));

hocredux

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

export const mapStateToProps = state => ({

})

export const mapDispatchToProps = {

}

export const ${1:hocComponentName} = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />

  hocComponent.propTypes = {
  }

  return hocComponent
}

export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))

hoc

import React from 'react';
import PropTypes from 'prop-types';

const withSomething = (WrappedComponent) => {
  const hocComponent = ({ ...props }) => <WrappedComponent {...props} />;
  hocComponent.wrappedComponent = WrappedComponent;
  hocComponent.propTypes = {};

  return hocComponent;
};

export default withSomething;