This commit is contained in:
sankalp committed 2024-10-26 13:37:00 +05:45
1 parent dd4e5e0cc4
commit bd932cf5e1
21 files changed
+7107 -55

No files matched your search

+734
View File
@@ -0,0 +1,734 @@
{
"exportType": {
"body": ["export type ${1:first} = {${2:second}}"],
"prefix": "exptp"
},
"exportInterface": {
"prefix": "expint",
"body": ["export interface ${1:first} {${2:second}}"]
},
"reactArrowFunctionComponent": {
"prefix": "rafc",
"body": [
"export const ${1:${TM_FILENAME_BASE}} = () => {",
" return (",
" <div>${1:first}</div>",
" )",
"}",
""
],
"description": "Creates a React Arrow Function Component with ES7 module system"
},
"reactArrowFunctionComponentWithPropTypes": {
"prefix": "rafcp",
"body": [
"import PropTypes from 'prop-types'",
"",
"const ${1:${TM_FILENAME_BASE}} = props => {",
" return (",
" <div>${1:first}</div>",
" )",
"}",
"",
"${1:${TM_FILENAME_BASE}}.propTypes = {}",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description": "Creates a React Arrow Function Component with ES7 module system with PropTypes"
},
"reactArrowFunctionExportComponent": {
"prefix": "rafce",
"body": [
"const ${1:${TM_FILENAME_BASE}} = () => {",
" return (",
" <div>${1:first}</div>",
" )",
"}",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description": "Creates a React Arrow Function Component with ES7 module system"
},
"reactClassComponent": {
"prefix": "rcc",
"body": [
"import { Component } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends Component {",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
""
],
"description": "Creates a React component class with ES7 module system"
},
"reactClassComponentPropTypes": {
"prefix": "rccp",
"body": [
"import PropTypes from 'prop-types'",
"import { Component } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends Component {",
" static propTypes = {${2:second}: ${3:third}}",
"",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
""
],
"description": "Creates a React component class with PropTypes and ES7 module system"
},
"reactClassComponentRedux": {
"prefix": "rcredux",
"body": [
"import { Component } from 'react'",
"import { connect } from 'react-redux'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
"",
"const mapStateToProps = (state) => ({})",
"",
"const mapDispatchToProps = {}",
"",
"export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
],
"description": "Creates a React component class with connected redux and ES7 module system"
},
"reactClassComponentReduxPropTypes": {
"prefix": "rcreduxp",
"body": [
"import PropTypes from 'prop-types'",
"import { Component } from 'react'",
"import { connect } from 'react-redux'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
" static propTypes = {",
" ${2:second}: ${3:third}",
" }",
"",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
"",
"const mapStateToProps = (state) => ({})",
"",
"const mapDispatchToProps = {}",
"",
"export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
],
"description": "Creates a React component class with PropTypes with connected redux and ES7 module system"
},
"reactClassExportComponent": {
"prefix": "rce",
"body": [
"import { Component } from 'react'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description": "Creates a React component class with ES7 module system"
},
"reactClassExportComponentWithPropTypes": {
"prefix": "rcep",
"body": [
"import PropTypes from 'prop-types'",
"import { Component } from 'react'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends Component {",
" static propTypes = {}",
"",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description": "Creates a React component class with ES7 module system"
},
"reactClassExportPureComponent": {
"prefix": "rpce",
"body": [
"import { PureComponent } from 'react'",
"",
"export class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description": "Creates a React pure component class with ES7 module system export"
},
"reactClassPureComponent": {
"prefix": "rpc",
"body": [
"import { PureComponent } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
""
],
"description": "Creates a React pure component class with ES7 module system"
},
"reactClassPureComponentWithPropTypes": {
"prefix": "rpcp",
"body": [
"import PropTypes from 'prop-types'",
"import { PureComponent } from 'react'",
"",
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {",
" static propTypes = {}",
"",
" render() {",
" return (",
" <div>${1:first}</div>",
" )",
" }",
"}",
""
],
"description": "Creates a React component class with ES7 module system"
},
"reactFunctionMemoComponent": {
"prefix": "rmc",
"body": [
"import { memo } from 'react'",
"",
"const ${1:${TM_FILENAME_BASE}} = memo(() => {",
" return (",
" <div>${1:first}</div>",
" )",
"})",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description": "Creates a React Memo Function Component with ES7 module system"
},
"reactFunctionMemoComponentWithPropTypes": {
"prefix": "rmcp",
"body": [
"import PropTypes from 'prop-types'",
"import { memo } from 'react'",
"",
"const ${1:${TM_FILENAME_BASE}} = memo((props) => {",
" return (",
" <div>${1:first}</div>",
" )",
"})",
"",
"${1:${TM_FILENAME_BASE}}.propTypes = {}",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description": "Creates a React Memo Function Component with ES7 module system with PropTypes"
},
"reactFunctionalComponent": {
"prefix": "rfc",
"body": [
"import React from 'react'",
"",
"export default function ${1:${TM_FILENAME_BASE}}() {",
" return (",
" <div>${1:first}</div>",
" )",
"}",
""
],
"description": "Creates a React Functional Component with ES7 module system"
},
"reactFunctionalComponentRedux": {
"prefix": "rfcredux",
"body": [
"import { connect } from 'react-redux'",
"",
"export const ${1:${TM_FILENAME_BASE}} = (props) => {",
" return (",
" <div>${1:first}</div>",
" )",
"}",
"",
"const mapStateToProps = (state) => ({})",
"",
"const mapDispatchToProps = {}",
"",
"export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
],
"description": "Creates a React functional component with connected redux and ES7 module system"
},
"reactFunctionalComponentReduxPropTypes": {
"prefix": "rfcreduxp",
"body": [
"import PropTypes from 'prop-types'",
"import { connect } from 'react-redux'",
"",
"export const ${1:${TM_FILENAME_BASE}} = (props) => {",
" return (",
" <div>${1:first}</div>",
" )",
"}",
"",
"${1:${TM_FILENAME_BASE}}.propTypes = {",
" ${2:second}: PropTypes.${3:third}",
"}",
"",
"const mapStateToProps = (state) => ({})",
"",
"const mapDispatchToProps = {}",
"",
"export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})"
],
"description": "DEPRECATED: Creates a React functional component with PropTypes with connected redux and ES7 module system"
},
"reactFunctionalComponentWithPropTypes": {
"prefix": "rfcp",
"body": [
"import PropTypes from 'prop-types'",
"",
"function ${1:${TM_FILENAME_BASE}}(props) {",
" return (",
" <div>${1:first}</div>",
" )",
"}",
"",
"${1:${TM_FILENAME_BASE}}.propTypes = {}",
"",
"export default ${1:${TM_FILENAME_BASE}}",
""
],
"description": "Creates a React Functional Component with ES7 module system with PropTypes"
},
"reactFunctionalExportComponent": {
"prefix": "rfce",
"body": [
"function ${1:${TM_FILENAME_BASE}}() {",
" return (",
" <div>${1:first}</div>",
" )",
"}",
"",
"export default ${1:${TM_FILENAME_BASE}}"
],
"description": "Creates a React Functional Component with ES7 module system"
},
"useCallback": {
"prefix": "useCallbackSnippet",
"body": [
"useCallback(",
" () => {",
" ${1:first}",
" },",
" [${2:second}],",
")",
""
]
},
"useContext": {
"prefix": "useContextSnippet",
"body": ["const ${1:first} = useContext(${2:second})"]
},
"useEffect": {
"prefix": "useEffectSnippet",
"body": [
"useEffect(() => {",
" ${1:first}",
"",
" return () => {",
" ${2:second}",
" }",
"}, [${3:third}])",
""
]
},
"useImperativeHandle": {
"prefix": "useImperativeHandleSnippet",
"body": [
"useImperativeHandle(",
" ${1:first},",
" () => {",
" ${2:second}",
" },",
" [${3:third}],",
")"
]
},
"useLayoutEffect": {
"prefix": "useLayoutEffectSnippet",
"body": [
"useLayoutEffect(() => {",
" ${1:first}",
"",
" return () => {",
" ${2:second}",
" };",
"}, [${3:third}])"
]
},
"useMemo": {
"prefix": "useMemoSnippet",
"body": ["useMemo(() => ${1:first}, [${2:second}])"]
},
"useReducer": {
"prefix": "useReducerSnippet",
"body": [
"const [state, dispatch] = useReducer(${1:first}, ${2:second}, ${3:third})"
]
},
"useRef": {
"prefix": "useRefSnippet",
"body": ["const ${1:first} = useRef(${2:second})"]
},
"useState": {
"prefix": "useStateSnippet",
"body": [
"const [${1:first}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:second})"
]
},
"importPropTypes": {
"prefix": "impt",
"body": ["import PropTypes from 'prop-types'"]
},
"importReact": {
"prefix": "imr",
"body": ["import React from 'react'"]
},
"importReactDom": {
"prefix": "imrd",
"body": ["import ReactDOM from 'react-dom'"]
},
"importReactWithComponent": {
"prefix": "imrc",
"body": ["import React, { Component } from 'react'"]
},
"importReactWithComponentAndPropTypes": {
"prefix": "imrcp",
"body": [
"import React, { Component } from 'react'",
"import PropTypes from 'prop-types'",
""
]
},
"importReactWithMemo": {
"prefix": "imrm",
"body": ["import React, { memo } from 'react'"]
},
"importReactWithMemoAndPropTypes": {
"prefix": "imrmp",
"body": [
"import React, { memo } from 'react'",
"import PropTypes from 'prop-types'",
""
]
},
"importReactWithPureComponent": {
"prefix": "imrpc",
"body": ["import React, { PureComponent } from 'react'"]
},
"importReactWithPureComponentAndPropTypes": {
"prefix": "imrpcp",
"body": [
"import React, { PureComponent } from 'react'",
"import PropTypes from 'prop-types'",
""
]
},
"importRouterLink": {
"prefix": "imbrl",
"body": ["import { Link } from 'react-router-dom'"]
},
"importRouterNavLink": {
"prefix": "imbrnl",
"body": ["import { NavLink } from 'react-router-dom'"]
},
"importRouterSetup": {
"prefix": "imbrc",
"body": [
"import { Route, Switch, NavLink, Link } from 'react-router-dom'"
]
},
"importRouterSwitch": {
"prefix": "imbrs",
"body": ["import { Switch } from 'react-router-dom'"]
},
"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([", " $0", "])"],
"description": "An object that could be one of many types"
},
"propTypeOneOfTypeRequired": {
"prefix": "ptetr",
"body": ["PropTypes.oneOfType([", " $0", "]).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({", " $0", "})"],
"description": "An object taking on a particular shape"
},
"propTypeShapeRequired": {
"prefix": "ptshr",
"body": ["PropTypes.shape({", " $0", "}).isRequired"],
"description": "An object taking on a particular shape required"
},
"propTypeExact": {
"prefix": "ptex",
"body": ["PropTypes.exact({", " $0", "})"],
"description": "An object with warnings on extra properties"
},
"propTypeExactRequired": {
"prefix": "ptexr",
"body": ["PropTypes.exact({", " $0", "}).isRequired"],
"description": "An object with warnings on extra properties required"
},
"propTypeAny": {
"prefix": "ptany",
"body": ["PropTypes.any"],
"description": "Any prop type"
},
"destructProps": {
"prefix": "cp",
"body": ["const { ${1:first} } = this.props"],
"description": "Creates and assigns a local variable using props destructing"
},
"destructState": {
"prefix": "cs",
"body": ["const { ${1:first} } = this.state"],
"description": "Creates and assigns a local variable using state destructing"
},
"classConstructor": {
"prefix": "rconst",
"body": [
"constructor(props) {",
" super(props)",
"",
" this.state = {",
" ${1:first}",
" }",
"}"
],
"description": "Adds a default constructor for it('', () => {})the class that contains props as arguments"
},
"emptyState": {
"prefix": "est",
"body": ["state = { ${1:first} }"],
"description": "Creates empty state object. To be used in a constructor."
},
"componentDidMount": {
"prefix": "cdm",
"body": ["componentDidMount() { ${1:first} }"],
"description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs."
},
"shouldComponentUpdate": {
"prefix": "scu",
"body": ["shouldComponentUpdate(nextProps, nextState) { ${1:first} }"],
"description": "Invoked before rendering when new props or state are being received. "
},
"componentDidUpdate": {
"prefix": "cdup",
"body": ["componentDidUpdate(prevProps, prevState) { ${1:first}} "],
"description": "Invoked immediately after the component's updates are flushed to the DOM."
},
"componentWillUnmount": {
"prefix": "cwun",
"body": ["componentWillUnmount() {${1:first} }"],
"description": "Invoked immediately before a component is unmounted from the DOM."
},
"getDerivedStateFromProps": {
"prefix": "gdsfp",
"body": ["static getDerivedStateFromProps(props, state) {${1:first}}"],
"description": "Invoked right before calling the render method, both on the initial mount and on subsequent updates."
},
"getSnapshotBeforeUpdate": {
"prefix": "gsbu",
"body": [
"getSnapshotBeforeUpdate = (prevProps, prevState) => {${1:first}}"
],
"description": "Called right before mutations are made (e.g. before the DOM is updated)"
},
"createContext": {
"prefix": "rcontext",
"body": ["const ${1:first} = React.createContext()"],
"description": "Create React context"
},
"createRef": {
"prefix": "cref",
"body": ["this.${1:first}Ref = React.createRef()"],
"description": "Create ref statement used inside constructor"
},
"componentSetStateObject": {
"prefix": "sst",
"body": ["this.setState({${1:first}})"],
"description": "Performs a shallow merge of nextState into current state"
},
"componentSetStateFunc": {
"prefix": "ssf",
"body": ["this.setState((state, props) => { return { ${1:first} }})"],
"description": "Performs a shallow merge of nextState into current state"
},
"componentProps": {
"prefix": "props",
"body": ["this.props.${1:first}"],
"description": "Access component's props"
},
"componentState": {
"prefix": "state",
"body": ["this.state.${1:first}"]
},
"bindThis": {
"prefix": "bnd",
"body": ["this.${1:first} = this.${1:first}.bind(this)"],
"description": "Binds this to a method"
}
}