diff --git a/snippets/javascript/react-es7.json b/snippets/javascript/react-es7.json
index ee54f252..0bdb4a25 100644
--- a/snippets/javascript/react-es7.json
+++ b/snippets/javascript/react-es7.json
@@ -11,7 +11,7 @@
"prefix": "tsrcc",
"description": "Creates a React component class with ES7 module system and TypeScript interfaces",
"body": [
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"type Props = {}",
"",
@@ -31,7 +31,7 @@
"typescriptReactClassExportComponent": {
"prefix": "tsrce",
"body": [
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"type Props = {}",
"",
@@ -54,8 +54,7 @@
"typescriptReactFunctionalExportComponent": {
"prefix": "tsrfce",
"body": [
- "import React from 'react'",
- "",
+
"type Props = {}",
"",
"function ${1:${TM_FILENAME_BASE}}({}: Props) {",
@@ -71,8 +70,7 @@
"typescriptReactFunctionalComponent": {
"prefix": "tsrfc",
"body": [
- "import React from 'react'",
- "",
+
"type Props = {}",
"",
"export default function ${1:${TM_FILENAME_BASE}}({}: Props) {",
@@ -86,8 +84,7 @@
"typescriptReactArrowFunctionExportComponent": {
"prefix": "tsrafce",
"body": [
- "import React from 'react'",
- "",
+
"type Props = {}",
"",
"const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
@@ -103,8 +100,7 @@
"typescriptReactArrowFunctionComponent": {
"prefix": "tsrafc",
"body": [
- "import React from 'react'",
- "",
+
"type Props = {}",
"",
"const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
@@ -118,7 +114,7 @@
"typescriptReactClassPureComponent": {
"prefix": "tsrpc",
"body": [
- "import React, { PureComponent } from 'react'",
+ "import { PureComponent } from 'react'",
"",
"type Props = {}",
"",
@@ -135,7 +131,7 @@
"typescriptReactClassExportPureComponent": {
"prefix": "tsrpce",
"body": [
- "import React, { PureComponent } from 'react'",
+ "import { PureComponent } from 'react'",
"",
"type Props = {}",
"",
@@ -155,7 +151,7 @@
"prefix": "tsrcredux",
"body": [
"import { connect } from 'react-redux'",
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"type Props = {}",
"",
@@ -183,8 +179,7 @@
"prefix": "tsrnf",
"body": [
"import { View, Text } from 'react-native'",
- "import React from 'react'",
- "",
+
"type Props = {}",
"",
"const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
@@ -203,8 +198,7 @@
"prefix": "tsrnfs",
"body": [
"import { StyleSheet, Text, View } from 'react-native'",
- "import React from 'react'",
- "",
+
"type Props = {}",
"",
"const ${1:${TM_FILENAME_BASE}} = (props: Props) => {",
@@ -224,8 +218,7 @@
"reactArrowFunctionComponent": {
"prefix": "rafc",
"body": [
- "import React from 'react'",
- "",
+
"export const ${1:${TM_FILENAME_BASE}} = () => {",
" return (",
"
${1:first}
",
@@ -238,7 +231,7 @@
"reactArrowFunctionComponentWithPropTypes": {
"prefix": "rafcp",
"body": [
- "import React from 'react'",
+
"import PropTypes from 'prop-types'",
"",
"const ${1:${TM_FILENAME_BASE}} = props => {",
@@ -256,8 +249,7 @@
"reactArrowFunctionExportComponent": {
"prefix": "rafce",
"body": [
- "import React from 'react'",
- "",
+
"const ${1:${TM_FILENAME_BASE}} = () => {",
" return (",
" ${1:first}
",
@@ -271,7 +263,7 @@
"reactClassComponent": {
"prefix": "rcc",
"body": [
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends Component {",
" render() {",
@@ -288,7 +280,7 @@
"prefix": "rccp",
"body": [
"import PropTypes from 'prop-types'",
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends Component {",
" static propTypes = {${2:second}: ${3:third}}",
@@ -306,7 +298,7 @@
"reactClassComponentRedux": {
"prefix": "rcredux",
"body": [
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"import { connect } from 'react-redux'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
@@ -329,7 +321,7 @@
"prefix": "rcreduxp",
"body": [
"import PropTypes from 'prop-types'",
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"import { connect } from 'react-redux'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
@@ -355,7 +347,7 @@
"reactClassExportComponent": {
"prefix": "rce",
"body": [
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
" render() {",
@@ -373,7 +365,7 @@
"prefix": "rcep",
"body": [
"import PropTypes from 'prop-types'",
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
" static propTypes = {}",
@@ -392,7 +384,7 @@
"reactClassExportPureComponent": {
"prefix": "rpce",
"body": [
- "import React, { PureComponent } from 'react'",
+ "import { PureComponent } from 'react'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
" render() {",
@@ -409,7 +401,7 @@
"reactClassPureComponent": {
"prefix": "rpc",
"body": [
- "import React, { PureComponent } from 'react'",
+ "import { PureComponent } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
" render() {",
@@ -426,7 +418,7 @@
"prefix": "rpcp",
"body": [
"import PropTypes from 'prop-types'",
- "import React, { PureComponent } from 'react'",
+ "import { PureComponent } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
" static propTypes = {}",
@@ -444,7 +436,7 @@
"reactFunctionMemoComponent": {
"prefix": "rmc",
"body": [
- "import React, { memo } from 'react'",
+ "import { memo } from 'react'",
"",
"const ${1:${TM_FILENAME_BASE}} = memo(() => {",
" return (",
@@ -460,7 +452,7 @@
"prefix": "rmcp",
"body": [
"import PropTypes from 'prop-types'",
- "import React, { memo } from 'react'",
+ "import { memo } from 'react'",
"",
"const ${1:${TM_FILENAME_BASE}} = memo((props) => {",
" return (",
@@ -477,8 +469,7 @@
"reactFunctionalComponent": {
"prefix": "rfc",
"body": [
- "import React from 'react'",
- "",
+
"export default function ${1:${TM_FILENAME_BASE}}() {",
" return (",
" ${1:first}
",
@@ -503,7 +494,7 @@
"reactFunctionalComponentRedux": {
"prefix": "rfcredux",
"body": [
- "import React from 'react'",
+
"import { connect } from 'react-redux'",
"",
"export const ${1:${TM_FILENAME_BASE}} = (props) => {",
@@ -524,7 +515,7 @@
"prefix": "rfcreduxp",
"body": [
"import PropTypes from 'prop-types'",
- "import React from 'react'",
+
"import { connect } from 'react-redux'",
"",
"export const ${1:${TM_FILENAME_BASE}} = (props) => {",
@@ -548,7 +539,7 @@
"reactFunctionalComponentWithPropTypes": {
"prefix": "rfcp",
"body": [
- "import React from 'react'",
+
"import PropTypes from 'prop-types'",
"",
"function ${1:${TM_FILENAME_BASE}}(props) {",
@@ -567,8 +558,7 @@
"reactFunctionalExportComponent": {
"prefix": "rfce",
"body": [
- "import React from 'react'",
- "",
+
"function ${1:${TM_FILENAME_BASE}}() {",
" return (",
" ${1:first}
",
@@ -775,36 +765,36 @@
},
"importReactWithComponent": {
"prefix": "imrc",
- "body": ["import React, { Component } from 'react'"]
+ "body": ["import { Component } from 'react'"]
},
"importReactWithComponentAndPropTypes": {
"prefix": "imrcp",
"body": [
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"import PropTypes from 'prop-types'",
""
]
},
"importReactWithMemo": {
"prefix": "imrm",
- "body": ["import React, { memo } from 'react'"]
+ "body": ["import { memo } from 'react'"]
},
"importReactWithMemoAndPropTypes": {
"prefix": "imrmp",
"body": [
- "import React, { memo } from 'react'",
+ "import { memo } from 'react'",
"import PropTypes from 'prop-types'",
""
]
},
"importReactWithPureComponent": {
"prefix": "imrpc",
- "body": ["import React, { PureComponent } from 'react'"]
+ "body": ["import { PureComponent } from 'react'"]
},
"importReactWithPureComponentAndPropTypes": {
"prefix": "imrpcp",
"body": [
- "import React, { PureComponent } from 'react'",
+ "import { PureComponent } from 'react'",
"import PropTypes from 'prop-types'",
""
]
@@ -990,7 +980,7 @@
"prefix": "rnc",
"body": [
"import { Text, View } from 'react-native'",
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends Component {",
" render() {",
@@ -1007,7 +997,7 @@
"prefix": "rnce",
"body": [
"import { Text, View } from 'react-native'",
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
" render() {",
@@ -1026,7 +1016,7 @@
"prefix": "rncs",
"body": [
"import { Text, StyleSheet, View } from 'react-native'",
- "import React, { Component } from 'react'",
+ "import { Component } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends Component {",
" render() {",
@@ -1045,8 +1035,7 @@
"prefix": "rnf",
"body": [
"import { View, Text } from 'react-native'",
- "import React from 'react'",
- "",
+
"export default function ${1:${TM_FILENAME_BASE}}() {",
" return (",
" ",
@@ -1060,8 +1049,7 @@
"prefix": "rnfs",
"body": [
"import { StyleSheet, Text, View } from 'react-native'",
- "import React from 'react'",
- "",
+
"export default function ${1:${TM_FILENAME_BASE}}() {",
" return (",
" ",
@@ -1077,8 +1065,7 @@
"prefix": "rnfe",
"body": [
"import { View, Text } from 'react-native'",
- "import React from 'react'",
- "",
+
"const ${1:${TM_FILENAME_BASE}} = () => {",
" return (",
" ",
@@ -1094,8 +1081,7 @@
"prefix": "rnfes",
"body": [
"import { StyleSheet, Text, View } from 'react-native'",
- "import React from 'react'",
- "",
+
"const ${1:${TM_FILENAME_BASE}} = () => {",
" return (",
" ",
@@ -1117,7 +1103,7 @@
"prefix": "rnpc",
"body": [
"import { Text, View } from 'react-native'",
- "import React, { PureComponent } from 'react'",
+ "import { PureComponent } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
" render() {",
@@ -1134,7 +1120,7 @@
"prefix": "rnpce",
"body": [
"import { Text, View } from 'react-native'",
- "import React, { PureComponent } from 'react'",
+ "import { PureComponent } from 'react'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
" render() {",
@@ -1243,7 +1229,7 @@
"setupReactComponentTestWithRedux": {
"prefix": "srtest",
"body": [
- "import React from 'react'",
+
"import renderer from 'react-test-renderer'",
"import { Provider } from 'react-redux'",
"",
@@ -1269,7 +1255,7 @@
"prefix": "sntest",
"body": [
"import 'react-native'",
- "import React from 'react'",
+
"import renderer from 'react-test-renderer'",
"",
"import ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'",
@@ -1288,7 +1274,7 @@
"prefix": "snrtest",
"body": [
"import 'react-native'",
- "import React from 'react'",
+
"import renderer from 'react-test-renderer'",
"import { Provider } from 'react-redux'",
"",
@@ -1312,7 +1298,7 @@
"setupReactTest": {
"prefix": "stest",
"body": [
- "import React from 'react'",
+
"import renderer from 'react-test-renderer'",
"",
"import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}'",
@@ -1532,7 +1518,7 @@
"hocComponentWithRedux": {
"prefix": "hocredux",
"body": [
- "import React from 'react'",
+
"import { connect } from 'react-redux'",
"import PropTypes from 'prop-types'",
"",
@@ -1555,7 +1541,7 @@
"hocComponent": {
"prefix": "hoc",
"body": [
- "import React from 'react'",
+
"import PropTypes from 'prop-types'",
"",
"export default (WrappedComponent) => {",
diff --git a/snippets/javascript/react-native-ts.json b/snippets/javascript/react-native-ts.json
index aaf0c311..4eae9c11 100644
--- a/snippets/javascript/react-native-ts.json
+++ b/snippets/javascript/react-native-ts.json
@@ -2,7 +2,7 @@
"statefulComponent": {
"prefix": "rnc",
"body": [
- "import React, { Component } from 'react';",
+ "import { Component } from 'react';",
"",
"import { View } from 'react-native';",
"",
@@ -20,8 +20,7 @@
"statelessComponent": {
"prefix": "rnsc",
"body": [
- "import React from 'react';",
- "",
+
"import { View } from 'react-native';",
"",
"// import { Container } from './styles';",
@@ -36,7 +35,7 @@
"componentFunctional": {
"prefix": "rnfc",
"body": [
- "import React from 'react';",
+
"import { View } from 'react-native';",
"",
"// import { Container } from './styles';",
@@ -53,7 +52,7 @@
"componentFunctionalTypescript": {
"prefix": "rnfcc",
"body": [
- "import React from 'react';",
+
"import { View } from 'react-native';",
"",
"// import { Container } from './styles';",
diff --git a/snippets/javascript/react-native.json b/snippets/javascript/react-native.json
index 918183fb..ed2f3531 100644
--- a/snippets/javascript/react-native.json
+++ b/snippets/javascript/react-native.json
@@ -2,7 +2,7 @@
"statefulComponent": {
"prefix": "rnc",
"body": [
- "import React, { Component } from 'react';",
+ "import { Component } from 'react';",
"",
"import { View } from 'react-native';",
"",
@@ -20,7 +20,7 @@
"statefulReduxComponent": {
"prefix": "rnrc",
"body": [
- "import React, { Component } from 'react';",
+ "import { Component } from 'react';",
"",
"import { View } from 'react-native';",
"",
@@ -51,8 +51,7 @@
"statelessComponent": {
"prefix": "rnsc",
"body": [
- "import React from 'react';",
- "",
+
"import { View } from 'react-native';",
"",
"// import { Container } from './styles';",
@@ -67,7 +66,7 @@
"componentFunctional": {
"prefix": "rnfc",
"body": [
- "import React from 'react';",
+
"import { View } from 'react-native';",
"",
"// import { Container } from './styles';",
@@ -84,7 +83,7 @@
"componentFunctionalTypescript": {
"prefix": "rnfcc",
"body": [
- "import React from 'react';",
+
"import { View } from 'react-native';",
"",
"// import { Container } from './styles';",
diff --git a/snippets/javascript/react-ts.json b/snippets/javascript/react-ts.json
index ff02f6b1..372eb6d1 100644
--- a/snippets/javascript/react-ts.json
+++ b/snippets/javascript/react-ts.json
@@ -1,375 +1,375 @@
{
- "destructuring of props": {
- "prefix": "dp",
- "body": ["const { ${1:name} } = this.props"]
- },
- "destructuring of state": {
- "prefix": "ds",
- "body": ["const { ${1:name} } = this.state"]
- },
- "reactClassCompoment": {
- "prefix": "rcc",
- "body": "import React, { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\nexport default ${1}",
- "description": "Creates a React component class"
- },
- "reactJustClassCompoment": {
- "prefix": "rcjc",
- "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n",
- "description": "Creates a React component class"
- },
- "reactClassCompomentPropTypes": {
- "prefix": "rccp",
- "body": "import React, { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
- "description": "Creates a React component class with PropTypes"
- },
- "reactClassCompomentWithMethods": {
- "prefix": "rcfc",
- "body": "import React, { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t\n\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
- "description": "Creates a React component class with PropTypes and all lifecycle methods"
- },
- "reactFunctionComponent": {
- "prefix": "rfc",
- "body": "import React from 'react'\n\nexport const ${TM_FILENAME_BASE} = (props : {}) => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
- "description": "Creates a React functional component without PropTypes"
- },
- "reactFunctionComponentWithEmotion": {
- "prefix": "rfce",
- "body": "import { css } from '@emotion/core'\nimport React from 'react'\n\nexport const ${TM_FILENAME_BASE} = (props: {}) => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
- "description": "Creates a React functional component with emotion import"
- },
- "classConstructor": {
- "prefix": "con",
- "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
- "description": "Adds a default constructor for the class that contains props as arguments"
- },
- "classConstructorContext": {
- "prefix": "conc",
- "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
- "description": "Adds a default constructor for the class that contains props and context as arguments"
- },
- "componentWillMount": {
- "prefix": "cwm",
- "body": "\ncomponentWillMount () {\n\t$0\n}\n",
- "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
- },
- "componentDidMount": {
- "prefix": "cdm",
- "body": "componentDidMount () {\n\t$0\n}\n",
- "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
- },
- "componentWillReceiveProps": {
- "prefix": "cwr",
- "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
- "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
- },
- "componentGetDerivedStateFromProps": {
- "prefix": "cgd",
- "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
- "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
- },
- "shouldComponentUpdate": {
- "prefix": "scu",
- "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
- "description": "Invoked before rendering when new props or state are being received. "
- },
- "componentWillUpdate": {
- "prefix": "cwup",
- "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
- "description": "Invoked immediately before rendering when new props or state are being received."
- },
- "componentDidUpdate": {
- "prefix": "cdup",
- "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
- "description": "Invoked immediately after the component's updates are flushed to the DOM."
- },
- "componentWillUnmount": {
- "prefix": "cwun",
- "body": "componentWillUnmount () {\n\t$0\n}\n",
- "description": "Invoked immediately before a component is unmounted from the DOM."
- },
- "componentRender": {
- "prefix": "ren",
- "body": "render () {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
- "description": "When called, it should examine this.props and this.state and return a single child element."
- },
- "componentSetStateObject": {
- "prefix": "sst",
- "body": "this.setState($0)",
- "description": "Performs a shallow merge of nextState into current state"
- },
- "componentSetStateFunc": {
- "prefix": "ssf",
- "body": "this.setState((state, props) => { return { $0 }})\n",
- "description": "Performs a shallow merge of nextState into current state"
- },
- "componentProps": {
- "prefix": "tp",
- "body": "this.props.$0",
- "description": "Access component's props"
- },
- "componentState": {
- "prefix": "ts",
- "body": "this.state.$0",
- "description": "Access component's state"
- },
- "propTypes": {
- "prefix": "rpt",
- "body": "$1.propTypes = {\n\t$2\n}",
- "description": "Creates empty propTypes declaration"
- },
- "propTypeArray": {
- "prefix": "pta",
- "body": "PropTypes.array,",
- "description": "Array prop type"
- },
- "propTypeArrayRequired": {
- "prefix": "ptar",
- "body": "PropTypes.array.isRequired,",
- "description": "Array prop type required"
- },
- "propTypeBool": {
- "prefix": "ptb",
- "body": "PropTypes.bool,",
- "description": "Bool prop type"
- },
- "propTypeBoolRequired": {
- "prefix": "ptbr",
- "body": "PropTypes.bool.isRequired,",
- "description": "Bool prop type required"
- },
- "propTypeFunc": {
- "prefix": "ptf",
- "body": "PropTypes.func,",
- "description": "Func prop type"
- },
- "propTypeFuncRequired": {
- "prefix": "ptfr",
- "body": "PropTypes.func.isRequired,",
- "description": "Func prop type required"
- },
- "propTypeNumber": {
- "prefix": "ptn",
- "body": "PropTypes.number,",
- "description": "Number prop type"
- },
- "propTypeNumberRequired": {
- "prefix": "ptnr",
- "body": "PropTypes.number.isRequired,",
- "description": "Number prop type required"
- },
- "propTypeObject": {
- "prefix": "pto",
- "body": "PropTypes.object,",
- "description": "Object prop type"
- },
- "propTypeObjectRequired": {
- "prefix": "ptor",
- "body": "PropTypes.object.isRequired,",
- "description": "Object prop type required"
- },
- "propTypeString": {
- "prefix": "pts",
- "body": "PropTypes.string,",
- "description": "String prop type"
- },
- "propTypeStringRequired": {
- "prefix": "ptsr",
- "body": "PropTypes.string.isRequired,",
- "description": "String prop type required"
- },
- "propTypeNode": {
- "prefix": "ptnd",
- "body": "PropTypes.node,",
- "description": "Anything that can be rendered: numbers, strings, elements or an array"
- },
- "propTypeNodeRequired": {
- "prefix": "ptndr",
- "body": "PropTypes.node.isRequired,",
- "description": "Anything that can be rendered: numbers, strings, elements or an array required"
- },
- "propTypeElement": {
- "prefix": "ptel",
- "body": "PropTypes.element,",
- "description": "React element prop type"
- },
- "propTypeElementRequired": {
- "prefix": "ptelr",
- "body": "PropTypes.element.isRequired,",
- "description": "React element prop type required"
- },
- "propTypeInstanceOf": {
- "prefix": "pti",
- "body": "PropTypes.instanceOf($0),",
- "description": "Is an instance of a class prop type"
- },
- "propTypeInstanceOfRequired": {
- "prefix": "ptir",
- "body": "PropTypes.instanceOf($0).isRequired,",
- "description": "Is an instance of a class prop type required"
- },
- "propTypeEnum": {
- "prefix": "pte",
- "body": "PropTypes.oneOf(['$0']),",
- "description": "Prop type limited to specific values by treating it as an enum"
- },
- "propTypeEnumRequired": {
- "prefix": "pter",
- "body": "PropTypes.oneOf(['$0']).isRequired,",
- "description": "Prop type limited to specific values by treating it as an enum required"
- },
- "propTypeOneOfType": {
- "prefix": "ptet",
- "body": "PropTypes.oneOfType([\n\t$0\n]),",
- "description": "An object that could be one of many types"
- },
- "propTypeOneOfTypeRequired": {
- "prefix": "ptetr",
- "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
- "description": "An object that could be one of many types required"
- },
- "propTypeArrayOf": {
- "prefix": "ptao",
- "body": "PropTypes.arrayOf($0),",
- "description": "An array of a certain type"
- },
- "propTypeArrayOfRequired": {
- "prefix": "ptaor",
- "body": "PropTypes.arrayOf($0).isRequired,",
- "description": "An array of a certain type required"
- },
- "propTypeObjectOf": {
- "prefix": "ptoo",
- "body": "PropTypes.objectOf($0),",
- "description": "An object with property values of a certain type"
- },
- "propTypeObjectOfRequired": {
- "prefix": "ptoor",
- "body": "PropTypes.objectOf($0).isRequired,",
- "description": "An object with property values of a certain type required"
- },
- "propTypeShape": {
- "prefix": "ptsh",
- "body": "PropTypes.shape({\n\t$0\n}),",
- "description": "An object taking on a particular shape"
- },
- "propTypeShapeRequired": {
- "prefix": "ptshr",
- "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
- "description": "An object taking on a particular shape required"
- },
- "jsx element": {
- "prefix": "j",
- "body": "<${1:elementName}>\n\t$0\n${1}>",
- "description": "an element"
- },
- "jsx element self closed": {
- "prefix": "jc",
- "body": "<${1:elementName} />",
- "description": "an element self closed"
- },
- "jsx elements map": {
- "prefix": "jm",
- "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n${2}>)}",
- "description": "an element self closed"
- },
- "jsx elements map with return": {
- "prefix": "jmr",
- "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n${2}>\n})}",
- "description": "an element self closed"
- },
- "jsx element wrap selection": {
- "prefix": "jsx wrap selection with element",
- "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n${1}>",
- "description": "an element"
- },
- "useState": {
- "prefix": "us",
- "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
- "description": "React useState() hook"
- },
- "useEffect": {
- "prefix": "ue",
- "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
- "description": "React useEffect() hook"
- },
- "useEffect with cleanup": {
- "prefix": "uec",
- "body": [
- "useEffect(() => {",
- "\t$1",
- "\n\treturn () => {",
- "\t\t$2",
- "\t}",
- "}, [${3:dependencies}])$0"
- ],
- "description": "React useEffect() hook with a cleanup function"
- },
- "createContext": {
- "prefix": "cc",
- "body": [
- "export const $1 = createContext<$2>(",
- "\t(null as any) as $2",
- ")"
- ],
- "description": "creates a react context"
- },
- "useContext": {
- "prefix": "uc",
- "body": ["const $1 = useContext($2)$0"],
- "description": "React useContext() hook"
- },
- "useRef": {
- "prefix": "ur",
- "body": ["const ${1:elName}El = useRef(null)$0"],
- "description": "React useRef() hook"
- },
- "useCallback": {
- "prefix": "ucb",
- "body": [
- "const ${1:memoizedCallback} = useCallback(",
- "\t() => {",
- "\t\t${2:doSomething}(${3:a}, ${4:b})",
- "\t},",
- "\t[${5:a}, ${6:b}],",
- ")$0"
- ],
- "description": "React useCallback() hook"
- },
- "useMemo": {
- "prefix": "ume",
- "body": [
- "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
- ],
- "description": "React useMemo() hook"
- },
- "createReactHook": {
- "prefix": "crh",
- "body": [ "export const use$0 = () => {", "", "}" ],
- "description": "Create React Hook"
- },
- "createReactHookWithName": {
- "prefix": "crhn",
- "body": [ "export const ${TM_FILENAME_BASE} = () => {", "\t$0", "}"],
- "description": "Create React Hook using File name"
- },
- "describeBlock": {
- "prefix": "desc",
- "body": ["describe('$1', () => {", " $0", "})", ""],
- "description": "Testing `describe` block"
- },
- "testBlock": {
- "prefix": "test",
- "body": ["test('should $1', () => {", " $0", "})", ""],
- "description": "Testing `test` block"
- },
- "itBlock": {
- "prefix": "tit",
- "body": ["it('should $1', () => {", " $0", "})", ""],
- "description": "Testing `it` block"
- },
- "itAsyncBlock": {
- "prefix": "tita",
- "body": ["it('should $1', async () => {", " $0", "})", ""],
- "description": "Testing async `it` block"
- }
+ "destructuring of props": {
+ "prefix": "dp",
+ "body": ["const { ${1:name} } = this.props"]
+ },
+ "destructuring of state": {
+ "prefix": "ds",
+ "body": ["const { ${1:name} } = this.state"]
+ },
+ "reactClassComponent": {
+ "prefix": "rcc",
+ "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\nexport default ${1}",
+ "description": "Creates a React component class"
+ },
+ "reactJustClassComponent": {
+ "prefix": "rcjc",
+ "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n",
+ "description": "Creates a React component class"
+ },
+ "reactClassComponentPropTypes": {
+ "prefix": "rccp",
+ "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+ "description": "Creates a React component class with PropTypes"
+ },
+ "reactClassComponentWithMethods": {
+ "prefix": "rcfc",
+ "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t\n\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+ "description": "Creates a React component class with PropTypes and all lifecycle methods"
+ },
+ "reactFunctionComponent": {
+ "prefix": "rfc",
+ "body": "export const ${TM_FILENAME_BASE} = (props : {}) => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
+ "description": "Creates a React functional component without PropTypes"
+ },
+ "reactFunctionComponentWithEmotion": {
+ "prefix": "rfce",
+ "body": "import { css } from '@emotion/core'\nexport const ${TM_FILENAME_BASE} = (props: {}) => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
+ "description": "Creates a React functional component with emotion import"
+ },
+ "classConstructor": {
+ "prefix": "con",
+ "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
+ "description": "Adds a default constructor for the class that contains props as arguments"
+ },
+ "classConstructorContext": {
+ "prefix": "conc",
+ "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
+ "description": "Adds a default constructor for the class that contains props and context as arguments"
+ },
+ "componentWillMount": {
+ "prefix": "cwm",
+ "body": "\ncomponentWillMount () {\n\t$0\n}\n",
+ "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
+ },
+ "componentDidMount": {
+ "prefix": "cdm",
+ "body": "componentDidMount () {\n\t$0\n}\n",
+ "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
+ },
+ "componentWillReceiveProps": {
+ "prefix": "cwr",
+ "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
+ "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
+ },
+ "componentGetDerivedStateFromProps": {
+ "prefix": "cgd",
+ "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
+ "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
+ },
+ "shouldComponentUpdate": {
+ "prefix": "scu",
+ "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
+ "description": "Invoked before rendering when new props or state are being received. "
+ },
+ "componentWillUpdate": {
+ "prefix": "cwup",
+ "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
+ "description": "Invoked immediately before rendering when new props or state are being received."
+ },
+ "componentDidUpdate": {
+ "prefix": "cdup",
+ "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
+ "description": "Invoked immediately after the component's updates are flushed to the DOM."
+ },
+ "componentWillUnmount": {
+ "prefix": "cwun",
+ "body": "componentWillUnmount () {\n\t$0\n}\n",
+ "description": "Invoked immediately before a component is unmounted from the DOM."
+ },
+ "componentRender": {
+ "prefix": "ren",
+ "body": "render () {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
+ "description": "When called, it should examine this.props and this.state and return a single child element."
+ },
+ "componentSetStateObject": {
+ "prefix": "sst",
+ "body": "this.setState($0)",
+ "description": "Performs a shallow merge of nextState into current state"
+ },
+ "componentSetStateFunc": {
+ "prefix": "ssf",
+ "body": "this.setState((state, props) => { return { $0 }})\n",
+ "description": "Performs a shallow merge of nextState into current state"
+ },
+ "componentProps": {
+ "prefix": "tp",
+ "body": "this.props.$0",
+ "description": "Access component's props"
+ },
+ "componentState": {
+ "prefix": "ts",
+ "body": "this.state.$0",
+ "description": "Access component's state"
+ },
+ "propTypes": {
+ "prefix": "rpt",
+ "body": "$1.propTypes = {\n\t$2\n}",
+ "description": "Creates empty propTypes declaration"
+ },
+ "propTypeArray": {
+ "prefix": "pta",
+ "body": "PropTypes.array,",
+ "description": "Array prop type"
+ },
+ "propTypeArrayRequired": {
+ "prefix": "ptar",
+ "body": "PropTypes.array.isRequired,",
+ "description": "Array prop type required"
+ },
+ "propTypeBool": {
+ "prefix": "ptb",
+ "body": "PropTypes.bool,",
+ "description": "Bool prop type"
+ },
+ "propTypeBoolRequired": {
+ "prefix": "ptbr",
+ "body": "PropTypes.bool.isRequired,",
+ "description": "Bool prop type required"
+ },
+ "propTypeFunc": {
+ "prefix": "ptf",
+ "body": "PropTypes.func,",
+ "description": "Func prop type"
+ },
+ "propTypeFuncRequired": {
+ "prefix": "ptfr",
+ "body": "PropTypes.func.isRequired,",
+ "description": "Func prop type required"
+ },
+ "propTypeNumber": {
+ "prefix": "ptn",
+ "body": "PropTypes.number,",
+ "description": "Number prop type"
+ },
+ "propTypeNumberRequired": {
+ "prefix": "ptnr",
+ "body": "PropTypes.number.isRequired,",
+ "description": "Number prop type required"
+ },
+ "propTypeObject": {
+ "prefix": "pto",
+ "body": "PropTypes.object,",
+ "description": "Object prop type"
+ },
+ "propTypeObjectRequired": {
+ "prefix": "ptor",
+ "body": "PropTypes.object.isRequired,",
+ "description": "Object prop type required"
+ },
+ "propTypeString": {
+ "prefix": "pts",
+ "body": "PropTypes.string,",
+ "description": "String prop type"
+ },
+ "propTypeStringRequired": {
+ "prefix": "ptsr",
+ "body": "PropTypes.string.isRequired,",
+ "description": "String prop type required"
+ },
+ "propTypeNode": {
+ "prefix": "ptnd",
+ "body": "PropTypes.node,",
+ "description": "Anything that can be rendered: numbers, strings, elements or an array"
+ },
+ "propTypeNodeRequired": {
+ "prefix": "ptndr",
+ "body": "PropTypes.node.isRequired,",
+ "description": "Anything that can be rendered: numbers, strings, elements or an array required"
+ },
+ "propTypeElement": {
+ "prefix": "ptel",
+ "body": "PropTypes.element,",
+ "description": "React element prop type"
+ },
+ "propTypeElementRequired": {
+ "prefix": "ptelr",
+ "body": "PropTypes.element.isRequired,",
+ "description": "React element prop type required"
+ },
+ "propTypeInstanceOf": {
+ "prefix": "pti",
+ "body": "PropTypes.instanceOf($0),",
+ "description": "Is an instance of a class prop type"
+ },
+ "propTypeInstanceOfRequired": {
+ "prefix": "ptir",
+ "body": "PropTypes.instanceOf($0).isRequired,",
+ "description": "Is an instance of a class prop type required"
+ },
+ "propTypeEnum": {
+ "prefix": "pte",
+ "body": "PropTypes.oneOf(['$0']),",
+ "description": "Prop type limited to specific values by treating it as an enum"
+ },
+ "propTypeEnumRequired": {
+ "prefix": "pter",
+ "body": "PropTypes.oneOf(['$0']).isRequired,",
+ "description": "Prop type limited to specific values by treating it as an enum required"
+ },
+ "propTypeOneOfType": {
+ "prefix": "ptet",
+ "body": "PropTypes.oneOfType([\n\t$0\n]),",
+ "description": "An object that could be one of many types"
+ },
+ "propTypeOneOfTypeRequired": {
+ "prefix": "ptetr",
+ "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
+ "description": "An object that could be one of many types required"
+ },
+ "propTypeArrayOf": {
+ "prefix": "ptao",
+ "body": "PropTypes.arrayOf($0),",
+ "description": "An array of a certain type"
+ },
+ "propTypeArrayOfRequired": {
+ "prefix": "ptaor",
+ "body": "PropTypes.arrayOf($0).isRequired,",
+ "description": "An array of a certain type required"
+ },
+ "propTypeObjectOf": {
+ "prefix": "ptoo",
+ "body": "PropTypes.objectOf($0),",
+ "description": "An object with property values of a certain type"
+ },
+ "propTypeObjectOfRequired": {
+ "prefix": "ptoor",
+ "body": "PropTypes.objectOf($0).isRequired,",
+ "description": "An object with property values of a certain type required"
+ },
+ "propTypeShape": {
+ "prefix": "ptsh",
+ "body": "PropTypes.shape({\n\t$0\n}),",
+ "description": "An object taking on a particular shape"
+ },
+ "propTypeShapeRequired": {
+ "prefix": "ptshr",
+ "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
+ "description": "An object taking on a particular shape required"
+ },
+ "jsx element": {
+ "prefix": "j",
+ "body": "<${1:elementName}>\n\t$0\n${1}>",
+ "description": "an element"
+ },
+ "jsx element self closed": {
+ "prefix": "jc",
+ "body": "<${1:elementName} />",
+ "description": "an element self closed"
+ },
+ "jsx elements map": {
+ "prefix": "jm",
+ "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n${2}>)}",
+ "description": "an element self closed"
+ },
+ "jsx elements map with return": {
+ "prefix": "jmr",
+ "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n${2}>\n})}",
+ "description": "an element self closed"
+ },
+ "jsx element wrap selection": {
+ "prefix": "jsx wrap selection with element",
+ "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n${1}>",
+ "description": "an element"
+ },
+ "useState": {
+ "prefix": "us",
+ "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
+ "description": "React useState() hook"
+ },
+ "useEffect": {
+ "prefix": "ue",
+ "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
+ "description": "React useEffect() hook"
+ },
+ "useEffect with cleanup": {
+ "prefix": "uec",
+ "body": [
+ "useEffect(() => {",
+ "\t$1",
+ "\n\treturn () => {",
+ "\t\t$2",
+ "\t}",
+ "}, [${3:dependencies}])$0"
+ ],
+ "description": "React useEffect() hook with a cleanup function"
+ },
+ "createContext": {
+ "prefix": "cc",
+ "body": [
+ "export const $1 = createContext<$2>(",
+ "\t(null as any) as $2",
+ ")"
+ ],
+ "description": "creates a react context"
+ },
+ "useContext": {
+ "prefix": "uc",
+ "body": ["const $1 = useContext($2)$0"],
+ "description": "React useContext() hook"
+ },
+ "useRef": {
+ "prefix": "ur",
+ "body": ["const ${1:elName}El = useRef(null)$0"],
+ "description": "React useRef() hook"
+ },
+ "useCallback": {
+ "prefix": "ucb",
+ "body": [
+ "const ${1:memoizedCallback} = useCallback(",
+ "\t() => {",
+ "\t\t${2:doSomething}(${3:a}, ${4:b})",
+ "\t},",
+ "\t[${5:a}, ${6:b}],",
+ ")$0"
+ ],
+ "description": "React useCallback() hook"
+ },
+ "useMemo": {
+ "prefix": "ume",
+ "body": [
+ "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
+ ],
+ "description": "React useMemo() hook"
+ },
+ "createReactHook": {
+ "prefix": "crh",
+ "body": ["export const use$0 = () => {", "", "}"],
+ "description": "Create React Hook"
+ },
+ "createReactHookWithName": {
+ "prefix": "crhn",
+ "body": ["export const ${TM_FILENAME_BASE} = () => {", "\t$0", "}"],
+ "description": "Create React Hook using File name"
+ },
+ "describeBlock": {
+ "prefix": "desc",
+ "body": ["describe('$1', () => {", " $0", "})", ""],
+ "description": "Testing `describe` block"
+ },
+ "testBlock": {
+ "prefix": "test",
+ "body": ["test('should $1', () => {", " $0", "})", ""],
+ "description": "Testing `test` block"
+ },
+ "itBlock": {
+ "prefix": "tit",
+ "body": ["it('should $1', () => {", " $0", "})", ""],
+ "description": "Testing `it` block"
+ },
+ "itAsyncBlock": {
+ "prefix": "tita",
+ "body": ["it('should $1', async () => {", " $0", "})", ""],
+ "description": "Testing async `it` block"
+ }
}
diff --git a/snippets/javascript/react.json b/snippets/javascript/react.json
index b51c5847..a41e83d9 100644
--- a/snippets/javascript/react.json
+++ b/snippets/javascript/react.json
@@ -1,370 +1,370 @@
{
- "destructuring of props": {
- "prefix": "dp",
- "body": ["const { ${1:name} } = this.props"]
- },
- "destructuring of state": {
- "prefix": "ds",
- "body": ["const { ${1:name} } = this.state"]
- },
- "if falsy return null": {
- "prefix": "ifr",
- "body": "if (!${1:condition}) {\n\treturn null\n}"
- },
- "reactClassCompoment": {
- "prefix": "rcc",
- "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\nexport default ${1}",
- "description": "Creates a React component class"
- },
- "reactJustClassCompoment": {
- "prefix": "rcjc",
- "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n",
- "description": "Creates a React component class"
- },
- "reactClassCompomentPropTypes": {
- "prefix": "rccp",
- "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
- "description": "Creates a React component class with PropTypes"
- },
- "reactClassCompomentWithMethods": {
- "prefix": "rcfc",
- "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t\n\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
- "description": "Creates a React component class with PropTypes and all lifecycle methods"
- },
- "reactFunctionComponent": {
- "prefix": "rfc",
- "body": "\nconst ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${TM_FILENAME_BASE}",
- "description": "Creates a React function component without PropTypes"
- },
- "reactFunctionComponentWithCustomName": {
- "prefix": "rfcn",
- "body": "\nconst ${1:functionname} = () => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${1:functionname}",
- "description": "Creates a React function component with custom name"
- },
- "reactFunctionComponentWithEmotion": {
- "prefix": "rfce",
- "body": "import { css } from '@emotion/core'\n\nexport const ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
- "description": "Creates a React functional component with emotion"
- },
- "reactStatelessProps": {
- "prefix": "rfcp",
- "body": "import { PropTypes } from 'react'\n\nconst ${TM_FILENAME_BASE} = props => {\n\treturn (\n\t\t\n\t\t\t\n\t\t
\n\t)\n}\n\n${1}.propTypes = {\n\t$0\n}\n\nexport default ${1}",
- "description": "Creates a React function component with PropTypes"
- },
- "classConstructor": {
- "prefix": "con",
- "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
- "description": "Adds a default constructor for the class that contains props as arguments"
- },
- "classConstructorContext": {
- "prefix": "conc",
- "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
- "description": "Adds a default constructor for the class that contains props and context as arguments"
- },
- "componentWillMount": {
- "prefix": "cwm",
- "body": "\ncomponentWillMount () {\n\t$0\n}\n",
- "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
- },
- "componentDidMount": {
- "prefix": "cdm",
- "body": "componentDidMount () {\n\t$0\n}\n",
- "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
- },
- "componentWillReceiveProps": {
- "prefix": "cwr",
- "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
- "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
- },
- "componentGetDerivedStateFromProps": {
- "prefix": "cgd",
- "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
- "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
- },
- "shouldComponentUpdate": {
- "prefix": "scu",
- "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
- "description": "Invoked before rendering when new props or state are being received. "
- },
- "componentWillUpdate": {
- "prefix": "cwup",
- "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
- "description": "Invoked immediately before rendering when new props or state are being received."
- },
- "componentDidUpdate": {
- "prefix": "cdup",
- "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
- "description": "Invoked immediately after the component's updates are flushed to the DOM."
- },
- "componentWillUnmount": {
- "prefix": "cwun",
- "body": "componentWillUnmount () {\n\t$0\n}\n",
- "description": "Invoked immediately before a component is unmounted from the DOM."
- },
- "componentRender": {
- "prefix": "ren",
- "body": "render () {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
- "description": "When called, it should examine this.props and this.state and return a single child element."
- },
- "componentSetStateObject": {
- "prefix": "sst",
- "body": "this.setState($0)",
- "description": "Performs a shallow merge of nextState into current state"
- },
- "componentSetStateFunc": {
- "prefix": "ssf",
- "body": "this.setState((state, props) => { return { $0 }})\n",
- "description": "Performs a shallow merge of nextState into current state"
- },
- "componentProps": {
- "prefix": "tp",
- "body": "this.props.$0",
- "description": "Access component's props"
- },
- "componentState": {
- "prefix": "ts",
- "body": "this.state.$0",
- "description": "Access component's state"
- },
- "propTypes": {
- "prefix": "rpt",
- "body": "$1.propTypes = {\n\t$2\n}",
- "description": "Creates empty propTypes declaration"
- },
- "propTypeArray": {
- "prefix": "pta",
- "body": "PropTypes.array,",
- "description": "Array prop type"
- },
- "propTypeArrayRequired": {
- "prefix": "ptar",
- "body": "PropTypes.array.isRequired,",
- "description": "Array prop type required"
- },
- "propTypeBool": {
- "prefix": "ptb",
- "body": "PropTypes.bool,",
- "description": "Bool prop type"
- },
- "propTypeBoolRequired": {
- "prefix": "ptbr",
- "body": "PropTypes.bool.isRequired,",
- "description": "Bool prop type required"
- },
- "propTypeFunc": {
- "prefix": "ptf",
- "body": "PropTypes.func,",
- "description": "Func prop type"
- },
- "propTypeFuncRequired": {
- "prefix": "ptfr",
- "body": "PropTypes.func.isRequired,",
- "description": "Func prop type required"
- },
- "propTypeNumber": {
- "prefix": "ptn",
- "body": "PropTypes.number,",
- "description": "Number prop type"
- },
- "propTypeNumberRequired": {
- "prefix": "ptnr",
- "body": "PropTypes.number.isRequired,",
- "description": "Number prop type required"
- },
- "propTypeObject": {
- "prefix": "pto",
- "body": "PropTypes.object,",
- "description": "Object prop type"
- },
- "propTypeObjectRequired": {
- "prefix": "ptor",
- "body": "PropTypes.object.isRequired,",
- "description": "Object prop type required"
- },
- "propTypeString": {
- "prefix": "pts",
- "body": "PropTypes.string,",
- "description": "String prop type"
- },
- "propTypeStringRequired": {
- "prefix": "ptsr",
- "body": "PropTypes.string.isRequired,",
- "description": "String prop type required"
- },
- "propTypeNode": {
- "prefix": "ptnd",
- "body": "PropTypes.node,",
- "description": "Anything that can be rendered: numbers, strings, elements or an array"
- },
- "propTypeNodeRequired": {
- "prefix": "ptndr",
- "body": "PropTypes.node.isRequired,",
- "description": "Anything that can be rendered: numbers, strings, elements or an array required"
- },
- "propTypeElement": {
- "prefix": "ptel",
- "body": "PropTypes.element,",
- "description": "React element prop type"
- },
- "propTypeElementRequired": {
- "prefix": "ptelr",
- "body": "PropTypes.element.isRequired,",
- "description": "React element prop type required"
- },
- "propTypeInstanceOf": {
- "prefix": "pti",
- "body": "PropTypes.instanceOf($0),",
- "description": "Is an instance of a class prop type"
- },
- "propTypeInstanceOfRequired": {
- "prefix": "ptir",
- "body": "PropTypes.instanceOf($0).isRequired,",
- "description": "Is an instance of a class prop type required"
- },
- "propTypeEnum": {
- "prefix": "pte",
- "body": "PropTypes.oneOf(['$0']),",
- "description": "Prop type limited to specific values by treating it as an enum"
- },
- "propTypeEnumRequired": {
- "prefix": "pter",
- "body": "PropTypes.oneOf(['$0']).isRequired,",
- "description": "Prop type limited to specific values by treating it as an enum required"
- },
- "propTypeOneOfType": {
- "prefix": "ptet",
- "body": "PropTypes.oneOfType([\n\t$0\n]),",
- "description": "An object that could be one of many types"
- },
- "propTypeOneOfTypeRequired": {
- "prefix": "ptetr",
- "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
- "description": "An object that could be one of many types required"
- },
- "propTypeArrayOf": {
- "prefix": "ptao",
- "body": "PropTypes.arrayOf($0),",
- "description": "An array of a certain type"
- },
- "propTypeArrayOfRequired": {
- "prefix": "ptaor",
- "body": "PropTypes.arrayOf($0).isRequired,",
- "description": "An array of a certain type required"
- },
- "propTypeObjectOf": {
- "prefix": "ptoo",
- "body": "PropTypes.objectOf($0),",
- "description": "An object with property values of a certain type"
- },
- "propTypeObjectOfRequired": {
- "prefix": "ptoor",
- "body": "PropTypes.objectOf($0).isRequired,",
- "description": "An object with property values of a certain type required"
- },
- "propTypeShape": {
- "prefix": "ptsh",
- "body": "PropTypes.shape({\n\t$0\n}),",
- "description": "An object taking on a particular shape"
- },
- "propTypeShapeRequired": {
- "prefix": "ptshr",
- "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
- "description": "An object taking on a particular shape required"
- },
- "jsx element": {
- "prefix": "j",
- "body": "<${1:elementName}>\n\t$0\n${1}>",
- "description": "an element"
- },
- "jsx element self closed": {
- "prefix": "jc",
- "body": "<${1:elementName} />",
- "description": "an element self closed"
- },
- "jsx elements map": {
- "prefix": "jm",
- "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n${2}>)}",
- "description": "an element self closed"
- },
- "jsx elements map with return": {
- "prefix": "jmr",
- "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n${2}>\n})}",
- "description": "an element self closed"
- },
- "jsx element wrap selection": {
- "prefix": "jsx wrap selection with element",
- "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n${1}>",
- "description": "an element"
- },
- "useState": {
- "prefix": "us",
- "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
- "description": "React useState() hook"
- },
- "useEffect": {
- "prefix": "ue",
- "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
- "description": "React useEffect() hook"
- },
- "useEffect with return": {
- "prefix": "uer",
- "body": [
- "useEffect(() => {",
- "\t$1",
- "\n\treturn () => {",
- "\t\t$2",
- "\t}",
- "}, [${3:dependencies}])$0"
- ],
- "description": "React useEffect() hook with return statement"
- },
- "useContext": {
- "prefix": "uc",
- "body": ["const $1 = useContext($2)$0"],
- "description": "React useContext() hook"
- },
- "useRef": {
- "prefix": "ur",
- "body": ["const ${1:elName}El = useRef(null)$0"],
- "description": "React useContext() hook"
- },
- "useCallback": {
- "prefix": "ucb",
- "body": [
- "const ${1:memoizedCallback} = useCallback(",
- "\t() => {",
- "\t\t${2:doSomething}(${3:a}, ${4:b})",
- "\t},",
- "\t[${5:a}, ${6:b}],",
- ")$0"
- ],
- "description": "React useCallback() hook"
- },
- "useMemo": {
- "prefix": "ume",
- "body": [
- "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
- ],
- "description": "React useMemo() hook"
- },
- "describeBlock": {
- "prefix": "desc",
- "body": ["describe('$1', () => {", " $0", "})", ""],
- "description": "Testing `describe` block"
- },
- "testBlock": {
- "prefix": "test",
- "body": ["test('should $1', () => {", " $0", "})", ""],
- "description": "Testing `test` block"
- },
- "itBlock": {
- "prefix": "tit",
- "body": ["it('should $1', () => {", " $0", "})", ""],
- "description": "Testing `it` block"
- },
- "itAsyncBlock": {
- "prefix": "tita",
- "body": ["it('should $1', async () => {", " $0", "})", ""],
- "description": "Testing async `it` block"
- }
+ "destructuring of props": {
+ "prefix": "dp",
+ "body": ["const { ${1:name} } = this.props"]
+ },
+ "destructuring of state": {
+ "prefix": "ds",
+ "body": ["const { ${1:name} } = this.state"]
+ },
+ "if falsy return null": {
+ "prefix": "ifr",
+ "body": "if (!${1:condition}) {\n\treturn null\n}"
+ },
+ "reactClassComponent": {
+ "prefix": "rcc",
+ "body": "import { Component } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\nexport default ${1}",
+ "description": "Creates a React component class"
+ },
+ "reactJustClassComponent": {
+ "prefix": "rcjc",
+ "body": "class ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n",
+ "description": "Creates a React component class"
+ },
+ "reactClassComponentPropTypes": {
+ "prefix": "rccp",
+ "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\trender () {\n\t\treturn (\n\t\t\t\n\t\t\t\t$0\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+ "description": "Creates a React component class with PropTypes"
+ },
+ "reactClassComponentWithMethods": {
+ "prefix": "rcfc",
+ "body": "import { Component, PropTypes } from 'react'\n\nclass ${TM_FILENAME_BASE} extends Component {\n\tconstructor(props) {\n\t\tsuper(props)\n\n\t}\n\n\tcomponentWillMount () {\n\n\t}\n\n\tcomponentDidMount () {\n\n\t}\n\n\tcomponentWillReceiveProps (nextProps) {\n\n\t}\n\n\tshouldComponentUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentWillUpdate (nextProps, nextState) {\n\n\t}\n\n\tcomponentDidUpdate (prevProps, prevState) {\n\n\t}\n\n\tcomponentWillUnmount () {\n\n\t}\n\n\trender () {\n\t\treturn (\n\t\t\t\n\n\t\t\t
\n\t\t)\n\t}\n}\n\n${1}.propTypes = {\n\n}\n\nexport default ${1}",
+ "description": "Creates a React component class with PropTypes and all lifecycle methods"
+ },
+ "reactFunctionComponent": {
+ "prefix": "rfc",
+ "body": "\nconst ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${TM_FILENAME_BASE}",
+ "description": "Creates a React function component without PropTypes"
+ },
+ "reactFunctionComponentWithCustomName": {
+ "prefix": "rfcn",
+ "body": "\nconst ${1:functionname} = () => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}\n\nexport default ${1:functionname}",
+ "description": "Creates a React function component with custom name"
+ },
+ "reactFunctionComponentWithEmotion": {
+ "prefix": "rfce",
+ "body": "import { css } from '@emotion/core'\n\nexport const ${TM_FILENAME_BASE} = () => {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
+ "description": "Creates a React functional component with emotion"
+ },
+ "reactStatelessProps": {
+ "prefix": "rfcp",
+ "body": "import { PropTypes } from 'react'\n\nconst ${TM_FILENAME_BASE} = props => {\n\treturn (\n\t\t\n\t\t\t\n\t\t
\n\t)\n}\n\n${1}.propTypes = {\n\t$0\n}\n\nexport default ${1}",
+ "description": "Creates a React function component with PropTypes"
+ },
+ "classConstructor": {
+ "prefix": "con",
+ "body": "constructor (props) {\n\tsuper(props)\n\t$0\n}\n",
+ "description": "Adds a default constructor for the class that contains props as arguments"
+ },
+ "classConstructorContext": {
+ "prefix": "conc",
+ "body": "constructor (props, context) {\n\tsuper(props, context)\n\t$0\n}\n",
+ "description": "Adds a default constructor for the class that contains props and context as arguments"
+ },
+ "componentWillMount": {
+ "prefix": "cwm",
+ "body": "\ncomponentWillMount () {\n\t$0\n}\n",
+ "description": "Invoked once, both on the client and server, immediately before the initial rendering occurs"
+ },
+ "componentDidMount": {
+ "prefix": "cdm",
+ "body": "componentDidMount () {\n\t$0\n}\n",
+ "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
+ },
+ "componentWillReceiveProps": {
+ "prefix": "cwr",
+ "body": "componentWillReceiveProps (nextProps) {\n\t$0\n}\n",
+ "description": "Invoked when a component is receiving new props. This method is not called for the initial render."
+ },
+ "componentGetDerivedStateFromProps": {
+ "prefix": "cgd",
+ "body": "\nstatic getDerivedStateFromProps(nextProps, prevState) {\n\t$0\n}\n",
+ "description": "Invoked after a component is instantiated as well as when it receives new props. It should return an object to update state, or null to indicate that the new props do not require any state updates."
+ },
+ "shouldComponentUpdate": {
+ "prefix": "scu",
+ "body": "shouldComponentUpdate (nextProps, nextState) {\n\t$0\n}\n",
+ "description": "Invoked before rendering when new props or state are being received. "
+ },
+ "componentWillUpdate": {
+ "prefix": "cwup",
+ "body": "componentWillUpdate (nextProps, nextState) {\n\t$0\n}\n",
+ "description": "Invoked immediately before rendering when new props or state are being received."
+ },
+ "componentDidUpdate": {
+ "prefix": "cdup",
+ "body": "componentDidUpdate (prevProps, prevState) {\n\t$0\n}\n",
+ "description": "Invoked immediately after the component's updates are flushed to the DOM."
+ },
+ "componentWillUnmount": {
+ "prefix": "cwun",
+ "body": "componentWillUnmount () {\n\t$0\n}\n",
+ "description": "Invoked immediately before a component is unmounted from the DOM."
+ },
+ "componentRender": {
+ "prefix": "ren",
+ "body": "render () {\n\treturn (\n\t\t\n\t\t\t$0\n\t\t
\n\t)\n}",
+ "description": "When called, it should examine this.props and this.state and return a single child element."
+ },
+ "componentSetStateObject": {
+ "prefix": "sst",
+ "body": "this.setState($0)",
+ "description": "Performs a shallow merge of nextState into current state"
+ },
+ "componentSetStateFunc": {
+ "prefix": "ssf",
+ "body": "this.setState((state, props) => { return { $0 }})\n",
+ "description": "Performs a shallow merge of nextState into current state"
+ },
+ "componentProps": {
+ "prefix": "tp",
+ "body": "this.props.$0",
+ "description": "Access component's props"
+ },
+ "componentState": {
+ "prefix": "ts",
+ "body": "this.state.$0",
+ "description": "Access component's state"
+ },
+ "propTypes": {
+ "prefix": "rpt",
+ "body": "$1.propTypes = {\n\t$2\n}",
+ "description": "Creates empty propTypes declaration"
+ },
+ "propTypeArray": {
+ "prefix": "pta",
+ "body": "PropTypes.array,",
+ "description": "Array prop type"
+ },
+ "propTypeArrayRequired": {
+ "prefix": "ptar",
+ "body": "PropTypes.array.isRequired,",
+ "description": "Array prop type required"
+ },
+ "propTypeBool": {
+ "prefix": "ptb",
+ "body": "PropTypes.bool,",
+ "description": "Bool prop type"
+ },
+ "propTypeBoolRequired": {
+ "prefix": "ptbr",
+ "body": "PropTypes.bool.isRequired,",
+ "description": "Bool prop type required"
+ },
+ "propTypeFunc": {
+ "prefix": "ptf",
+ "body": "PropTypes.func,",
+ "description": "Func prop type"
+ },
+ "propTypeFuncRequired": {
+ "prefix": "ptfr",
+ "body": "PropTypes.func.isRequired,",
+ "description": "Func prop type required"
+ },
+ "propTypeNumber": {
+ "prefix": "ptn",
+ "body": "PropTypes.number,",
+ "description": "Number prop type"
+ },
+ "propTypeNumberRequired": {
+ "prefix": "ptnr",
+ "body": "PropTypes.number.isRequired,",
+ "description": "Number prop type required"
+ },
+ "propTypeObject": {
+ "prefix": "pto",
+ "body": "PropTypes.object,",
+ "description": "Object prop type"
+ },
+ "propTypeObjectRequired": {
+ "prefix": "ptor",
+ "body": "PropTypes.object.isRequired,",
+ "description": "Object prop type required"
+ },
+ "propTypeString": {
+ "prefix": "pts",
+ "body": "PropTypes.string,",
+ "description": "String prop type"
+ },
+ "propTypeStringRequired": {
+ "prefix": "ptsr",
+ "body": "PropTypes.string.isRequired,",
+ "description": "String prop type required"
+ },
+ "propTypeNode": {
+ "prefix": "ptnd",
+ "body": "PropTypes.node,",
+ "description": "Anything that can be rendered: numbers, strings, elements or an array"
+ },
+ "propTypeNodeRequired": {
+ "prefix": "ptndr",
+ "body": "PropTypes.node.isRequired,",
+ "description": "Anything that can be rendered: numbers, strings, elements or an array required"
+ },
+ "propTypeElement": {
+ "prefix": "ptel",
+ "body": "PropTypes.element,",
+ "description": "React element prop type"
+ },
+ "propTypeElementRequired": {
+ "prefix": "ptelr",
+ "body": "PropTypes.element.isRequired,",
+ "description": "React element prop type required"
+ },
+ "propTypeInstanceOf": {
+ "prefix": "pti",
+ "body": "PropTypes.instanceOf($0),",
+ "description": "Is an instance of a class prop type"
+ },
+ "propTypeInstanceOfRequired": {
+ "prefix": "ptir",
+ "body": "PropTypes.instanceOf($0).isRequired,",
+ "description": "Is an instance of a class prop type required"
+ },
+ "propTypeEnum": {
+ "prefix": "pte",
+ "body": "PropTypes.oneOf(['$0']),",
+ "description": "Prop type limited to specific values by treating it as an enum"
+ },
+ "propTypeEnumRequired": {
+ "prefix": "pter",
+ "body": "PropTypes.oneOf(['$0']).isRequired,",
+ "description": "Prop type limited to specific values by treating it as an enum required"
+ },
+ "propTypeOneOfType": {
+ "prefix": "ptet",
+ "body": "PropTypes.oneOfType([\n\t$0\n]),",
+ "description": "An object that could be one of many types"
+ },
+ "propTypeOneOfTypeRequired": {
+ "prefix": "ptetr",
+ "body": "PropTypes.oneOfType([\n\t$0\n]).isRequired,",
+ "description": "An object that could be one of many types required"
+ },
+ "propTypeArrayOf": {
+ "prefix": "ptao",
+ "body": "PropTypes.arrayOf($0),",
+ "description": "An array of a certain type"
+ },
+ "propTypeArrayOfRequired": {
+ "prefix": "ptaor",
+ "body": "PropTypes.arrayOf($0).isRequired,",
+ "description": "An array of a certain type required"
+ },
+ "propTypeObjectOf": {
+ "prefix": "ptoo",
+ "body": "PropTypes.objectOf($0),",
+ "description": "An object with property values of a certain type"
+ },
+ "propTypeObjectOfRequired": {
+ "prefix": "ptoor",
+ "body": "PropTypes.objectOf($0).isRequired,",
+ "description": "An object with property values of a certain type required"
+ },
+ "propTypeShape": {
+ "prefix": "ptsh",
+ "body": "PropTypes.shape({\n\t$0\n}),",
+ "description": "An object taking on a particular shape"
+ },
+ "propTypeShapeRequired": {
+ "prefix": "ptshr",
+ "body": "PropTypes.shape({\n\t$0\n}).isRequired,",
+ "description": "An object taking on a particular shape required"
+ },
+ "jsx element": {
+ "prefix": "j",
+ "body": "<${1:elementName}>\n\t$0\n${1}>",
+ "description": "an element"
+ },
+ "jsx element self closed": {
+ "prefix": "jc",
+ "body": "<${1:elementName} />",
+ "description": "an element self closed"
+ },
+ "jsx elements map": {
+ "prefix": "jm",
+ "body": "{${1:array}.map((item) => <${2:elementName} key={item.id}>\n\t$0\n${2}>)}",
+ "description": "an element self closed"
+ },
+ "jsx elements map with return": {
+ "prefix": "jmr",
+ "body": "{${1:array}.map((item) => {\n\treturn <${2:elementName} key={item.id}>\n\t$0\n${2}>\n})}",
+ "description": "an element self closed"
+ },
+ "jsx element wrap selection": {
+ "prefix": "jsx wrap selection with element",
+ "body": "<${1:elementName}>\n\t{$TM_SELECTED_TEXT}\n${1}>",
+ "description": "an element"
+ },
+ "useState": {
+ "prefix": "us",
+ "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initValue})$0",
+ "description": "React useState() hook"
+ },
+ "useEffect": {
+ "prefix": "ue",
+ "body": ["useEffect(() => {", "\t$1", "}, [${3:dependencies}])$0"],
+ "description": "React useEffect() hook"
+ },
+ "useEffect with return": {
+ "prefix": "uer",
+ "body": [
+ "useEffect(() => {",
+ "\t$1",
+ "\n\treturn () => {",
+ "\t\t$2",
+ "\t}",
+ "}, [${3:dependencies}])$0"
+ ],
+ "description": "React useEffect() hook with return statement"
+ },
+ "useContext": {
+ "prefix": "uc",
+ "body": ["const $1 = useContext($2)$0"],
+ "description": "React useContext() hook"
+ },
+ "useRef": {
+ "prefix": "ur",
+ "body": ["const ${1:elName}El = useRef(null)$0"],
+ "description": "React useContext() hook"
+ },
+ "useCallback": {
+ "prefix": "ucb",
+ "body": [
+ "const ${1:memoizedCallback} = useCallback(",
+ "\t() => {",
+ "\t\t${2:doSomething}(${3:a}, ${4:b})",
+ "\t},",
+ "\t[${5:a}, ${6:b}],",
+ ")$0"
+ ],
+ "description": "React useCallback() hook"
+ },
+ "useMemo": {
+ "prefix": "ume",
+ "body": [
+ "const ${1:memoizedValue} = useMemo(() => ${2:computeExpensiveValue}(${3:a}, ${4:b}), [${5:a}, ${6:b}])$0"
+ ],
+ "description": "React useMemo() hook"
+ },
+ "describeBlock": {
+ "prefix": "desc",
+ "body": ["describe('$1', () => {", " $0", "})", ""],
+ "description": "Testing `describe` block"
+ },
+ "testBlock": {
+ "prefix": "test",
+ "body": ["test('should $1', () => {", " $0", "})", ""],
+ "description": "Testing `test` block"
+ },
+ "itBlock": {
+ "prefix": "tit",
+ "body": ["it('should $1', () => {", " $0", "})", ""],
+ "description": "Testing `it` block"
+ },
+ "itAsyncBlock": {
+ "prefix": "tita",
+ "body": ["it('should $1', async () => {", " $0", "})", ""],
+ "description": "Testing async `it` block"
+ }
}