
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-line
ednl [Eslint Disable Next Line]
// eslint-disable-next-line
styc [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
`
/**
|--------------------------------------------------
| $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]
// $FlowFixMe
rnstory [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;