Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>React SnippetsNew to Visual Studio Code? Get it now.
React Snippets

React Snippets

MeePwn

|
4,261 installs
| (1) | Free
react snippets
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React Snippets

ts/tsx js/jsx 代码提示

  • ///:
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
  • mi:
import $1 from '$2';
  • mis:
import styled from 'styled-components';
  • mirn:
import {
  Button,
  Image,
  ImageStyle,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';
  • ps:
this.props.
  • st:
this.state.
  • sst:
this.setState({
  $1
});
  • ssf:
this.setState((prevState: any, props: any) => ({
  $1
}));
  • source:
source={$1}
  • style:
style={$1}
  • numberOfLines:
numberOfLines={$1}
  • activeOpacity:
activeOpacity={$1}
  • resizeMode:
resizeMode=$1
  • cover:
'cover'
  • contain:
'contain'
  • stretch:
'stretch'
  • repeat:
'repeat'
  • center:
'center'
  • onPress:
onPress={$1}
  • onChangeText:
onChangeText={$1}
  • onChange:
onChange={$1}
  • value:
value={$1}
  • multiline:
multiline={$1}
  • arrow:
($1) => {
  $2
}
  • setTimeout:
setTimeout(() => {
  $1
}, $2);
  • newp:
new Promise((resolve, reject) => {
  $1
});
  • fore:
$1.forEach((item: any, index: number) => {
  $2
});
  • map:
$1.map((item: any) => $2);
  • filter:
$1.filter((item: any) => $2);
  • dob:
const { $2 } = $1;
  • dar:
const [ $2 ] = $1;
  • constructor:
public constructor(props: Readonly<${1:IProps}>) {
  super(props);

  $1
}
public componentDidMount() {
  $1
}
  • cdc:
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
  $1
}
  • ren:
public render() {
  return (
    $1
  );
}
  • ssc:
const styles = StyleSheet.create<IStyle>({
  container: {
    $1
  },

});
  • flex:
flex: $1,
  • justifyContent:
justifyContent: '${1:center}',
  • ai:
alignItems: '${1:center}',
  • as:
alignSelf: '${1:center}',
  • flex-start:
'flex-start'
  • flex-end:
'flex-end'
  • center:
'center'
  • space-between:
'space-between'
  • space-around:
'space-around'
  • borderBottomWidth:
borderBottomWidth: $1,
  • borderLeftWidth:
borderLeftWidth: $1,
  • borderRightWidth:
borderRightWidth: $1,
  • borderTopWidth:
borderTopWidth: $1,
  • borderWidth:
borderWidth: $1,
  • flexDirection:
flexDirection: $1,
  • row:
'row'
  • row-reverse:
'row-reverse'
  • column:
'column'
  • column-reverse:
'column-reverse'
  • height:
height: $1,
  • width:
width: $1,
  • margin:
margin: $1,
  • marginBottom:
marginBottom: $1,
  • marginLeft:
marginLeft: $1,
  • marginRight:
marginRight: $1,
  • marginTop:
marginTop: $1,
  • marginHorizontal:
marginHorizontal: $1,
  • marginVertical:
marginVertical: $1,
  • maxHeight:
maxHeight: $1,
  • maxWidth:
maxWidth: $1,
  • minHeight:
minHeight: $1,
  • minWidth:
minWidth: $1,
  • overflow:
overflow: $1,
  • visible:
'visible'
  • hidden:
'hidden'
  • scroll:
'scroll'
  • padding:
padding: $1,
  • paddingBottom:
paddingBottom: $1,
  • paddingHorizontal:
paddingHorizontal: $1,
  • paddingLeft:
paddingLeft: $1,
  • paddingRight:
paddingRight: $1,
  • paddingTop:
paddingTop: $1,
  • paddingVertical:
paddingVertical: $1,
  • position:
position: $1,
  • zIndex:
zIndex: $1,
  • top:
top: $1,
  • left:
left: $1,
  • right:
right: $1,
  • bottom:
bottom: $1,
  • fontSize:
fontSize: $1,
  • fontWeight:
fontWeight: '$1',
  • bold:
'bold'
  • backgroundColor:
backgroundColor: '$1',
  • borderColor:
borderColor: '$1',
  • borderTopColor:
borderTopColor: '$1',
  • borderRightColor:
borderRightColor: '$1',
  • borderBottomColor:
borderBottomColor: '$1',
  • borderLeftColor:
borderLeftColor: '$1',
  • borderRadius:
borderRadius: $1,
  • borderTopLeftRadius:
borderTopLeftRadius: $1,
  • borderTopRightRadius:
borderTopRightRadius: $1,
  • borderBottomLeftRadius:
borderBottomLeftRadius: $1,
  • borderBottomRightRadius:
borderBottomRightRadius: $1,
  • borderStyle:
borderStyle: '$1',
  • solid:
'solid'
  • dotted:
'dotted'
  • dashed:
'dashed'
  • opacity:
opacity: $1
  • rcv
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';

export default (props: Readonly<any>) => (
  <div style={styles.container}>

  </div>
);

const styles = {
  container: {

  },

};

  • rncv
/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';
import {
  Button,
  Image,
  ImageStyle,
  StyleSheet,
  Text,
  TextStyle,
  View,
  ViewStyle,
} from 'react-native';

export interface IStyle {
  container: ViewStyle;

}

export default (props: Readonly<any>) => (
  <View style={styles.container}>

  </View>
);

const styles = StyleSheet.create<IStyle>({
  container: {

  },

});

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft