No Semicolon ?
For the version without semi-colon look this one https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux-snippets-for-es6-es7-version-standard
Usage
After install this snippets add this inside your settings
"editor.snippetSuggestions": "top",
Snippets List
| Snippets | Content |
|---|---|
| imr | Import React |
| imro | Import React as Object |
| imrc | Import React Component |
| imrpc | Import React PureComponent |
| imrn | Import React-Native Element |
| ims | Import Styled-Components |
| imsn | Import Styled-Components Native |
| impt | Import PropTypes |
| rct | Redux constant |
| crr | Connect Redux |
| sl | Stateless Component |
| slr | Stateless Component Return |
| slc | Stateless Component Function |
| ccs | Component Class |
| cccs | Component Class With Constructor |
| ccsf | Component Class FlowType |
| pcs | PureComponent Class |
| pccs | PureComponent Class With Constructor |
| pcsf | PureComponent FlowType |
| ccsr | Component Class With Redux |
| edccs | Export default Component Class |
| rrd | Redux Reducer |
| rpf | Redux Pure Function |
| rpc | Redux Pure Function Const |
| cwm | ComponentWillMount |
| cdm | ComponentDidMount |
| cdu | ComponentDidUpdate |
| scu | ShouldComponentUpdate |
| cwu | ComponentWillUpdate |
| cwum | ComponentWillUnmount |
| cwrp | ComponentWillReceiveProps |
| cdc | ComponentDidCatch |
| cct | Create Context |
| gds | getDerivedStateFromProps |
| rnss | StyleSheet Style |
| ess | EStyleSheet Style |
| ed | Export default |
| edl | EslintDisableLine |
| ednl | EslintDisableNextLine |
| styc | Styled Component |
| estyc | Export Styled Component |
| edstyc | Export default Styled Component |
| cmmb | Comment Big Block |
| log | Console Log |
| cl | Standard console.log |
| tt | Test |
| tdesc | Test Describe |
| tit | Test It |
| ffm | FlowFixMe |
| rnstory | React-Native Story |
| rstory | React Story |
| rsf | React Stateless Function |
imr [Import React]
import React from 'react';imro [Import React as Object]
import * as React from 'react';imrc [Import React Component]
import React, { Component } from 'react';imrpc [Import React PureComponent]
import React, { PureComponent } from 'react';imrn [Import React-Native Element]
import { $1 } from 'react-native';ims [Import Styled-Components]
import styled from 'styled-components';imsn [Import Styled-Components Native]
import styled from 'styled-components/native';impt [Import PropTypes]
import PropTypes from 'prop-types';rct [Redux Constant]
export const $1 = '$1';crr [Connect Redux]
import { connect } from 'react-redux';sl [Stateless Component]
const $1 = () => (
$2
);
export default $1;slr [Stateless Component Return]
const $1 = () => {
return (
$2
);
}
export default $1;slc [Stateless Component Function]
function $1($2) {
$3
}
export default $1;ccs [Component Class]
class $1 extends Component {
state = { $2 }
render() {
return (
$3
);
}
}
export default $1;cccs [Component Class With Constructor]
class $1 extends Component {
constructor(props) {
super(props);
this.state = { $2 };
}
render() {
return (
$3
);
}
}
export default $1;ccsf [Component Class FlowType]
type P = {
$1
};
type S = {
$2
};
class $3 extends Component<P, S> {
constructor(props) {
super(props);
this.state = { $4 };
}
render() {
return (
$5
);
}
}
export default $3;pcs [PureComponent Class]
class $1 extends PureComponent {
state = { $2 }
render() {
return (
$3
);
}
}
export default $1;pccs [PureComponent Class With Constructor]
class $1 extends PureComponent {
constructor(props) {
super(props);
this.state = { $2 };
}
render() {
return (
$3
);
}
}
export default $1;pcsf [PureComponent Class FlowType]
type P = {
$1
};
type S = {
$2
};
class $3 extends PureComponent<P, S> {
constructor(props) {
super(props);
this.state = { $4 };
}
render() {
return (
$5
);
}
}
export default $3;ccsr [Component Class With Redux]
class $1 extends Component {
state = { $2 }
render() {
return (
$3
);
}
}
export default connect($4, $5)($1);edccs [Export default Component Class]
export default class $1 extends Component {
state = { $2 }
render() {
return (
$3
);
}
}rrd [Redux Reducer]
export default (state = $1, action) => {
switch (action.type) {
case $2:
$3
default:
return state;
}
};rpf [Redux pure function]
export const $1 = '$1';
export function $2($3) {
return {
type: $1,
$3
}
}rpc [Redux pure function const]
export const $1 = '$1';
export const $2 = $3 => ({
type: $1,
$3
});cwm [ComponentWillMount]
componentWillMount() {
$1
}cwu [ComponentWillUpdate]
componentWillUpdate() {
$1
}cdu [ComponentDidUpdate]
componentDidUpdate(prevProps, prevState) {
$1
}scu [ShouldComponentUpdate]
shouldComponentUpdate(nextProps, nextState, nextContext) {
$1
}cdm [ComponentDidMount]
componentDidMount() {
$1
}cwum [ComponentWillUnmount]
componentWillUnmount() {
$1
}cwrp [ComponentWillReceiveProps]
componentWillReceiveProps(nextProps) {
$1
}cdc [ComponentDidCatch]
componentDidCatch(error, info) {
$1
}cct [Create Context]
const $1Context = createContext($2);
class $1Provider extends Component {
state = {
$3
}
render() {
return (
<$1Context.Provider value={{ state: { $3 }, actions: {} }}>
{this.props.children}
</$1Context.Provider>
);
}
}
export default $1Provider;gds [getDerivedStateFromProps]
static getDerivedStateFromProps(nextProps, prevState) {
$1
}rnss [StyleSheet Style]
const styles = StyleSheet.create({
$1
});ess [EStyleSheet]
import EStyleSheet from 'react-native-extended-stylesheet';
const styles = EStyleSheet.create({
$1
});
export default styles;ed [Export default]
export default $1;edl [Eslint Disable Line]
// eslint-disable-lineednl [Eslint Disable Next Line]
// eslint-disable-next-linestyc [Styled Component]
const $1 = styled.$2`
$3
`estyc [Export Styled Component]
export const $1 = styled.$2`
$3
`edstyc [Export default Styled Component]
export default styled.$1`
$2
`cmmb [Comment Big Block]
/**
|--------------------------------------------------
| $1
|--------------------------------------------------
*/log [Console Log]
console.log('====================================');
console.log($1);
console.log('====================================');cl [Standard console.log]
console.log($1);tt [Test]
test('$1', () => {
$2
});tdesc [Test Describe]
describe('$1', () => {
$2
});tit [Test It]
it('should $1', $2($3) => {
$4
});ffm [FlowFixMe]
// $FlowFixMernstory [React-Native Story]
import React from 'react';
import { storiesOf } from '@storybook/react-native';
storiesOf('$1', module)
.add('default', () => $2);rstory [React Story]
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('$1', module)
.add('default', () => $2);rue [React useEffect]
React.useEffect(() => {
$1
}, []);rsf [React Stateless Function]
import React from "react";
function $1(props) {
return (
<div>
</div>
);
}
export default $1;