From 8f74a90c15ff22785b6b53e827e9b0e73dcc3d3e Mon Sep 17 00:00:00 2001 From: Sven Date: Sat, 26 Aug 2017 03:43:27 +0800 Subject: [PATCH 1/8] add rfe/rfep/cmmb --- snippets/snippets.json | 276 ++++++++++++++++++++++++----------------- 1 file changed, 162 insertions(+), 114 deletions(-) diff --git a/snippets/snippets.json b/snippets/snippets.json index 5ab610f..c77db21 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -3,30 +3,30 @@ // BASIC ES7 JS "import": { "prefix": "imp", - "body": "import ${2:moduleName} from '${1:module}';$0" + "body": "import ${2:moduleName} from '${1:module}'$0" }, "importNoModuleName": { "prefix": "imn", - "body": "import '${1:module}';$0" + "body": "import '${1:module}'$0" }, "importDestructing": { "prefix": "imd", - "body": "import { $2 } from '${1:module}';$0" + "body": "import { $2 } from '${1:module}'$0" }, "importEverything": { "prefix": "ime", - "body": "import * as ${2:alias} from '${1:module}';$0" + "body": "import * as ${2:alias} from '${1:module}'$0" }, "importAs": { "prefix": "ima", - "body": "import { ${2:originalName} as ${3:alias} } from '${1:module}';$0" + "body": "import { ${2:originalName} as ${3:alias} } from '${1:module}'$0" }, "exportNamedFunction": { "prefix": "enf", "body": [ "export const ${1:functionName} = (${2:params}) => {", " $0", - "};", + "}", "" ], "description": "Export named function in ES7 syntax" @@ -36,7 +36,7 @@ "body": [ "export default (${1:params}) => {", " $0", - "};", + "}", "" ], "description": "Export default function in ES7 syntax" @@ -55,7 +55,7 @@ "prefix": "pge", "body": [ "get ${1:propertyName} = () => {", - " return this.${0};", + " return this.${0}", "}", "" ], @@ -65,7 +65,7 @@ "prefix": "pse", "body": [ "set ${1:propertyName} = (${2:value}) => {", - " ${0};", + " ${0}", "}", "" ], @@ -76,7 +76,7 @@ "body": [ "${1:array}.forEach(${2:currentItem} => {", " ${0}", - "});", + "})", "" ], "description": "Creates a forEach statement in ES7 syntax" @@ -123,12 +123,12 @@ }, "destructingObject": { "prefix": "dob", - "body": "const {${1:propertyName}} = ${2:objectToDestruct};", + "body": "const {${1:propertyName}} = ${2:objectToDestruct}", "description": "Creates and assigns a local variable using object destructing" }, "destructingArray": { "prefix": "dar", - "body": "const [${1:propertyName}] = ${2:arrayToDestruct};", + "body": "const [${1:propertyName}] = ${2:arrayToDestruct}", "description": "Creates and assigns a local variable using array destructing" }, "setInterval": { @@ -136,7 +136,7 @@ "body": [ "setInterval(() => {", " ${2}", - "}, ${0:intervalInms});", + "}, ${0:intervalInms})", "" ], "description": "Executes the given function at specified intervals in ES7 syntax" @@ -146,7 +146,7 @@ "body": [ "setTimeout(() => {", " ${2}", - "}, ${1:delayInms});", + "}, ${1:delayInms})", "" ], "description": "Executes the given function after the specified delay in ES7 syntax" @@ -156,64 +156,64 @@ "body": [ "return new Promise((resolve, reject) => {", " ${1}", - "});", + "})", "" ], "description": "Creates and returns a new Promise in the standard ES7 syntax" }, "consoleAssert": { "prefix": "cas", - "body": "console.assert(${1:expression}, ${2:object});", + "body": "console.assert(${1:expression}, ${2:object})", "description": "If the specified expression is false, the message is written to the console along with a stack trace" }, "consoleClear": { "prefix": "ccl", - "body": "console.clear();", + "body": "console.clear()", "description": "Clears the console" }, "consoleCount": { "prefix": "cco", - "body": "console.count(${1:label});", + "body": "console.count(${1:label})", "description": "Writes the the number of times that count() has been invoked at the same line and with the same label" }, "consoleDir": { "prefix": "cdi", - "body": "console.dir(${1:object});", + "body": "console.dir(${1:object})", "description": "Prints a JavaScript representation of the specified object" }, "consoleError": { "prefix": "cer", - "body": "console.error(${1:object});", + "body": "console.error(${1:object})", "description": "Displays a message in the console and also includes a stack trace from where the method was called" }, "consoleGroup": { "prefix": "cgr", - "body": "console.group(\"${1:label}\");", + "body": "console.group(\"${1:label}\")", "description": "Groups and indents all following output by an additional level, until console.groupEnd() is called." }, "consoleGroupEnd": { "prefix": "cge", - "body": "console.groupEnd();", + "body": "console.groupEnd()", "description": "Closes out the corresponding console.group()." }, "consoleLog": { "prefix": "clg", - "body": "console.log(${1:object});", + "body": "console.log(${1:object})", "description": "Displays a message in the console" }, "consoleTrace": { "prefix": "ctr", - "body": "console.trace(${1:object});", + "body": "console.trace(${1:object})", "description": "Prints a stack trace from the point where the method was called" }, "consoleWarn": { "prefix": "cwa", - "body": "console.warn(${1:object});", + "body": "console.warn(${1:object})", "description": "Displays a message in the console but also displays a yellow warning icon along with the logged message" }, "consoleInfo": { "prefix": "cin", - "body": "console.info(${1:object});", + "body": "console.info(${1:object})", "description": "Displays a message in the console but also displays a blue information icon along with the logged message" }, // ========================================================================================================================== @@ -221,52 +221,52 @@ "import React": { "prefix": "imr", "body": [ - "import React from 'react';", + "import React from 'react'", "" ] }, "import React, { Component }": { "prefix": "imrc", "body": [ - "import React, { Component } from 'react';", + "import React, { Component } from 'react'", "" ] }, "import React, { Component } & PropTypes": { "prefix": "imrcp", "body": [ - "import React, { Component } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { Component } from 'react'", + "import PropTypes from 'prop-types'", "" ] }, "import React, { PureComponent }": { "prefix": "imrpc", "body": [ - "import React, { PureComponent } from 'react';", + "import React, { PureComponent } from 'react'", "" ] }, "import React, { PureComponent } & PropTypes": { "prefix": "imrpcp", "body": [ - "import React, { PureComponent } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { PureComponent } from 'react'", + "import PropTypes from 'prop-types'", "" ] }, "import redux statement": { "prefix": "redux", "body": [ - "import { connect } from 'react-redux';", - "import { bindActionCreators } from 'redux';", + "import { connect } from 'react-redux'", + "import { bindActionCreators } from 'redux'", "" ] }, "reactClassCompoment": { "prefix": "rcc", "body": [ - "import React, { Component } from 'react';", + "import React, { Component } from 'react'", "", "export default class ${1:componentName} extends Component {", " render() {", @@ -274,7 +274,7 @@ "
", " $0", "
", - " );", + " )", " }", "}", "" @@ -284,7 +284,7 @@ "reactClassExportComponent": { "prefix": "rce", "body": [ - "import React, { Component } from 'react';", + "import React, { Component } from 'react'", "", "export class ${1:componentName} extends Component {", " render() {", @@ -292,20 +292,56 @@ "
", " $0", "
", - " );", + " )", " }", "}", "", - "export default ${1:componentName};", + "export default ${1:componentName}", "" ], "description": "Creates a React component class with ES7 module system" }, + "reactFunctionalExportComponent": { + "prefix": "rfe", + "body": [ + "import React from 'react'", + "function ${1:componentName} () {", + " return (", + "
", + " $0", + "
", + " )", + "}", + "export default ${1:componentName}", + "" + ], + "description": "Creates a React Functional Component with ES7 module system" + }, + "reactFunctionalExportComponentWithPropTypes": { + "prefix": "rfep", + "body": [ + "import React from 'react'", + "import PropTypes from 'prop-types'", + "${1:componentName}.propTypes = {", + "", + "}", + "function ${1:componentName} () {", + " return (", + "
", + " $0", + "
", + " )", + "}", + "export default ${1:componentName}", + "" + ], + "description": "Creates a React Functional Component with ES7 module system" + }, "reactClassExportComponentWithPropTypes": { "prefix": "rcep", "body": [ - "import React, { Component } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { Component } from 'react'", + "import PropTypes from 'prop-types'", "", "export class ${1:componentName} extends Component {", " static propTypes = {", @@ -317,11 +353,11 @@ "
", " $0", "
", - " );", + " )", " }", "}", "", - "export default ${1:componentName};", + "export default ${1:componentName}", "" ], "description": "Creates a React component class with ES7 module system" @@ -329,7 +365,7 @@ "reactClassPureComponent": { "prefix": "rpc", "body": [ - "import React, { PureComponent } from 'react';", + "import React, { PureComponent } from 'react'", "", "export default class ${1:componentName} extends PureComponent {", " render() {", @@ -337,9 +373,9 @@ "
", " $0", "
", - " );", + " )", " }", - "};", + "}", "" ], "description": "Creates a React component class with ES7 module system" @@ -347,8 +383,8 @@ "reactClassPureComponentWithPropTypes": { "prefix": "rpcp", "body": [ - "import React, { PureComponent } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { PureComponent } from 'react'", + "import PropTypes from 'prop-types'", "", "export default class ${1:componentName} extends PureComponent {", " static propTypes = {", @@ -360,9 +396,9 @@ "
", " $0", "
", - " );", + " )", " }", - "};", + "}", "" ], "description": "Creates a React component class with ES7 module system" @@ -370,8 +406,8 @@ "reactClassCompomentPropTypes": { "prefix": "rccp", "body": [ - "import React, { Component } from 'react';", - "import PropTypes from 'prop-types';", + "import React, { Component } from 'react'", + "import PropTypes from 'prop-types'", "", "export default class ${1:componentName} extends Component {", " static propTypes = {", @@ -383,7 +419,7 @@ "
", " $0", "
", - " );", + " )", " }", "}", "" @@ -393,10 +429,10 @@ "reactClassCompomentRedux": { "prefix": "rcredux", "body": [ - "import React, { Component } from 'react';", - "import PropTypes from 'prop-types';", - "import { connect } from 'react-redux';", - "import { bindActionCreators } from 'redux';", + "import React, { Component } from 'react'", + "import PropTypes from 'prop-types'", + "import { connect } from 'react-redux'", + "import { bindActionCreators } from 'redux'", "", "export class ${1:componentName} extends Component {", " static propTypes = {", @@ -408,19 +444,19 @@ "
", " $0", "
", - " );", + " )", " }", "}", "", "const mapStateToProps = (state) => ({", " ", - "});", + "})", "", "const mapDispatchToProps = (dispatch) => bindActionCreators({", " ", - "}, dispatch);", + "}, dispatch)", "", - "export default connect(mapStateToProps, mapDispatchToProps)(${1:componentName});", + "export default connect(mapStateToProps, mapDispatchToProps)(${1:componentName})", "" ], "description": "Creates a React component class with PropTypes with connected redux and ES7 module system" @@ -430,11 +466,11 @@ "body": [ "const mapStateToProps = (state) => ({", " ${1}", - "});", + "})", "", "const mapDispatchToProps = (dispatch) => bindActionCreators({", " ", - "}, dispatch);", + "}, dispatch)", "" ] }, @@ -442,7 +478,7 @@ "prefix": "rconst", "body": [ "constructor(props) {", - " super(props);", + " super(props)", "", " this.state = {", " $0", @@ -450,14 +486,14 @@ "}", "" ], - "description": "Adds a default constructor for it('', () => {});the class that contains props as arguments" + "description": "Adds a default constructor for it('', () => {})the class that contains props as arguments" }, "emptyState": { "prefix": "est", "body": [ "this.state = {", " $1", - "};", + "}", "" ], "description": "Creates empty state object. To be used in a constructor." @@ -540,20 +576,20 @@ "
", " $0", "
", - " );", + " )", "}" ], "description": "Basic render." }, "componentSetStateObject": { "prefix": "sst", - "body": "this.setState({$0});", + "body": "this.setState({$0})", "description": "Performs a shallow merge of nextState into current state" }, "componentSetStateFunc": { "prefix": "ssf", "body": [ - "this.setState((state, props) => { return { $0 }});", + "this.setState((state, props) => { return { $0 }})", "" ], "description": "Performs a shallow merge of nextState into current state" @@ -575,7 +611,7 @@ "export const ${1:actionName} = (${2:param}) => ({", " type: ${3:type},", " payload: ${4:payload}", - "});", + "})", "" ] }, @@ -588,18 +624,18 @@ "body": [ "const initialState = {", "", - "};", + "}", "", "export default (state = initialState, action) => {", " switch (action.type) {", "", " case ${1:typeName}:", - " return { ...state };", + " return { ...state }", "", " default:", - " return state;", + " return state", " }", - "};", + "}", "" ] }, @@ -617,8 +653,8 @@ "reactNativeComponent": { "prefix": "rnc", "body": [ - "import React, { Component } from 'react';", - "import { Text, View } from 'react-native';", + "import React, { Component } from 'react'", + "import { Text, View } from 'react-native'", "", "export default class ${1:componentName} extends Component {", " render() {", @@ -626,7 +662,7 @@ " ", " ${2:textInComponent} ", " ", - " );", + " )", " }", "}" ] @@ -634,8 +670,8 @@ "reactNativeComponentExport": { "prefix": "rnce", "body": [ - "import React, { Component } from 'react';", - "import { Text, View } from 'react-native';", + "import React, { Component } from 'react'", + "import { Text, View } from 'react-native'", "", "export class ${1:componentName} extends Component {", " render() {", @@ -643,11 +679,11 @@ " ", " ${2:textInComponent} ", " ", - " );", + " )", " }", "}", "", - "export default ${1:componentName};" + "export default ${1:componentName}" ] }, "reactNativeImport": { @@ -813,13 +849,25 @@ "description": "An object taking on a particular shape required" }, // ========================================================================================================================== + // Comments + "Comment Big Block": { + "prefix": "cmmb", + "body": [ + "/**", + "|--------------------------------------------------", + "| $1", + "|--------------------------------------------------", + "*/" + ] + }, + // ========================================================================================================================== // Others "describeBlock": { "prefix": "desc", "body": [ "describe('$1', () => {", " $0", - "});", + "})", "" ], "description": "Testing `describe` block" @@ -829,7 +877,7 @@ "body": [ "test('should $1', () => {", " $0", - "});", + "})", "" ], "description": "Testing `test` block" @@ -839,7 +887,7 @@ "body": [ "it('should $1', () => {", " $0", - "});", + "})", "" ], "description": "Testing `it` block" @@ -847,38 +895,38 @@ "setupTest": { "prefix": "stest", "body": [ - "import { ${1:ComponentName}, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}';", + "import { ${1:ComponentName}, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'", "", "describe('<${1:ComponentName} />', () => {", " const defaultProps = {", "", - " };", + " }", "", - " const setup = buildSetup(${1:ComponentName}, defaultProps);", + " const setup = buildSetup(${1:ComponentName}, defaultProps)", "", " test('render', () => {", - " expect(setup().wrapper).toMatchSnapshot();", - " });", - "});", + " expect(setup().wrapper).toMatchSnapshot()", + " })", + "})", "" ] }, "setupTestWithEnzymeToJson": { "prefix": "sjtest", "body": [ - "import toJson from 'enzyme-to-json';", - "import { ${1:ComponentName}, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}';", + "import toJson from 'enzyme-to-json'", + "import { ${1:ComponentName}, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'", "", "describe('<${1:ComponentName} />', () => {", " const defaultProps = {", "", - " };", + " }", "", - " const setup = buildSetup(${1:ComponentName}, defaultProps);", + " const setup = buildSetup(${1:ComponentName}, defaultProps)", "", " test('render', () => {", - " expect(toJson(setup().wrapper)).toMatchSnapshot();", - " });", + " expect(toJson(setup().wrapper)).toMatchSnapshot()", + " })", "})", "" ] @@ -886,46 +934,46 @@ "hocComponentWithRedux": { "prefix": "hocredux", "body": [ - "import React from 'react';", - "import PropTypes from 'prop-types';", - "import { connect } from 'react-redux';", - "import { bindActionCreators } from 'redux';", + "import React from 'react'", + "import PropTypes from 'prop-types'", + "import { connect } from 'react-redux'", + "import { bindActionCreators } from 'redux'", "", "export const mapStateToProps = state => ({", "", - "});", + "})", "", "export const mapDispatchToProps = dispatch => bindActionCreators({", "", - "}, dispatch);", + "}, dispatch)", "", "export const ${1:hocComponentName} = (WrappedComponent) => {", - " const hocComponent = ({ ...props }) => ;", + " const hocComponent = ({ ...props }) => ", "", " hocComponent.propTypes = {", - " };", + " }", "", - " return hocComponent;", - "};", + " return hocComponent", + "}", "", - "export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent));", + "export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))", "" ] }, "hocComponent": { "prefix": "hoc", "body": [ - "import React from 'react';", - "import PropTypes from 'prop-types';", + "import React from 'react'", + "import PropTypes from 'prop-types'", "", "export default (WrappedComponent) => {", - " const hocComponent = ({ ...props }) => ;", + " const hocComponent = ({ ...props }) => ", "", " hocComponent.propTypes = {", - " };", + " }", "", - " return hocComponent;", - "};", + " return hocComponent", + "}", "" ] } From e49407dbb386087fe0727f8ce415d8559d3faaa9 Mon Sep 17 00:00:00 2001 From: Sven Date: Sat, 26 Aug 2017 03:57:49 +0800 Subject: [PATCH 2/8] add space before function parentheses --- snippets/snippets.json | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/snippets/snippets.json b/snippets/snippets.json index c77db21..e93195e 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -269,7 +269,7 @@ "import React, { Component } from 'react'", "", "export default class ${1:componentName} extends Component {", - " render() {", + " render () {", " return (", "
", " $0", @@ -287,7 +287,7 @@ "import React, { Component } from 'react'", "", "export class ${1:componentName} extends Component {", - " render() {", + " render () {", " return (", "
", " $0", @@ -348,7 +348,7 @@ "", " }", "", - " render() {", + " render () {", " return (", "
", " $0", @@ -368,7 +368,7 @@ "import React, { PureComponent } from 'react'", "", "export default class ${1:componentName} extends PureComponent {", - " render() {", + " render () {", " return (", "
", " $0", @@ -391,7 +391,7 @@ "", " }", "", - " render() {", + " render () {", " return (", "
", " $0", @@ -414,7 +414,7 @@ " ${2:prop}: ${3:PropTypes}", " }", "", - " render() {", + " render () {", " return (", "
", " $0", @@ -439,7 +439,7 @@ " ${2:prop}: ${3:PropTypes}", " }", "", - " render() {", + " render () {", " return (", "
", " $0", @@ -571,7 +571,7 @@ "componentRender": { "prefix": "ren", "body": [ - "render() {", + "render () {", " return (", "
", " $0", @@ -657,7 +657,7 @@ "import { Text, View } from 'react-native'", "", "export default class ${1:componentName} extends Component {", - " render() {", + " render () {", " return (", " ", " ${2:textInComponent} ", @@ -674,7 +674,7 @@ "import { Text, View } from 'react-native'", "", "export class ${1:componentName} extends Component {", - " render() {", + " render () {", " return (", " ", " ${2:textInComponent} ", From d5c1054b57f9b7eefabb8adc2bac5e309b20fcf9 Mon Sep 17 00:00:00 2001 From: Sven Date: Sat, 26 Aug 2017 04:25:30 +0800 Subject: [PATCH 3/8] change mapDispatchToProps --- snippets/snippets.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/snippets/snippets.json b/snippets/snippets.json index e93195e..fc00da2 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -452,9 +452,9 @@ " ", "})", "", - "const mapDispatchToProps = (dispatch) => bindActionCreators({", + "const mapDispatchToProps = {", " ", - "}, dispatch)", + "}", "", "export default connect(mapStateToProps, mapDispatchToProps)(${1:componentName})", "" @@ -468,9 +468,9 @@ " ${1}", "})", "", - "const mapDispatchToProps = (dispatch) => bindActionCreators({", + "const mapDispatchToProps = {", " ", - "}, dispatch)", + "}", "" ] }, @@ -943,9 +943,9 @@ "", "})", "", - "export const mapDispatchToProps = dispatch => bindActionCreators({", - "", - "}, dispatch)", + "export const mapDispatchToProps = {", + " ", + "}", "", "export const ${1:hocComponentName} = (WrappedComponent) => {", " const hocComponent = ({ ...props }) => ", From e2f84679f7be92bf85027c3f3fca87528cde0869 Mon Sep 17 00:00:00 2001 From: Sven Date: Sat, 26 Aug 2017 04:29:00 +0800 Subject: [PATCH 4/8] delet bindActionCreator --- snippets/snippets.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/snippets/snippets.json b/snippets/snippets.json index fc00da2..a3ee9f0 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -259,7 +259,6 @@ "prefix": "redux", "body": [ "import { connect } from 'react-redux'", - "import { bindActionCreators } from 'redux'", "" ] }, @@ -432,7 +431,6 @@ "import React, { Component } from 'react'", "import PropTypes from 'prop-types'", "import { connect } from 'react-redux'", - "import { bindActionCreators } from 'redux'", "", "export class ${1:componentName} extends Component {", " static propTypes = {", @@ -937,7 +935,6 @@ "import React from 'react'", "import PropTypes from 'prop-types'", "import { connect } from 'react-redux'", - "import { bindActionCreators } from 'redux'", "", "export const mapStateToProps = state => ({", "", From abf7959e1fb806a970ce661db9016102cd613673 Mon Sep 17 00:00:00 2001 From: Sven Date: Sat, 26 Aug 2017 04:52:31 +0800 Subject: [PATCH 5/8] update readme.md --- README.md | 245 +++++++++++++++++++++++++++++++----------------------- 1 file changed, 140 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index ccc2f91..01e0d21 100644 --- a/README.md +++ b/README.md @@ -9,14 +9,17 @@ This extension provide you Javascript and React/Redux snippets in ES7 with babel Here is direct link to marketplace [ES7 React/Redux/React-Native/JS Snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) ## Supported languages (file extensions) + * JavaScript (.js) * JavaScript React (.jsx) ## Snippets info + Every space inside `{ }` and `( )` means that this is pushed into next line :) `$` represent each step after `tab`. -# Basic Methods +## Basic Methods + |Prefix|Method| |-------:|-------| |`imp→`|`import moduleName from 'module'`| @@ -38,15 +41,16 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`sto→`|`setTimeout(() => { }, delayTime`| |`prom→`|`return new Promise((resolve, reject) => { }`| -# React +## React + |Prefix|Method| |-------:|-------| |`imr→`|`import React from 'react'`| |`imrc→`|`import React, { Component } from 'react'`| |`imrcp→`|`import React, { Component } from 'react' & import PropTypes from 'prop-types'`| -|`imrpc→`|`import React, { PureComponent } from 'react';`| +|`imrpc→`|`import React, { PureComponent } from 'react'`| |`imrpcp→`|`import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'`| -|`redux`|`import { connect } from 'react-redux' & import { bindActionCreators } from 'redux'`| +|`redux`|`import { connect } from 'react-redux'| |`rconst→`|`constructor(props) with this.state`| |`rconc→`|`constructor(props, context) with this.state`| |`est→`|`this.state = { }`| @@ -57,18 +61,20 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`cwup→`|`componentWillUpdate = (nextProps, nextState) => { }`| |`cdup→`|`componentDidUpdate = (prevProps, prevState) => { }`| |`cwun→`|`componentWillUnmount = () => { }`| -|`ren→`|`render() { return( ) }`| +|`ren→`|`render () { return( ) }`| |`sst→`|`this.setState({ })`| |`ssf→`|`this.setState((state, props) => return { })`| |`props→`|`this.props.propName`| |`state→`|`this.state.stateName`| -# React Native +## React Native + |Prefix|Method| |-------:|-------| |`imrn→`|`import { $1 } from 'react-native'`| -# Redux +## Redux + |Prefix|Method| |-------:|-------| |`rxaction→`|`redux action template`| @@ -76,7 +82,8 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`rxreducer→`|`redux reducer template`| |`rxselect→`|`redux selector template`| -# PropTypes +## PropTypes + |Prefix|Method| |-------:|-------| |`pta→`|`PropTypes.array`| @@ -109,6 +116,7 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`ptshr→`|`PropTypes.shape({ }).isRequired`| # Console + |Prefix|Method| |-------:|-------| |`clg→`|`console.log(object)`| @@ -123,278 +131,305 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`cwa→`|`console.warn`| |`cin→`|`console.info`| -# React Components -## `rcc` +## React Components + +### `rcc` + ```javascript -import React, { Component } from 'react'; +import React, { Component } from 'react' export default class $1 extends Component { - render() { + render () { return (
$2
- ); + ) } } ``` -## `rce` + +### `rce` + ```javascript -import React, { Component } from 'react'; +import React, { Component } from 'react' export class $1 extends Component { - render() { + render () { return (
$2
- ); + ) } } -export default $1; +export default $1 ``` -## `rcep` + +### `rcep` + ```javascript -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' export class $1 extends Component { static propTypes = { } - render() { + render () { return (
$2
- ); + ) } } -export default $1; +export default $1 ``` -## `rpc` + +### `rpc` + ```javascript -import React, { PureComponent } from 'react'; +import React, { PureComponent } from 'react' export default class $1 extends PureComponent { - render() { + render () { return (
$2
- ); + ) } } ``` -## `rpcp` + +### `rpcp` + ```javascript -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' export default class $1 extends PureComponent { static propTypes = { } - render() { + render () { return (
$2
- ); + ) } } ``` -## `rccp` + +### `rccp` + ```javascript -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' export default class $1 extends Component { static propTypes = { $2: $3 } - render() { + render () { return (
$4
- ); + ) } } ``` -## `rcredux` + +### `rcredux` + ```javascript -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' export class $1 extends Component { static propTypes = { $2: $3 } - render() { + render () { return (
$4
- ); + ) } } const mapStateToProps = (state) => ({ -}); +}) -const mapDispatchToProps = (dispatch) => bindActionCreators({ +const mapDispatchToProps = { -}, dispatch); +} -export default connect(mapStateToProps, mapDispatchToProps)($1); +export default connect(mapStateToProps, mapDispatchToProps)($1) ``` -## `reduxmap` + +### `reduxmap` + ```javascript const mapStateToProps = (state) => ({ -}); +}) -const mapDispatchToProps = (dispatch) => bindActionCreators({ +const mapDispatchToProps = { -}, dispatch); +} ``` -# React Native Components -## `rnc` +## React Native Components + +### `rnc` + ```javascript -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; +import React, { Component } from 'react' +import { Text, View } from 'react-native' export default class $1 extends Component { - render() { + render () { return ( $2 - ); + ) } } ``` -## `rnce` + +### `rnce` + ```javascript -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; +import React, { Component } from 'react' +import { Text, View } from 'react-native' export class $1 extends Component { - render() { + render () { return ( $2 - ); + ) } } export default $1 ``` -# Others -## `desc` +## Others + +### `desc` + ```javascript describe('$1', () => { $2 -}); +}) ``` -## `test` +### `test` ```javascript test('should $1', () => { $2 -}); +}) ``` -## `tit` +### `tit` + ```javascript it('should $1', () => { $2 -}); +}) ``` -## `stest` +### `stest` + ```javascript -import { ${1: ComponentName }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'; +import { ${1: ComponentName }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}' describe('<${1:ComponentName} />', () => { const defaultProps = { - }; + } - const setup = buildSetup(${1: ComponentName }, defaultProps); + const setup = buildSetup(${1: ComponentName }, defaultProps) test('render', () => { - expect(setup().wrapper).toMatchSnapshot(); - }); -}); + expect(setup().wrapper).toMatchSnapshot() + }) +}) ``` -## `sjtest` + +### `sjtest` + ```javascript -import toJson from 'enzyme-to-json'; -import { ${1:ComponentName} }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}'; +import toJson from 'enzyme-to-json' +import { ${1:ComponentName} }, mapStateToProps, mapDispatchToProps } from '${2:path}/${1:ComponentName}' describe('<${1:ComponentName} />', () => { const defaultProps = { - }; + } - const setup = buildSetup(${1: ComponentName }, defaultProps); + const setup = buildSetup(${1: ComponentName }, defaultProps) test('render', () => { - expect(toJson(setup().wrapper)).toMatchSnapshot(); - }); + expect(toJson(setup().wrapper)).toMatchSnapshot() + }) }) ``` -## `hocredux` +### `hocredux` + ```javascript -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; +import React from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' export const mapStateToProps = state => ({ -}); +}) -export const mapDispatchToProps = dispatch => bindActionCreators({ +export const mapDispatchToProps = { -}, dispatch); +} export const ${1:hocComponentName} = (WrappedComponent) => { - const hocComponent = ({ ...props }) => ; + const hocComponent = ({ ...props }) => hocComponent.propTypes = { - }; + } - return hocComponent; -}; + return hocComponent +} -export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent)); +export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent)) ``` -## `hoc` + +### `hoc` + ``` javascript -import React from 'react'; -import PropTypes from 'prop-types'; +import React from 'react' +import PropTypes from 'prop-types' export default (WrappedComponent) => { - const hocComponent = ({ ...props }) => ; + const hocComponent = ({ ...props }) => hocComponent.propTypes = { - }; + } - return hocComponent; -}; + return hocComponent +} ``` From 7c424e59493c754abca65538c2d8d1487629553d Mon Sep 17 00:00:00 2001 From: Sven Date: Sat, 26 Aug 2017 11:25:24 +0800 Subject: [PATCH 6/8] update readme.md --- README.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 01e0d21..d664db5 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,7 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`sti→`|`setInterval(() => { }, intervalTime`| |`sto→`|`setTimeout(() => { }, delayTime`| |`prom→`|`return new Promise((resolve, reject) => { }`| +|`cmmb→`|`comment block`| ## React @@ -115,7 +116,7 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`ptsh→`|`PropTypes.shape({ })`| |`ptshr→`|`PropTypes.shape({ }).isRequired`| -# Console +## Console |Prefix|Method| |-------:|-------| @@ -331,6 +332,16 @@ export default $1 ## Others +### `cmmb` + +```JS +/** +|-------------------------------------------------- +| $1 +|-------------------------------------------------- +*/ +``` + ### `desc` ```javascript @@ -340,6 +351,7 @@ describe('$1', () => { ``` ### `test` + ```javascript test('should $1', () => { $2 From 041e48a35e46a4111654f8c0186f0d065f47ae14 Mon Sep 17 00:00:00 2001 From: Sven Date: Sat, 26 Aug 2017 22:44:47 +0800 Subject: [PATCH 7/8] fix space between function and ( --- README.md | 18 +++++++++--------- snippets/snippets.json | 20 ++++++++++++-------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index d664db5..fa0ada0 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) |`cwup→`|`componentWillUpdate = (nextProps, nextState) => { }`| |`cdup→`|`componentDidUpdate = (prevProps, prevState) => { }`| |`cwun→`|`componentWillUnmount = () => { }`| -|`ren→`|`render () { return( ) }`| +|`ren→`|`render() { return( ) }`| |`sst→`|`this.setState({ })`| |`ssf→`|`this.setState((state, props) => return { })`| |`props→`|`this.props.propName`| @@ -140,7 +140,7 @@ Every space inside `{ }` and `( )` means that this is pushed into next line :) import React, { Component } from 'react' export default class $1 extends Component { - render () { + render() { return (
$2 @@ -178,7 +178,7 @@ export class $1 extends Component { } - render () { + render() { return (
$2 @@ -196,7 +196,7 @@ export default $1 import React, { PureComponent } from 'react' export default class $1 extends PureComponent { - render () { + render() { return (
$2 @@ -217,7 +217,7 @@ export default class $1 extends PureComponent { } - render () { + render() { return (
$2 @@ -238,7 +238,7 @@ export default class $1 extends Component { $2: $3 } - render () { + render() { return (
$4 @@ -260,7 +260,7 @@ export class $1 extends Component { $2: $3 } - render () { + render() { return (
$4 @@ -301,7 +301,7 @@ import React, { Component } from 'react' import { Text, View } from 'react-native' export default class $1 extends Component { - render () { + render() { return ( $2 @@ -318,7 +318,7 @@ import React, { Component } from 'react' import { Text, View } from 'react-native' export class $1 extends Component { - render () { + render() { return ( $2 diff --git a/snippets/snippets.json b/snippets/snippets.json index a3ee9f0..2ec8fb0 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -268,7 +268,7 @@ "import React, { Component } from 'react'", "", "export default class ${1:componentName} extends Component {", - " render () {", + " render() {", " return (", "
", " $0", @@ -286,7 +286,7 @@ "import React, { Component } from 'react'", "", "export class ${1:componentName} extends Component {", - " render () {", + " render() {", " return (", "
", " $0", @@ -304,7 +304,8 @@ "prefix": "rfe", "body": [ "import React from 'react'", - "function ${1:componentName} () {", + "", + "function ${1:componentName}() {", " return (", "
", " $0", @@ -321,9 +322,11 @@ "body": [ "import React from 'react'", "import PropTypes from 'prop-types'", + "", "${1:componentName}.propTypes = {", "", "}", + "", "function ${1:componentName} () {", " return (", "
", @@ -331,6 +334,7 @@ "
", " )", "}", + "", "export default ${1:componentName}", "" ], @@ -347,7 +351,7 @@ "", " }", "", - " render () {", + " render() {", " return (", "
", " $0", @@ -367,7 +371,7 @@ "import React, { PureComponent } from 'react'", "", "export default class ${1:componentName} extends PureComponent {", - " render () {", + " render() {", " return (", "
", " $0", @@ -390,7 +394,7 @@ "", " }", "", - " render () {", + " render() {", " return (", "
", " $0", @@ -413,7 +417,7 @@ " ${2:prop}: ${3:PropTypes}", " }", "", - " render () {", + " render() {", " return (", "
", " $0", @@ -437,7 +441,7 @@ " ${2:prop}: ${3:PropTypes}", " }", "", - " render () {", + " render() {", " return (", "
", " $0", From 9781124c342db5203e85d6bde7e0a07c3adbfd91 Mon Sep 17 00:00:00 2001 From: Sven Date: Sun, 27 Aug 2017 17:57:51 +0800 Subject: [PATCH 8/8] space delete --- README.md | 2 +- snippets/snippets.json | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index fa0ada0..33194f0 100644 --- a/README.md +++ b/README.md @@ -156,7 +156,7 @@ export default class $1 extends Component { import React, { Component } from 'react' export class $1 extends Component { - render () { + render() { return (
$2 diff --git a/snippets/snippets.json b/snippets/snippets.json index 2ec8fb0..72b5dc8 100644 --- a/snippets/snippets.json +++ b/snippets/snippets.json @@ -327,7 +327,7 @@ "", "}", "", - "function ${1:componentName} () {", + "function ${1:componentName}() {", " return (", "
", " $0", @@ -573,7 +573,7 @@ "componentRender": { "prefix": "ren", "body": [ - "render () {", + "render() {", " return (", "
", " $0", @@ -659,7 +659,7 @@ "import { Text, View } from 'react-native'", "", "export default class ${1:componentName} extends Component {", - " render () {", + " render() {", " return (", " ", " ${2:textInComponent} ", @@ -676,7 +676,7 @@ "import { Text, View } from 'react-native'", "", "export class ${1:componentName} extends Component {", - " render () {", + " render() {", " return (", " ", " ${2:textInComponent} ",