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.

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;

ES7 React/Redux/Styled-components snippets

woodreamz