JS JSX Snippets

Options

Option	Description
importReactOnTop	Controls if snippets should add import React from 'react'; at the top of components.\nSet false if you have React +17 and use jsx transform.
semicolon	Controls if snippets should add semicolon at the end of the line.
typing	Controls if React components have typescript Props typing.

Supported languages (file extensions)

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

Snippets

Import package

Trigger	Content
imp	import name from 'module';
imd	import { } from 'module';
ipt	import PropTypes from 'prop-types';
imr	import React from 'react';	useful in test

Basic methods

Trigger	Content
clg	console.log()

React components

Trigger	Content
rcc	class component skeleton
rccp	class component skeleton with prop types after the class
rfc	function component skeleton
rfcp	function component with prop types skeleton
est	empty state object
cdm	componentDidMount method
scu	shouldComponentUpdate method
cdu	componentDidUpdate method
cwu	componentWillUnmount method
gsb	getSnapshotBeforeUpdate method
gds	static getDerivedStateFromProps method
cdc	componentDidCatch 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
useState	useState block
useEffect	useEffect block
useContext	useContext block

React native components

Trigger	Content
rncc	react native class component skeleton
rnfc	react native function component skeleton

Jest

Trigger	Content
describe	describe Block
test	test Block
it	it Block

PropTypes

Trigger	Content
pta	PropTypes.array,
ptar	PropTypes.array.isRequired,
pto	PropTypes.object.,
ptor	PropTypes.object.isRequired,
ptb	PropTypes.bool,
ptbr	PropTypes.bool.isRequired,
ptf	PropTypes.func,
ptfr	PropTypes.func.isRequired,
ptn	PropTypes.number,
ptnr	PropTypes.number.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,

Full Expansions

imp - Import package

import name from 'module';

imd - Import package

import { | } from 'module';

imr - Import React

import React from 'react';

ipt - Import PropTypes

import PropTypes from 'prop-types';

clg - Console Log

console.log(|);

rcc - Class Component

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        |
      </div>
    );
  }
}

export default App;

rccp - Class Component with PropTypes

import React, { Component } from 'react';
import PropTypes from 'prop-types';


class App extends Component {
  render() {
    return (
      <div>
        |
      </div>
    );
  }
}


App.propTypes = {

};


export default App;

rfc - Function Component

import React from 'react';

const App = () => {
  return (
    <div>
      |
    </div>
  );
}

export default App;

rfcp - Function Component with PropTypes

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


const App = () => {
  return (
    <div>
      |
    </div>
  );
};


App.propTypes = {

};


export default App;

est - Empty State

this.state = {
  |
};

cdm - ComponentDidMount

componentDidMount() {
  |
}

scu - ShouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  |
}

cdu - ComponentDidUpdate

componentDidUpdate(prevProps, prevState) {
  |
}

cwu - ComponentWillUnmount

componentWillUnmount() {
  |
}

gsbu - GetSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
  |
}

gds - GetDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) {
  |
}

cdc - ComponentDidCatch

componentDidCatch(error, info) {
  |
}

sst - SetState with object as parameter

this.setState(|)

ssf - SetState with function as parameter

this.setState((state, props) => { return { | }});

props - this.props

this.props.|

state - this.state

this.state.|

bnd - Binds the this of method inside the constructor

this.| = this.|.bind(this);

useState - useState block

const [state, setState] = useState(|);

useEffect - useEffect block

useEffect(() => {
  |
  return () => {

  };
}, []);

useContext - useContext block

const context = useContext(|);

rncc - React Native Class Component

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

class App extends Component {
  render() {
    return (
      <View>
        |
      </View>
    );
  }
}

const styles = StyleSheet.create({})

export default App;

rnfc - React Native Function Component

import React from 'react';
import { StyleSheet, View } from 'react-native';

const App = () => {
  return (
    <View>
      |
    </View>
  );
}

const styles = StyleSheet.create({})

export default App;

describe - Describe Block

describe('|', () => {

});

test - Test Block

test('|', () => {

});

it - It Block

it('|', () => {

});