equimper/vsc-react-native-react-redux-snippets

Snippets for React and React-Native with a bit of Redux for es6/es7 user.

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
`

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]

// $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;

---

vsc-react-native-react-redux-snippets's Issues

React Redux Container Component snippet?

Could we add a react-redux container component?

something like

import { connect } from 'react-redux';

const mapStateToProps = state => {  
  return {
  };
};

const mapDispatchToProps = dispatch => {
  return {

  };
};

const $1 = connect(mapStateToProps, mapDispatchToProps)($2);

export default $1;

Connect Redux not working

I've uninstalled and reinstalled but still am getting the same issue:

ccr does not populate as an option in my shortcuts.

All other options on the package are working fine.

Setting to disable semicolons

Can we have this as a configuration option?

Error message on load of React Non-Native project

Getting this error in the Output Window :

[error] [EQuimper.react-native-react-redux]: Unknown language in contributes.react-native-react-redux.language. Provided value: jsx

I can create a workspace for this folder project, and then disable the extension for the workspace. But no other extensions reports an error when it doesn't recognize a file type - unless it's the designated language processor for that file type or the project.

So perhaps this is an overly informative bit of code that's trying to be helpful about reporting an issue, when it might be better to simply ignore the condition?

I dunno, just reporting what I see.

HTH

Your extension is not working, not only yours but all react emmet shortcuts are not working. Please help me

Change snippets shorcut log to clog

What about change log snippets shorcut to clog?

I don't know why, but my VS Code some times adds lots of log on autocomplete.

If you change to clog, probably will be simple to use.

More of a question then a issue, maybe not

So I was taking a tutorial where someone suggested that we use your this plugin, which I love. He used a specific snippet that I do not see in your snippets. It actually included the whole import of react and the stateless function with return, except it included a div, so it seemed to be more for React then React Native which is what I would need it for. Is this something that got removed? Now I have to use imr, and them slr, instead of just using rsf as shown in the attached image.

Thanks for putting in all the hard work to do this, it is awesome and greatly appreciated.

issue with the component name

I'm facing a weird issue and i'm not sure if its specific to my setup - but the components names are weirdly capitalized. Here's for my ProductCard.js

How to get constructor method also in ccs ?

i want

constructor(props) {
    super(props);
    this.state = {  };
  }

instead of
state = { };
when i type ccs, how can i get it ?

Create setting for semi-colon/no-semi-colon

Hello. Loving the plugin, one issue though. I prefer leaving out the semi colons, which I also define in my lintter. The problem of course is that this version of the plugin uses semi-colons. I know there is another version, though that one has not been updated for 3 years... I tried it out but it did not satisfy me, as this version for example always automatically fills in the name of a component from the filename, which the other version (no-semi-colons) does not. Also the snippets are not identical.

Any chance that the other version could get an update identical to this, with the exception of no semi colons? Or as the title suggests, just make a setting for it and just mantain one addon? :) Thanks

EDIT: Too be fair this is a very small tweak to do myself, I know. I just replaced all semi-colons in the snippets.json. The cry for it to be a setting is because I assume that this manual edit of mine will be undone whenever the plugin is updated.

add PropTypes snippets

Have you considered adding snippets for prop-types?

Customise snippet for console.log

Is there a way to customise the snippet for console.log to remove the ===s at the top and bottom?

console.log('====================================');
console.log($1);
console.log('====================================');