Lista de Snippets para React Native para se adicionar no VS Code

VS Code Snippets

{
	"apisauce": {
		"prefix": "api",
		"body": [
			"import { create } from 'apisauce';",
			"",
			"const api = create({",
			"  baseURL: '${1:http://localhost:3000}',",
			"  headers: {",
			"    Accept: 'application/vnd.github.v3+json',",
			"    'User-Agent': 'Githuber',",
			"  },",
			"});",
			"",
			"export default api;",
			""
		],
		"description": "Create APISauce Config"
	},

	"component": {
		"prefix": "rnc",
		"body": [
			"import React, { Component } from 'react';",
			"",
			"import { View } from 'react-native';",
			"",
			"// import styles from './styles';",
			"",
			"export default class ${1:MyComponent} extends Component {",
			"  render() {",
			"    return (",
			"      <View />",
			"    );",
			"  }",
			"}",
			""
		],
		"description": "Create react-native component"
	},

	"proptypes": {
		"prefix": "ppt",
		"body": [
			"static propTypes = {",
			"  ${1}",
			"};"
		],
		"description": "Create component propTypes"
	},

	"defaultprops": {
		"prefix": "defaultprops",
		"body": [
			"static defaultProps = {",
			"  ${1}",
			"};"
		],
		"description": "Create component defaultProps"
	},

	"reactotronconfig": {
		"prefix": "reactotronconfig",
		"body": [
			"import Reactotron from 'reactotron-react-native';",
			"",
			"if (__DEV__) {",
			"  const tron = Reactotron",
			"    .configure()",
			"    .useReactNative()",
			"    .connect();",
			"",
			"  tron.clear();",
			"",
			"  console.tron = tron;",
			"}",
			""
		],
		"description": "Create Reactotron Config"
	},

	"duck": {
		"prefix": "duck",
		"body": [
			"import { createReducer, createActions } from 'reduxsauce';",
			"import Immutable from 'seamless-immutable';",
			"",
			"/* Types & Action Creators */",
			"",
			"const { Types, Creators } = createActions({",
			"// actionType: ['dataPassed'],",
			"});",
			"",
			"export const ${1:name}}Types = Types;",
			"export default Creators;",
			"",
			"/* Initial State */",
			"",
			"export const INITIAL_STATE = Immutable({",
			"// data: [],",
			"});",
			"",
			"/* Reducers */",
			"",
			"// export const reducer = state =>",
			"//   state.merge({ data: [] });",
			"",
			"/* Reducers to types */",
			"",
			"export const reducer = createReducer(INITIAL_STATE, {",
			"// [Types.ACTION_TYPE]: reducer,",
			"});"
		],
		"description": "Create react-native duck module"
	},

	"render": {
		"prefix": "render",
		"body": [
			"render() {",
			"  return (",
			"    ${1:<View />}",
			"  );",
			"}"
		],
		"description": "Create render method"
	},

	"mapDispatchToProps": {
		"prefix": "mapDispatchToProps",
		"body": [
			"const mapDispatchToProps = dispatch => ({",
			"  ${1}",
			"});"
		],
		"description": "Create redux mapDispatchToProps"
	},

	"mapStateToProps": {
		"prefix": "mapStateToProps",
		"body": [
			"const mapStateToProps = state => ({",
			"  ${1}",
			"});"
		],
		"description": "Create redux mapStateToProps"
	},

	"reduxComponent": {
		"prefix": "reduxComponent",
		"body": [
			"/* Core */",
			"import React, { Component } from 'react';",
			"",
			"/* Presentational */",
			"import { View } from 'react-native';",
			"",
			"/* Redux */",
			"import { connect } from 'react-redux';",
			"",
			"// import styles from './styles';",
			"",
			"class ${1:MyComponent}} extends Component {",
			"  render() {",
			"    return (",
			"      <View />",
			"    );",
			"  }",
			"}",
			"",
			"const mapStateToProps = state => ({",
			"",
			"});",
			"",
			"const mapDispatchToProps = dispatch => ({",
			"",
			"});",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)(${1:MyComponent}});",
			""
		],
		"description": "Create react-native Redux component"
	},

	"configureStore": {
		"prefix": "configureStore",
		"body": [
			"import { createStore, applyMiddleware, compose } from 'redux';",
			"",
			"export default (rootReducer) => {",
			"  const middleware = [];",
			"  const enhancers = [];",
			"",
			"  /* Saga */",
			"  // const sagaMonitor = __DEV__ ? console.tron.createSagaMonitor() : null;",
			"  // const sagaMiddleware = createSagaMiddleware({ sagaMonitor });",
			"  // middleware.push(sagaMiddleware);",
			"",
			"  enhancers.push(applyMiddleware(...middleware));",
			"",
			"  /* Store */",
			"  const createAppropriateStore = __DEV__ ? console.tron.createStore : createStore;",
			"  const store = createAppropriateStore(rootReducer, compose(...enhancers));",
			"",
			"  /* Run Saga */",
			"  // sagaMiddleware.run(rootSaga);",
			"",
			"  return store;",
			"};"
		],
		"description": "Create configureStore file"
	},

	"reduxSetup": {
		"prefix": "reduxSetup",
		"body": [
			"import { combineReducers } from 'redux';",
			"",
			"/* Reducers */",
			"// import navReducer from 'navigation/reducer';",
			"",
			"import configureStore from './configureStore';",
			"// import rootSaga from './sagas';",
			"",
			"export default () => {",
			"  const rootReducer = combineReducers({",
			"    // nav: navReducer,",
			"  });",
			"",
			"  return configureStore(rootReducer, rootSaga);",
			"};"
		],
		"description": "Create Redux Setup file"
	},

	"componentStateless": {
		"prefix": "rnstc",
		"body": [
			"import React from 'react';",
			"",
			"import { View } from 'react-native';",
			"",
			"// import styles from './styles';",
			"",
			"const ${1:MyComponent} = () => (",
			"  <View />",
			");",
			"",
			"export default ${1:MyComponent};",
			""
		],
		"description": "Create react-native stateless component"
	},	

	"reduxComponentStateless": {
		"prefix": "reduxComponentStateless",
		"body": [
			"/* Core */",
			"import React from 'react';",
			"",
			"/* Presentational */",
			"import { View } from 'react-native';",
			"",
			"/* Redux */",
			"import { connect } from 'react-redux';",
			"",
			"// import styles from './styles';",
			"",
			"const ${1:MyComponent}} = () => (",
			"  <View />",
			");",
			"const mapStateToProps = state => ({",
			"",
			"});",
			"",
			"const mapDispatchToProps = dispatch => ({",
			"",
			"});",
			"",
			"export default connect(mapStateToProps, mapDispatchToProps)(${1:MyComponent}});"
		],
		"description": "Create react-native stateless Redux component"
	},		

	"styles": {
		"prefix": "styles",
		"body": [
			"import { StyleSheet } from 'react-native';",
			"",
			"const styles = StyleSheet.create({",
			"  ${1}",
			"});",
			"",
			"export default styles;",
			""
		],
		"description": "Create react-native Style file"
	},

	"moduleResolver": {
		"prefix": "moduleResolver",
		"body": [
			"{",
			"  \"presets\": [\"react-native\"],",
			"  \"plugins\": [ ",
			"    [",
			"      \"module-resolver\",",
			"      {",
			"        \"root\": [\"./src\"],",
			"        \"extensions\": [\".js\", \".ios.js\", \".android.js\"]",
			"      }",
			"    ]",
			"  ]",
			"}"
		],
		"description": "Create Module Resolver config"
	},

	"eslint": {
		"prefix": "eslint",
		"body": [
			"{",
			"  \"parser\": \"babel-eslint\",",
			"  \"env\": {,",
			"    \"browser\": true,",
			"    \"jest\": true",
			"  },",
			"  \"plugins\": [",
			"    \"react-native\",",
			"    \"jsx-a11y\",",
			"    \"import\",",
			"  ],",
			"  \"extends\": [",
			"    \"airbnb\",",
			"    \"plugin:react-native/all\"",
			"  ],",
			"  \"rules\": {",
			"    \"react/jsx-filename-extension\": [\"error\", { \"extensions\": [\".js\", \".jsx\"] }],",
			"    \"global-require\": \"off\",",
			"    \"no-console\": \"off\",",
			"    \"import/prefer-default-export\": \"off\",",
			"    \"no-unused-vars\": [\"error\", {\"argsIgnorePattern\": \"^_\"}]",
			"  },",
			"  \"settings\": {",
			"    \"import/resolver\": {",
			"      \"babel-module\": {}",
			"    }",
			"  },",
			"  \"globals\": {",
			"    \"__DEV__\": true",
			"  }",
			"}"
		],
		"description": "Create eslint file config"
	}
}