├── .babelrc ├── .gitignore ├── .prettierrc ├── package.json ├── readme.md ├── snippets ├── CommentBigBlock.sublime-snippet ├── anonymousFunction.sublime-snippet ├── bindThis.sublime-snippet ├── classConstructor.sublime-snippet ├── componentDidMount.sublime-snippet ├── componentDidUpdate.sublime-snippet ├── componentProps.sublime-snippet ├── componentRender.sublime-snippet ├── componentSetStateFunc.sublime-snippet ├── componentSetStateObject.sublime-snippet ├── componentState.sublime-snippet ├── componentWillMount.sublime-snippet ├── componentWillReceiveProps.sublime-snippet ├── componentWillUnmount.sublime-snippet ├── componentWillUpdate.sublime-snippet ├── consoleAssert.sublime-snippet ├── consoleClear.sublime-snippet ├── consoleCount.sublime-snippet ├── consoleDir.sublime-snippet ├── consoleError.sublime-snippet ├── consoleGroup.sublime-snippet ├── consoleGroupEnd.sublime-snippet ├── consoleInfo.sublime-snippet ├── consoleLog.sublime-snippet ├── consoleLogObject.sublime-snippet ├── consoleTime.sublime-snippet ├── consoleTimeEnd.sublime-snippet ├── consoleTrace.sublime-snippet ├── consoleWarn.sublime-snippet ├── createContext.sublime-snippet ├── createRef.sublime-snippet ├── describeBlock.sublime-snippet ├── destructProps.sublime-snippet ├── destructState.sublime-snippet ├── destructingArray.sublime-snippet ├── destructingObject.sublime-snippet ├── emptyState.sublime-snippet ├── exportAs.sublime-snippet ├── exportDefault.sublime-snippet ├── exportDefaultFunction.sublime-snippet ├── exportDestructing.sublime-snippet ├── exportGraphQL.sublime-snippet ├── exportNamedFunction.sublime-snippet ├── forEach.sublime-snippet ├── forIn.sublime-snippet ├── forOf.sublime-snippet ├── forwardRef.sublime-snippet ├── getDerivedStateFromProps.sublime-snippet ├── getSnapshotBeforeUpdate.sublime-snippet ├── graphQLForComponent.sublime-snippet ├── hocComponent.sublime-snippet ├── hocComponentWithRedux.sublime-snippet ├── import.sublime-snippet ├── importAs.sublime-snippet ├── importDestructing.sublime-snippet ├── importEverything.sublime-snippet ├── importNoModuleName.sublime-snippet ├── importPropTypes.sublime-snippet ├── importReact.sublime-snippet ├── importReactDOM.sublime-snippet ├── importReactPropTypes.sublime-snippet ├── importReactRouter.sublime-snippet ├── importReactmemo.sublime-snippet ├── importReactmemoPropTypes.sublime-snippet ├── importreduxstatement.sublime-snippet ├── itBlock.sublime-snippet ├── mappingToProps.sublime-snippet ├── method.sublime-snippet ├── namedFunction.sublime-snippet ├── promise.sublime-snippet ├── propTypeAny.sublime-snippet ├── propTypeArray.sublime-snippet ├── propTypeArrayOf.sublime-snippet ├── propTypeArrayOfRequired.sublime-snippet ├── propTypeArrayRequired.sublime-snippet ├── propTypeBool.sublime-snippet ├── propTypeBoolRequired.sublime-snippet ├── propTypeElement.sublime-snippet ├── propTypeElementRequired.sublime-snippet ├── propTypeEnum.sublime-snippet ├── propTypeEnumRequired.sublime-snippet ├── propTypeFunc.sublime-snippet ├── propTypeFuncRequired.sublime-snippet ├── propTypeInstanceOf.sublime-snippet ├── propTypeInstanceOfRequired.sublime-snippet ├── propTypeNode.sublime-snippet ├── propTypeNodeRequired.sublime-snippet ├── propTypeNumber.sublime-snippet ├── propTypeNumberRequired.sublime-snippet ├── propTypeObject.sublime-snippet ├── propTypeObjectOf.sublime-snippet ├── propTypeObjectOfRequired.sublime-snippet ├── propTypeObjectRequired.sublime-snippet ├── propTypeOneOfType.sublime-snippet ├── propTypeOneOfTypeRequired.sublime-snippet ├── propTypeShape.sublime-snippet ├── propTypeShapeRequired.sublime-snippet ├── propTypeString.sublime-snippet ├── propTypeStringRequired.sublime-snippet ├── propertyGet.sublime-snippet ├── propertyset.sublime-snippet ├── reactArrowFunctionComponent.sublime-snippet ├── reactArrowFunctionComponentWithPropTypes.sublime-snippet ├── reactClassCompoment.sublime-snippet ├── reactClassCompomentPropTypes.sublime-snippet ├── reactClassCompomentRedux.sublime-snippet ├── reactClassExportComponent.sublime-snippet ├── reactClassExportComponentWithPropTypes.sublime-snippet ├── reactClassExportPureComponent.sublime-snippet ├── reactClassPureComponent.sublime-snippet ├── reactClassPureComponentWithPropTypes.sublime-snippet ├── reactFunctionMemoComponent.sublime-snippet ├── reactFunctionMemoComponentWithPropTypes.sublime-snippet ├── reactFunctionalComponent.sublime-snippet ├── reactFunctionalComponentWithPropTypes.sublime-snippet ├── reactFunctionalExportComponent.sublime-snippet ├── reactNativeArrowFunctionComponent.sublime-snippet ├── reactNativeClassComponentRedux.sublime-snippet ├── reactNativeComponent.sublime-snippet ├── reactNativeComponentExport.sublime-snippet ├── reactNativeComponentWithStyles.sublime-snippet ├── reactNativeImport.sublime-snippet ├── reactNativePureComponent.sublime-snippet ├── reactNativePureComponentExport.sublime-snippet ├── reactNativeStyles.sublime-snippet ├── reduxAction.sublime-snippet ├── reduxConst.sublime-snippet ├── reduxReducer.sublime-snippet ├── reduxSelector.sublime-snippet ├── setInterval.sublime-snippet ├── setTimeOut.sublime-snippet ├── setupReactComponentTestWithRedux.sublime-snippet ├── setupReactNativeTest.sublime-snippet ├── setupReactNativeTestWithRedux.sublime-snippet ├── setupReactTest.sublime-snippet ├── shouldComponentUpdate.sublime-snippet ├── staticPropTpyes.sublime-snippet ├── testBlock.sublime-snippet ├── useCallback.sublime-snippet ├── useContext.sublime-snippet ├── useDebugValue.sublime-snippet ├── useEffect.sublime-snippet ├── useImperativeHandle.sublime-snippet ├── useLayoutEffect.sublime-snippet ├── useMemo.sublime-snippet ├── useReducer.sublime-snippet ├── useRef.sublime-snippet └── useState.sublime-snippet ├── src ├── index.js └── snippets.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "all", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sublime-es7-javascript-react-snippets", 3 | "version": "1.0.1", 4 | "description": "Extension for Javascript/React snippets with search supporting ES7 and babel features", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "generate": "babel-node src/index.js", 9 | "dev": "nodemon --exec babel-node src/index.js" 10 | }, 11 | "keywords": [ 12 | "Javascript", 13 | "snippets", 14 | "react", 15 | "babel" 16 | ], 17 | "author": "Lasse T.", 18 | "license": "ISC", 19 | "devDependencies": { 20 | "@babel/core": "^7.4.4", 21 | "@babel/node": "^7.2.2", 22 | "@babel/preset-env": "^7.4.4", 23 | "babel-preset-env": "^1.7.0", 24 | "babel-register": "^6.26.0", 25 | "fs": "^0.0.1-security", 26 | "nodemon": "^1.19.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Sublime ES7 React/Redux/React-Native/JS snippets (for JS and TS) 2 | 3 | This Sublime extension ports the excellent and popular snippets collection from the **["VS Code ES7 React/Redux/React-Native/JS snippets"](https://github.com/dsznajder/vscode-es7-javascript-react-snippets)** to Sublime. The snippets from the VS Code extension are located in `scr/snippets.json`, the script that converts the snippets to Sublime snippet format is in `src/index.js` and the finished Sublime snippets are in `snippets/` folder. Snippets work for both typescript and javascript. 4 | 5 | Also note, all `{ PureComponent }` or `{ Component }` have been replaced with `...extends React.PureComponent` or `...extends React.Component`. 6 | 7 | The are in total 148 8 | 9 | ## Installation 10 | 11 | Install via Package Control. 12 | 13 | - Open the Command Palette via `Ctrl/⌘+Shift+p` 14 | - Select Package Control: Install Package 15 | - Search for `Sublime ES7 React/Redux/React-Native/JS snippets` and press ↲ Enter 16 | 17 | ## Snippet information copy/pasted from: ["VS Code ES7 React/Redux/React-Native/JS snippets"](https://github.com/dsznajder/vscode-es7-javascript-react-snippets) 18 | 19 | Every space inside `{ }` and `( )` means that this is pushed into next line :) 20 | `$` represent each step after `tab`. 21 | 22 | ## Basic Methods 23 | 24 | | Prefix | Method | 25 | | ------: | --------------------------------------------------- | 26 | | `imp→` | `import moduleName from 'module'` | 27 | | `imn→` | `import 'module'` | 28 | | `imd→` | `import { destructuredModule } from 'module'` | 29 | | `ime→` | `import * as alias from 'module'` | 30 | | `ima→` | `import { originalName as aliasName} from 'module'` | 31 | | `exp→` | `export default moduleName` | 32 | | `exd→` | `export { destructuredModule } from 'module'` | 33 | | `exa→` | `export { originalName as aliasName} from 'module'` | 34 | | `enf→` | `export const functionName = (params) => { }` | 35 | | `edf→` | `export default (params) => { }` | 36 | | `met→` | `methodName = (params) => { }` | 37 | | `fre→` | `arrayName.forEach(element => { }` | 38 | | `fof→` | `for(let itemName of objectName { }` | 39 | | `fin→` | `for(let itemName in objectName { }` | 40 | | `anfn→` | `(params) => { }` | 41 | | `nfn→` | `const functionName = (params) => { }` | 42 | | `dob→` | `const {propName} = objectToDescruct` | 43 | | `dar→` | `const [propName] = arrayToDescruct` | 44 | | `sti→` | `setInterval(() => { }, intervalTime` | 45 | | `sto→` | `setTimeout(() => { }, delayTime` | 46 | | `prom→` | `return new Promise((resolve, reject) => { }` | 47 | | `cmmb→` | `comment block` | 48 | | `cp→` | `const { } = this.props` | 49 | | `cs→` | `const { } = this.state` | 50 | 51 | ## React 52 | 53 | | Prefix | Method | 54 | | ----------: | ----------------------------------------------------------------------------------- | 55 | | `imr→` | `import React from 'react'` | 56 | | `imrd→` | `import ReactDOM from 'react-dom'` | 57 | | `imrc→` | `import React, { Component } from 'react'` | 58 | | `imrcp→` | `import React, { Component } from 'react' & import PropTypes from 'prop-types'` | 59 | | `imrpc→` | `import React, { PureComponent } from 'react'` | 60 | | `imrpcp→` | `import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'` | 61 | | `imrm→` | `import React, { memo } from 'react'` | 62 | | `imrmp→` | `import React, { memo } from 'react' & import PropTypes from 'prop-types'` | 63 | | `impt→` | `import PropTypes from 'prop-types'` | 64 | | `imrr→` | `import { BrowserRouter as Router, Route, Link } from 'react-router-dom'` | 65 | | `redux→` | `import { connect } from 'react-redux'` | 66 | | `rconst→` | `constructor(props) with this.state` | 67 | | `rconc→` | `constructor(props, context) with this.state` | 68 | | `est→` | `this.state = { }` | 69 | | `cwm→` | `componentWillMount = () => { }` DEPRECATED!!! | 70 | | `cdm→` | `componentDidMount = () => { }` | 71 | | `cwr→` | `componentWillReceiveProps = (nextProps) => { }` DEPRECATED!!! | 72 | | `scu→` | `shouldComponentUpdate = (nextProps, nextState) => { }` | 73 | | `cwup→` | `componentWillUpdate = (nextProps, nextState) => { }` DEPRECATED!!! | 74 | | `cdup→` | `componentDidUpdate = (prevProps, prevState) => { }` | 75 | | `cwun→` | `componentWillUnmount = () => { }` | 76 | | `gdsfp→` | `static getDerivedStateFromProps(nextProps, prevState) { }` | 77 | | `gsbu→` | `getSnapshotBeforeUpdate = (prevProps, prevState) => { }` | 78 | | `ren→` | `render() { return( ) }` | 79 | | `sst→` | `this.setState({ })` | 80 | | `ssf→` | `this.setState((state, props) => return { })` | 81 | | `props→` | `this.props.propName` | 82 | | `state→` | `this.state.stateName` | 83 | | `rcontext→` | `const ${1:contextName} = React.createContext()` | 84 | | `cref→` | `this.${1:refName}Ref = React.createRef()` | 85 | | `fref→` | `const ref = React.createRef()` | 86 | | `bnd→` | `this.methodName = this.methodName.bind(this)` | 87 | 88 | ## React Hooks 89 | 90 | - All hooks from [official docs](https://reactjs.org/docs/hooks-reference.html) are added with hook name prefix. 91 | 92 | ## React Native 93 | 94 | | Prefix | Method | 95 | | ---------: | -------------------------------------- | 96 | | `imrn→` | `import { $1 } from 'react-native'` | 97 | | `rnstyle→` | `const styles = StyleSheet.create({})` | 98 | 99 | ## Redux 100 | 101 | | Prefix | Method | 102 | | -----------: | ------------------------- | 103 | | `rxaction→` | `redux action template` | 104 | | `rxconst→` | `export const $1 = '$1'` | 105 | | `rxreducer→` | `redux reducer template` | 106 | | `rxselect→` | `redux selector template` | 107 | 108 | ## PropTypes 109 | 110 | | Prefix | Method | 111 | | --------: | ---------------------------------------- | 112 | | `pta→` | `PropTypes.array` | 113 | | `ptar→` | `PropTypes.array.isRequired` | 114 | | `ptb→` | `PropTypes.bool` | 115 | | `ptbr→` | `PropTypes.bool.isRequired` | 116 | | `ptf→` | `PropTypes.func` | 117 | | `ptfr→` | `PropTypes.func.isRequired` | 118 | | `ptn→` | `PropTypes.number` | 119 | | `ptnr→` | `PropTypes.number.isRequired` | 120 | | `pto→` | `PropTypes.object` | 121 | | `ptor→` | `PropTypes.object.isRequired` | 122 | | `pts→` | `PropTypes.string` | 123 | | `ptsr→` | `PropTypes.string.isRequired` | 124 | | `ptnd→` | `PropTypes.node` | 125 | | `ptndr→` | `PropTypes.node.isRequired` | 126 | | `ptel→` | `PropTypes.element` | 127 | | `ptelr→` | `PropTypes.element.isRequired` | 128 | | `pti→` | `PropTypes.instanceOf(name)` | 129 | | `ptir→` | `PropTypes.instanceOf(name).isRequired` | 130 | | `pte→` | `PropTypes.oneOf([name])` | 131 | | `pter→` | `PropTypes.oneOf([name]).isRequired` | 132 | | `ptet→` | `PropTypes.oneOfType([name])` | 133 | | `ptetr→` | `PropTypes.oneOfType([name]).isRequired` | 134 | | `ptao→` | `PropTypes.arrayOf(name)` | 135 | | `ptaor→` | `PropTypes.arrayOf(name).isRequired` | 136 | | `ptoo→` | `PropTypes.objectOf(name)` | 137 | | `ptoor→` | `PropTypes.objectOf(name).isRequired` | 138 | | `ptsh→` | `PropTypes.shape({ })` | 139 | | `ptshr→` | `PropTypes.shape({ }).isRequired` | 140 | | `ptany→` | `PropTypes.any` | 141 | | `ptypes→` | `static propTypes = {}` | 142 | 143 | ## GraphQL 144 | 145 | |`graphql→`|`import { compose, graphql } from 'react-apollo'`| 146 | 147 | ### `expgql` 148 | 149 | ```js 150 | export default compose(graphql($1, { name: $2 }))($3); 151 | ``` 152 | 153 | ## Console 154 | 155 | | Prefix | Method | 156 | | -----: | ----------------------------------- | 157 | | `clg→` | `console.log(object)` | 158 | | `clo→` | `console.log("object", object)` | 159 | | `ctm→` | `console.time("timeId")` | 160 | | `cte→` | `console.timeEnd("timeId")` | 161 | | `cas→` | `console.assert(expression,object)` | 162 | | `ccl→` | `console.clear()` | 163 | | `cco→` | `console.count(label)` | 164 | | `cdi→` | `console.dir` | 165 | | `cer→` | `console.error(object)` | 166 | | `cgr→` | `console.group(label)` | 167 | | `cge→` | `console.groupEnd()` | 168 | | `ctr→` | `console.trace(object)` | 169 | | `cwa→` | `console.warn` | 170 | | `cin→` | `console.info` | 171 | 172 | ## React Components 173 | 174 | ### `rcc` 175 | 176 | ```javascript 177 | import React, { Component } from 'react'; 178 | 179 | export default class FileName extends Component { 180 | render() { 181 | return
$2
; 182 | } 183 | } 184 | ``` 185 | 186 | ### `rce` 187 | 188 | ```javascript 189 | import React, { Component } from 'react'; 190 | 191 | export class FileName extends Component { 192 | render() { 193 | return
$2
; 194 | } 195 | } 196 | 197 | export default $1; 198 | ``` 199 | 200 | ### `rcep` 201 | 202 | ```javascript 203 | import React, { Component } from 'react'; 204 | import PropTypes from 'prop-types'; 205 | 206 | export class FileName extends Component { 207 | static propTypes = {}; 208 | 209 | render() { 210 | return
$2
; 211 | } 212 | } 213 | 214 | export default $1; 215 | ``` 216 | 217 | ### `rpc` 218 | 219 | ```javascript 220 | import React, { PureComponent } from 'react'; 221 | 222 | export default class FileName extends PureComponent { 223 | render() { 224 | return
$2
; 225 | } 226 | } 227 | ``` 228 | 229 | ### `rpcp` 230 | 231 | ```javascript 232 | import React, { PureComponent } from 'react'; 233 | import PropTypes from 'prop-types'; 234 | 235 | export default class FileName extends PureComponent { 236 | static propTypes = {}; 237 | 238 | render() { 239 | return
$2
; 240 | } 241 | } 242 | ``` 243 | 244 | ### `rpce` 245 | 246 | ```javascript 247 | import React, { PureComponent } from 'react'; 248 | import PropTypes from 'prop-types'; 249 | 250 | export class FileName extends PureComponent { 251 | static propTypes = {}; 252 | 253 | render() { 254 | return
$2
; 255 | } 256 | } 257 | 258 | export default FileName; 259 | ``` 260 | 261 | ### `rccp` 262 | 263 | ```javascript 264 | import React, { Component } from 'react'; 265 | import PropTypes from 'prop-types'; 266 | 267 | export default class FileName extends Component { 268 | static propTypes = { 269 | $2: $3, 270 | }; 271 | 272 | render() { 273 | return
$4
; 274 | } 275 | } 276 | ``` 277 | 278 | ### `rfcp` 279 | 280 | ```javascript 281 | import React from 'react'; 282 | import PropTypes from 'prop-types'; 283 | 284 | function $1(props) { 285 | return
$0
; 286 | } 287 | 288 | $1.propTypes = {}; 289 | 290 | export default $1; 291 | ``` 292 | 293 | ### `rfc` 294 | 295 | ```javascript 296 | import React from 'react'; 297 | 298 | export default function $1() { 299 | return
$0
; 300 | } 301 | ``` 302 | 303 | ### `rfce` 304 | 305 | ```javascript 306 | import React from 'react'; 307 | 308 | function $1() { 309 | return
$0
; 310 | } 311 | 312 | export default $1; 313 | ``` 314 | 315 | ### `rafcp` 316 | 317 | ```javascript 318 | import React from 'react'; 319 | import PropTypes from 'prop-types'; 320 | 321 | const $1 = props => { 322 | return
$0
; 323 | }; 324 | 325 | $1.propTypes = {}; 326 | 327 | export default $1; 328 | ``` 329 | 330 | ### `rafc` 331 | 332 | ```javascript 333 | import React from 'react'; 334 | 335 | const $1 = () => { 336 | return
$0
; 337 | }; 338 | 339 | export default $1; 340 | ``` 341 | 342 | ### `rafce` 343 | 344 | ```javascript 345 | import React from 'react'; 346 | 347 | const $1 = () => { 348 | return
$0
; 349 | }; 350 | 351 | export default $1; 352 | ``` 353 | 354 | ### `rmc` 355 | 356 | ```javascript 357 | import React, { memo } from 'react'; 358 | 359 | export default memo(function $1() { 360 | return
$0
; 361 | }); 362 | ``` 363 | 364 | ### `rmcp` 365 | 366 | ```javascript 367 | import React, { memo } from 'react'; 368 | import PropTypes from 'prop-types'; 369 | 370 | const $1 = memo(function $1(props) { 371 | return
$0
; 372 | }); 373 | 374 | $1.propTypes = {}; 375 | 376 | export default $1; 377 | ``` 378 | 379 | ### `rcredux` 380 | 381 | ```javascript 382 | import React, { Component } from 'react'; 383 | import PropTypes from 'prop-types'; 384 | import { connect } from 'react-redux'; 385 | 386 | export class FileName extends Component { 387 | static propTypes = { 388 | $2: $3, 389 | }; 390 | 391 | render() { 392 | return
$4
; 393 | } 394 | } 395 | 396 | const mapStateToProps = state => ({}); 397 | 398 | const mapDispatchToProps = {}; 399 | 400 | export default connect( 401 | mapStateToProps, 402 | mapDispatchToProps, 403 | )(FileName); 404 | ``` 405 | 406 | ### `reduxmap` 407 | 408 | ```javascript 409 | const mapStateToProps = state => ({}); 410 | 411 | const mapDispatchToProps = {}; 412 | ``` 413 | 414 | ## React Native Components 415 | 416 | ### `rnc` 417 | 418 | ```javascript 419 | import React, { Component } from 'react'; 420 | import { Text, View } from 'react-native'; 421 | 422 | export default class FileName extends Component { 423 | render() { 424 | return ( 425 | 426 | $2 427 | 428 | ); 429 | } 430 | } 431 | ``` 432 | 433 | ### `rnf` 434 | 435 | ```javascript 436 | import React from 'react'; 437 | import { View, Text } from 'react-native'; 438 | 439 | const $1 = () => { 440 | return ( 441 | 442 | $2 443 | 444 | ); 445 | }; 446 | 447 | export default $1; 448 | ``` 449 | 450 | ### `rncs` 451 | 452 | ```javascript 453 | import React, { Component } from 'react'; 454 | import { Text, StyleSheet, View } from 'react-native'; 455 | 456 | export default class FileName extends Component { 457 | render() { 458 | return ( 459 | 460 | $2 461 | 462 | ); 463 | } 464 | } 465 | 466 | const styles = StyleSheet.create({}); 467 | ``` 468 | 469 | ### `rnce` 470 | 471 | ```javascript 472 | import React, { Component } from 'react'; 473 | import { Text, View } from 'react-native'; 474 | 475 | export class FileName extends Component { 476 | render() { 477 | return ( 478 | 479 | $2 480 | 481 | ); 482 | } 483 | } 484 | 485 | export default $1; 486 | ``` 487 | 488 | ### `rncredux` 489 | 490 | ```javascript 491 | import React, { Component } from 'react'; 492 | import { View, Text } from 'react-native'; 493 | import PropTypes from 'prop-types'; 494 | import { connect } from 'react-redux'; 495 | 496 | export class FileName extends Component { 497 | static propTypes = { 498 | $2: $3, 499 | }; 500 | 501 | render() { 502 | return ( 503 | 504 | $2 505 | 506 | ); 507 | } 508 | } 509 | 510 | const mapStateToProps = state => ({}); 511 | 512 | const mapDispatchToProps = {}; 513 | 514 | export default connect( 515 | mapStateToProps, 516 | mapDispatchToProps, 517 | )(FileName); 518 | ``` 519 | 520 | ## Others 521 | 522 | ### `cmmb` 523 | 524 | ```JS 525 | /** 526 | |-------------------------------------------------- 527 | | $1 528 | |-------------------------------------------------- 529 | */ 530 | ``` 531 | 532 | ### `desc` 533 | 534 | ```javascript 535 | describe('$1', () => { 536 | $2; 537 | }); 538 | ``` 539 | 540 | ### `test` 541 | 542 | ```javascript 543 | test('should $1', () => { 544 | $2; 545 | }); 546 | ``` 547 | 548 | ### `tit` 549 | 550 | ```javascript 551 | it('should $1', () => { 552 | $2; 553 | }); 554 | ``` 555 | 556 | ### `stest` 557 | 558 | ```javascript 559 | import React from 'react' 560 | import renderer from 'react-test-renderer' 561 | 562 | import { ${1:ComponentName} } from '../${1:ComponentName}' 563 | 564 | describe('<${1:ComponentName} />', () => { 565 | const defaultProps = {} 566 | const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />) 567 | 568 | test('render', () => { 569 | expect(wrapper).toMatchSnapshot() 570 | }) 571 | }) 572 | ``` 573 | 574 | ### `srtest` 575 | 576 | ```javascript 577 | import React from 'react' 578 | import renderer from 'react-test-renderer' 579 | import { Provider } from 'react-redux' 580 | 581 | import store from 'src/store' 582 | import { ${1:ComponentName} } from '../${1:ComponentName}' 583 | 584 | describe('<${1:ComponentName} />', () => { 585 | const defaultProps = {} 586 | const wrapper = renderer.create( 587 | 588 | <${1:${TM_FILENAME_BASE}} {...defaultProps} />) 589 | , 590 | ) 591 | 592 | test('render', () => { 593 | expect(wrapper).toMatchSnapshot() 594 | }) 595 | }) 596 | ``` 597 | 598 | ### `sntest` 599 | 600 | ```javascript 601 | import 'react-native' 602 | import React from 'react' 603 | import renderer from 'react-test-renderer' 604 | 605 | import ${1:ComponentName} from '../${1:ComponentName}' 606 | 607 | describe('<${1:ComponentName} />', () => { 608 | const defaultProps = { 609 | 610 | } 611 | 612 | const wrapper = renderer.create(<${1:ComponentName} {...defaultProps} />) 613 | 614 | test('render', () => { 615 | expect(wrapper).toMatchSnapshot() 616 | }) 617 | }) 618 | ``` 619 | 620 | ### `snrtest` 621 | 622 | ```javascript 623 | import 'react-native' 624 | import React from 'react' 625 | import renderer from 'react-test-renderer' 626 | import { Provider } from 'react-redux' 627 | 628 | import store from 'src/store/configureStore' 629 | import ${1:ComponentName} from '../${1:ComponentName}' 630 | 631 | describe('<${1:ComponentName} />', () => { 632 | const defaultProps = {} 633 | const wrapper = renderer.create( 634 | 635 | <${1:ComponentName} {...defaultProps} /> 636 | , 637 | ) 638 | 639 | test('render', () => { 640 | expect(wrapper).toMatchSnapshot() 641 | }) 642 | }) 643 | ``` 644 | 645 | ### `hocredux` 646 | 647 | ```javascript 648 | import React from 'react' 649 | import PropTypes from 'prop-types' 650 | import { connect } from 'react-redux' 651 | 652 | export const mapStateToProps = state => ({ 653 | 654 | }) 655 | 656 | export const mapDispatchToProps = { 657 | 658 | } 659 | 660 | export const ${1:hocComponentName} = (WrappedComponent) => { 661 | const hocComponent = ({ ...props }) => 662 | 663 | hocComponent.propTypes = { 664 | } 665 | 666 | return hocComponent 667 | } 668 | 669 | export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent)) 670 | ``` 671 | 672 | ### `hoc` 673 | 674 | ```javascript 675 | import React from 'react'; 676 | import PropTypes from 'prop-types'; 677 | 678 | export default WrappedComponent => { 679 | const hocComponent = ({ ...props }) => ; 680 | 681 | hocComponent.propTypes = {}; 682 | 683 | return hocComponent; 684 | }; 685 | ``` 686 | -------------------------------------------------------------------------------- /snippets/CommentBigBlock.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | cmmb 8 | source.js,source.jsx,source.ts,source.tsx 9 | Comment Big Block 10 | -------------------------------------------------------------------------------- /snippets/anonymousFunction.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | ${2} 4 | } 5 | ]]> 6 | anfn 7 | source.js,source.jsx,source.ts,source.tsx 8 | anonymousFunction 9 | -------------------------------------------------------------------------------- /snippets/bindThis.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | bnd 4 | source.js,source.jsx,source.ts,source.tsx 5 | bindThis 6 | -------------------------------------------------------------------------------- /snippets/classConstructor.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 10 | rconst 11 | source.js,source.jsx,source.ts,source.tsx 12 | classConstructor 13 | -------------------------------------------------------------------------------- /snippets/componentDidMount.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | cdm 7 | source.js,source.jsx,source.ts,source.tsx 8 | componentDidMount 9 | -------------------------------------------------------------------------------- /snippets/componentDidUpdate.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | cdup 7 | source.js,source.jsx,source.ts,source.tsx 8 | componentDidUpdate 9 | -------------------------------------------------------------------------------- /snippets/componentProps.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | props 4 | source.js,source.jsx,source.ts,source.tsx 5 | componentProps 6 | -------------------------------------------------------------------------------- /snippets/componentRender.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | $0 6 | 7 | ) 8 | }]]> 9 | ren 10 | source.js,source.jsx,source.ts,source.tsx 11 | componentRender 12 | -------------------------------------------------------------------------------- /snippets/componentSetStateFunc.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { return { $0 }}) 3 | ]]> 4 | ssf 5 | source.js,source.jsx,source.ts,source.tsx 6 | componentSetStateFunc 7 | -------------------------------------------------------------------------------- /snippets/componentSetStateObject.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | sst 4 | source.js,source.jsx,source.ts,source.tsx 5 | componentSetStateObject 6 | -------------------------------------------------------------------------------- /snippets/componentState.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | state 4 | source.js,source.jsx,source.ts,source.tsx 5 | componentState 6 | -------------------------------------------------------------------------------- /snippets/componentWillMount.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | cwm 7 | source.js,source.jsx,source.ts,source.tsx 8 | componentWillMount 9 | -------------------------------------------------------------------------------- /snippets/componentWillReceiveProps.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | cwr 7 | source.js,source.jsx,source.ts,source.tsx 8 | componentWillReceiveProps 9 | -------------------------------------------------------------------------------- /snippets/componentWillUnmount.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | cwun 7 | source.js,source.jsx,source.ts,source.tsx 8 | componentWillUnmount 9 | -------------------------------------------------------------------------------- /snippets/componentWillUpdate.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | cwup 7 | source.js,source.jsx,source.ts,source.tsx 8 | componentWillUpdate 9 | -------------------------------------------------------------------------------- /snippets/consoleAssert.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cas 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleAssert 6 | -------------------------------------------------------------------------------- /snippets/consoleClear.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ccl 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleClear 6 | -------------------------------------------------------------------------------- /snippets/consoleCount.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cco 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleCount 6 | -------------------------------------------------------------------------------- /snippets/consoleDir.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cdi 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleDir 6 | -------------------------------------------------------------------------------- /snippets/consoleError.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cer 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleError 6 | -------------------------------------------------------------------------------- /snippets/consoleGroup.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cgr 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleGroup 6 | -------------------------------------------------------------------------------- /snippets/consoleGroupEnd.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cge 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleGroupEnd 6 | -------------------------------------------------------------------------------- /snippets/consoleInfo.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cin 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleInfo 6 | -------------------------------------------------------------------------------- /snippets/consoleLog.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | clg 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleLog 6 | -------------------------------------------------------------------------------- /snippets/consoleLogObject.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | clo 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleLogObject 6 | -------------------------------------------------------------------------------- /snippets/consoleTime.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ctm 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleTime 6 | -------------------------------------------------------------------------------- /snippets/consoleTimeEnd.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cte 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleTimeEnd 6 | -------------------------------------------------------------------------------- /snippets/consoleTrace.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ctr 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleTrace 6 | -------------------------------------------------------------------------------- /snippets/consoleWarn.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cwa 4 | source.js,source.jsx,source.ts,source.tsx 5 | consoleWarn 6 | -------------------------------------------------------------------------------- /snippets/createContext.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | rcontext 5 | source.js,source.jsx,source.ts,source.tsx 6 | createContext 7 | -------------------------------------------------------------------------------- /snippets/createRef.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | cref 5 | source.js,source.jsx,source.ts,source.tsx 6 | createRef 7 | -------------------------------------------------------------------------------- /snippets/describeBlock.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | $0 4 | }) 5 | ]]> 6 | desc 7 | source.js,source.jsx,source.ts,source.tsx 8 | describeBlock 9 | -------------------------------------------------------------------------------- /snippets/destructProps.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cp 4 | source.js,source.jsx,source.ts,source.tsx 5 | destructProps 6 | -------------------------------------------------------------------------------- /snippets/destructState.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | cs 4 | source.js,source.jsx,source.ts,source.tsx 5 | destructState 6 | -------------------------------------------------------------------------------- /snippets/destructingArray.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | dar 4 | source.js,source.jsx,source.ts,source.tsx 5 | destructingArray 6 | -------------------------------------------------------------------------------- /snippets/destructingObject.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | dob 4 | source.js,source.jsx,source.ts,source.tsx 5 | destructingObject 6 | -------------------------------------------------------------------------------- /snippets/emptyState.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | est 7 | source.js,source.jsx,source.ts,source.tsx 8 | emptyState 9 | -------------------------------------------------------------------------------- /snippets/exportAs.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | exa 4 | source.js,source.jsx,source.ts,source.tsx 5 | exportAs 6 | -------------------------------------------------------------------------------- /snippets/exportDefault.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | exp 4 | source.js,source.jsx,source.ts,source.tsx 5 | exportDefault 6 | -------------------------------------------------------------------------------- /snippets/exportDefaultFunction.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | $0 4 | } 5 | ]]> 6 | edf 7 | source.js,source.jsx,source.ts,source.tsx 8 | exportDefaultFunction 9 | -------------------------------------------------------------------------------- /snippets/exportDestructing.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | exd 4 | source.js,source.jsx,source.ts,source.tsx 5 | exportDestructing 6 | -------------------------------------------------------------------------------- /snippets/exportGraphQL.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | expgql 6 | source.js,source.jsx,source.ts,source.tsx 7 | exportGraphQL 8 | -------------------------------------------------------------------------------- /snippets/exportNamedFunction.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | $0 4 | } 5 | ]]> 6 | enf 7 | source.js,source.jsx,source.ts,source.tsx 8 | exportNamedFunction 9 | -------------------------------------------------------------------------------- /snippets/forEach.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | ${0} 4 | }) 5 | ]]> 6 | fre 7 | source.js,source.jsx,source.ts,source.tsx 8 | forEach 9 | -------------------------------------------------------------------------------- /snippets/forIn.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | fin 7 | source.js,source.jsx,source.ts,source.tsx 8 | forIn 9 | -------------------------------------------------------------------------------- /snippets/forOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | fof 7 | source.js,source.jsx,source.ts,source.tsx 8 | forOf 9 | -------------------------------------------------------------------------------- /snippets/forwardRef.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | fref 5 | source.js,source.jsx,source.ts,source.tsx 6 | forwardRef 7 | -------------------------------------------------------------------------------- /snippets/getDerivedStateFromProps.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | gdsfp 6 | source.js,source.jsx,source.ts,source.tsx 7 | getDerivedStateFromProps 8 | -------------------------------------------------------------------------------- /snippets/getSnapshotBeforeUpdate.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | $0 4 | } 5 | ]]> 6 | gsbu 7 | source.js,source.jsx,source.ts,source.tsx 8 | getSnapshotBeforeUpdate 9 | -------------------------------------------------------------------------------- /snippets/graphQLForComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | graphql 5 | source.js,source.jsx,source.ts,source.tsx 6 | graphQLForComponent 7 | -------------------------------------------------------------------------------- /snippets/hocComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 6 | const hocComponent = ({ ...props }) => 7 | 8 | hocComponent.propTypes = { 9 | } 10 | 11 | return hocComponent 12 | } 13 | ]]> 14 | hoc 15 | source.js,source.jsx,source.ts,source.tsx 16 | hocComponent 17 | -------------------------------------------------------------------------------- /snippets/hocComponentWithRedux.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ({ 7 | 8 | }) 9 | 10 | export const mapDispatchToProps = { 11 | 12 | } 13 | 14 | export const ${1:hocComponentName} = (WrappedComponent) => { 15 | const hocComponent = ({ ...props }) => 16 | 17 | hocComponent.propTypes = { 18 | } 19 | 20 | return hocComponent 21 | } 22 | 23 | export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent)) 24 | ]]> 25 | hocredux 26 | source.js,source.jsx,source.ts,source.tsx 27 | hocComponentWithRedux 28 | -------------------------------------------------------------------------------- /snippets/import.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | imp 4 | source.js,source.jsx,source.ts,source.tsx 5 | import 6 | -------------------------------------------------------------------------------- /snippets/importAs.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ima 4 | source.js,source.jsx,source.ts,source.tsx 5 | importAs 6 | -------------------------------------------------------------------------------- /snippets/importDestructing.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | imd 4 | source.js,source.jsx,source.ts,source.tsx 5 | importDestructing 6 | -------------------------------------------------------------------------------- /snippets/importEverything.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ime 4 | source.js,source.jsx,source.ts,source.tsx 5 | importEverything 6 | -------------------------------------------------------------------------------- /snippets/importNoModuleName.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | imn 4 | source.js,source.jsx,source.ts,source.tsx 5 | importNoModuleName 6 | -------------------------------------------------------------------------------- /snippets/importPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | impt 5 | source.js,source.jsx,source.ts,source.tsx 6 | import PropTypes 7 | -------------------------------------------------------------------------------- /snippets/importReact.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | imrpc 5 | source.js,source.jsx,source.ts,source.tsx 6 | import React 7 | -------------------------------------------------------------------------------- /snippets/importReactDOM.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | imrd 5 | source.js,source.jsx,source.ts,source.tsx 6 | import ReactDOM 7 | -------------------------------------------------------------------------------- /snippets/importReactPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | imrpcp 6 | source.js,source.jsx,source.ts,source.tsx 7 | import React & PropTypes 8 | -------------------------------------------------------------------------------- /snippets/importReactRouter.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | imrr 5 | source.js,source.jsx,source.ts,source.tsx 6 | import React Router 7 | -------------------------------------------------------------------------------- /snippets/importReactmemo.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | imrm 5 | source.js,source.jsx,source.ts,source.tsx 6 | import React, { memo } 7 | -------------------------------------------------------------------------------- /snippets/importReactmemoPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | imrmp 6 | source.js,source.jsx,source.ts,source.tsx 7 | import React, { memo } & PropTypes 8 | -------------------------------------------------------------------------------- /snippets/importreduxstatement.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | redux 5 | source.js,source.jsx,source.ts,source.tsx 6 | import redux statement 7 | -------------------------------------------------------------------------------- /snippets/itBlock.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | $0 4 | }) 5 | ]]> 6 | tit 7 | source.js,source.jsx,source.ts,source.tsx 8 | itBlock 9 | -------------------------------------------------------------------------------- /snippets/mappingToProps.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ({ 3 | ${1} 4 | }) 5 | 6 | const mapDispatchToProps = { 7 | 8 | } 9 | ]]> 10 | reduxmap 11 | source.js,source.jsx,source.ts,source.tsx 12 | mappingToProps 13 | -------------------------------------------------------------------------------- /snippets/method.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | ${0} 4 | } 5 | ]]> 6 | met 7 | source.js,source.jsx,source.ts,source.tsx 8 | method 9 | -------------------------------------------------------------------------------- /snippets/namedFunction.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | ${3} 4 | } 5 | ]]> 6 | nfn 7 | source.js,source.jsx,source.ts,source.tsx 8 | namedFunction 9 | -------------------------------------------------------------------------------- /snippets/promise.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | ${1} 4 | }) 5 | ]]> 6 | prom 7 | source.js,source.jsx,source.ts,source.tsx 8 | promise 9 | -------------------------------------------------------------------------------- /snippets/propTypeAny.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptany 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeAny 6 | -------------------------------------------------------------------------------- /snippets/propTypeArray.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | pta 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeArray 6 | -------------------------------------------------------------------------------- /snippets/propTypeArrayOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptao 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeArrayOf 6 | -------------------------------------------------------------------------------- /snippets/propTypeArrayOfRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptaor 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeArrayOfRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeArrayRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptar 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeArrayRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeBool.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptb 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeBool 6 | -------------------------------------------------------------------------------- /snippets/propTypeBoolRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptbr 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeBoolRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeElement.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptel 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeElement 6 | -------------------------------------------------------------------------------- /snippets/propTypeElementRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptelr 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeElementRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeEnum.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | pte 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeEnum 6 | -------------------------------------------------------------------------------- /snippets/propTypeEnumRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | pter 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeEnumRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeFunc.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptf 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeFunc 6 | -------------------------------------------------------------------------------- /snippets/propTypeFuncRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptfr 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeFuncRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeInstanceOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | pti 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeInstanceOf 6 | -------------------------------------------------------------------------------- /snippets/propTypeInstanceOfRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptir 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeInstanceOfRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeNode.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptnd 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeNode 6 | -------------------------------------------------------------------------------- /snippets/propTypeNodeRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptndr 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeNodeRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeNumber.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptn 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeNumber 6 | -------------------------------------------------------------------------------- /snippets/propTypeNumberRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptnr 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeNumberRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeObject.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | pto 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeObject 6 | -------------------------------------------------------------------------------- /snippets/propTypeObjectOf.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptoo 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeObjectOf 6 | -------------------------------------------------------------------------------- /snippets/propTypeObjectOfRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptoor 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeObjectOfRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeObjectRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptor 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeObjectRequired 6 | -------------------------------------------------------------------------------- /snippets/propTypeOneOfType.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptet 6 | source.js,source.jsx,source.ts,source.tsx 7 | propTypeOneOfType 8 | -------------------------------------------------------------------------------- /snippets/propTypeOneOfTypeRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptetr 6 | source.js,source.jsx,source.ts,source.tsx 7 | propTypeOneOfTypeRequired 8 | -------------------------------------------------------------------------------- /snippets/propTypeShape.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptsh 6 | source.js,source.jsx,source.ts,source.tsx 7 | propTypeShape 8 | -------------------------------------------------------------------------------- /snippets/propTypeShapeRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | ptshr 6 | source.js,source.jsx,source.ts,source.tsx 7 | propTypeShapeRequired 8 | -------------------------------------------------------------------------------- /snippets/propTypeString.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | pts 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeString 6 | -------------------------------------------------------------------------------- /snippets/propTypeStringRequired.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | ptsr 4 | source.js,source.jsx,source.ts,source.tsx 5 | propTypeStringRequired 6 | -------------------------------------------------------------------------------- /snippets/propertyGet.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | pge 7 | source.js,source.jsx,source.ts,source.tsx 8 | propertyGet 9 | -------------------------------------------------------------------------------- /snippets/propertyset.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | pse 7 | source.js,source.jsx,source.ts,source.tsx 8 | propertySet 9 | -------------------------------------------------------------------------------- /snippets/reactArrowFunctionComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 5 | return ( 6 |
7 | $0 8 |
9 | ) 10 | } 11 | 12 | export default ${1:${TM_FILENAME_BASE}} 13 | ]]> 14 | rafc,rafce 15 | source.js,source.jsx,source.ts,source.tsx 16 | reactArrowFunctionComponent 17 | -------------------------------------------------------------------------------- /snippets/reactArrowFunctionComponentWithPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 6 | return ( 7 |
8 | $0 9 |
10 | ) 11 | } 12 | 13 | ${1:${TM_FILENAME_BASE}}.propTypes = { 14 | 15 | } 16 | 17 | export default ${1:${TM_FILENAME_BASE}} 18 | ]]> 19 | rafcp 20 | source.js,source.jsx,source.ts,source.tsx 21 | reactArrowFunctionComponentWithPropTypes 22 | -------------------------------------------------------------------------------- /snippets/reactClassCompoment.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 8 | $0 9 | 10 | ) 11 | } 12 | } 13 | ]]> 14 | rcc 15 | source.js,source.jsx,source.ts,source.tsx 16 | reactClassCompoment 17 | -------------------------------------------------------------------------------- /snippets/reactClassCompomentPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 13 | $0 14 | 15 | ) 16 | } 17 | } 18 | ]]> 19 | rccp 20 | source.js,source.jsx,source.ts,source.tsx 21 | reactClassCompomentPropTypes 22 | -------------------------------------------------------------------------------- /snippets/reactClassCompomentRedux.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 14 | $0 15 | 16 | ) 17 | } 18 | } 19 | 20 | const mapStateToProps = (state) => ({ 21 | 22 | }) 23 | 24 | const mapDispatchToProps = { 25 | 26 | } 27 | 28 | export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}}) 29 | ]]> 30 | rcredux 31 | source.js,source.jsx,source.ts,source.tsx 32 | reactClassCompomentRedux 33 | -------------------------------------------------------------------------------- /snippets/reactClassExportComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 8 | $0 9 | 10 | ) 11 | } 12 | } 13 | 14 | export default ${1:${TM_FILENAME_BASE}} 15 | ]]> 16 | rce 17 | source.js,source.jsx,source.ts,source.tsx 18 | reactClassExportComponent 19 | -------------------------------------------------------------------------------- /snippets/reactClassExportComponentWithPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 13 | $0 14 | 15 | ) 16 | } 17 | } 18 | 19 | export default ${1:${TM_FILENAME_BASE}} 20 | ]]> 21 | rcep 22 | source.js,source.jsx,source.ts,source.tsx 23 | reactClassExportComponentWithPropTypes 24 | -------------------------------------------------------------------------------- /snippets/reactClassExportPureComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 8 | $0 9 | 10 | ) 11 | } 12 | } 13 | 14 | export default ${1:$TM_FILENAME_BASE} 15 | ]]> 16 | rpce 17 | source.js,source.jsx,source.ts,source.tsx 18 | reactClassExportPureComponent 19 | -------------------------------------------------------------------------------- /snippets/reactClassPureComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 8 | $0 9 | 10 | ) 11 | } 12 | } 13 | ]]> 14 | rpc 15 | source.js,source.jsx,source.ts,source.tsx 16 | reactClassPureComponent 17 | -------------------------------------------------------------------------------- /snippets/reactClassPureComponentWithPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 13 | $0 14 | 15 | ) 16 | } 17 | } 18 | ]]> 19 | rpcp 20 | source.js,source.jsx,source.ts,source.tsx 21 | reactClassPureComponentWithPropTypes 22 | -------------------------------------------------------------------------------- /snippets/reactFunctionMemoComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | $0 8 | 9 | ) 10 | }) 11 | ]]> 12 | rmc 13 | source.js,source.jsx,source.ts,source.tsx 14 | reactFunctionMemoComponent 15 | -------------------------------------------------------------------------------- /snippets/reactFunctionMemoComponentWithPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 8 | $0 9 | 10 | ) 11 | }) 12 | 13 | ${1:${TM_FILENAME_BASE}}.propTypes = { 14 | 15 | } 16 | 17 | export default ${1:${TM_FILENAME_BASE}} 18 | ]]> 19 | rmcp 20 | source.js,source.jsx,source.ts,source.tsx 21 | reactFunctionMemoComponentWithPropTypes 22 | -------------------------------------------------------------------------------- /snippets/reactFunctionalComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | $0 8 | 9 | ) 10 | } 11 | ]]> 12 | rfc 13 | source.js,source.jsx,source.ts,source.tsx 14 | reactFunctionalComponent 15 | -------------------------------------------------------------------------------- /snippets/reactFunctionalComponentWithPropTypes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 8 | $0 9 | 10 | ) 11 | } 12 | 13 | ${1:${TM_FILENAME_BASE}}.propTypes = { 14 | 15 | } 16 | 17 | export default ${1:${TM_FILENAME_BASE}} 18 | 19 | ]]> 20 | rfcp 21 | source.js,source.jsx,source.ts,source.tsx 22 | reactFunctionalComponentWithPropTypes 23 | -------------------------------------------------------------------------------- /snippets/reactFunctionalExportComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 7 | $0 8 | 9 | ) 10 | } 11 | 12 | export default ${1:${TM_FILENAME_BASE}} 13 | ]]> 14 | rfce 15 | source.js,source.jsx,source.ts,source.tsx 16 | reactFunctionalExportComponent 17 | -------------------------------------------------------------------------------- /snippets/reactNativeArrowFunctionComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 6 | return ( 7 | 8 | $0 9 | 10 | ) 11 | } 12 | 13 | export default ${1:${TM_FILENAME_BASE}} 14 | ]]> 15 | rnf 16 | source.js,source.jsx,source.ts,source.tsx 17 | reactNativeArrowFunctionComponent 18 | -------------------------------------------------------------------------------- /snippets/reactNativeClassComponentRedux.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 15 | ${2:textInComponent} 16 | 17 | ) 18 | } 19 | } 20 | 21 | const mapStateToProps = (state) => ({ 22 | 23 | }) 24 | 25 | const mapDispatchToProps = { 26 | 27 | } 28 | 29 | export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}}) 30 | ]]> 31 | rncredux 32 | source.js,source.jsx,source.ts,source.tsx 33 | reactNativeClassComponentRedux 34 | -------------------------------------------------------------------------------- /snippets/reactNativeComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 9 | ${2:textInComponent} 10 | 11 | ) 12 | } 13 | } 14 | ]]> 15 | rnc 16 | source.js,source.jsx,source.ts,source.tsx 17 | reactNativeComponent 18 | -------------------------------------------------------------------------------- /snippets/reactNativeComponentExport.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 9 | ${2:textInComponent} 10 | 11 | ) 12 | } 13 | } 14 | 15 | export default ${1:${TM_FILENAME_BASE}} 16 | ]]> 17 | rnce 18 | source.js,source.jsx,source.ts,source.tsx 19 | reactNativeComponentExport 20 | -------------------------------------------------------------------------------- /snippets/reactNativeComponentWithStyles.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 9 | ${2:textInComponent} 10 | 11 | ) 12 | } 13 | } 14 | 15 | const styles = StyleSheet.create({}) 16 | ]]> 17 | rncs 18 | source.js,source.jsx,source.ts,source.tsx 19 | reactNativeComponentWithStyles 20 | -------------------------------------------------------------------------------- /snippets/reactNativeImport.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | imrn 4 | source.js,source.jsx,source.ts,source.tsx 5 | reactNativeImport 6 | -------------------------------------------------------------------------------- /snippets/reactNativePureComponent.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 9 | ${2:textInComponent} 10 | 11 | ) 12 | } 13 | } 14 | ]]> 15 | rnpc 16 | source.js,source.jsx,source.ts,source.tsx 17 | reactNativePureComponent 18 | -------------------------------------------------------------------------------- /snippets/reactNativePureComponentExport.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 9 | ${2:textInComponent} 10 | 11 | ) 12 | } 13 | } 14 | 15 | export default ${1:${TM_FILENAME_BASE}} 16 | ]]> 17 | rnpce 18 | source.js,source.jsx,source.ts,source.tsx 19 | reactNativePureComponentExport 20 | -------------------------------------------------------------------------------- /snippets/reactNativeStyles.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | rnstyle 7 | source.js,source.jsx,source.ts,source.tsx 8 | reactNativeStyles 9 | -------------------------------------------------------------------------------- /snippets/reduxAction.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ({ 3 | type: ${3:type}, 4 | payload 5 | }) 6 | ]]> 7 | rxaction 8 | source.js,source.jsx,source.ts,source.tsx 9 | reduxAction 10 | -------------------------------------------------------------------------------- /snippets/reduxConst.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | rxconst 4 | source.js,source.jsx,source.ts,source.tsx 5 | reduxConst 6 | -------------------------------------------------------------------------------- /snippets/reduxReducer.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 7 | switch (type) { 8 | 9 | case ${1:typeName}: 10 | return { ...state, ...payload } 11 | 12 | default: 13 | return state 14 | } 15 | } 16 | ]]> 17 | rxreducer 18 | source.js,source.jsx,source.ts,source.tsx 19 | reduxReducer 20 | -------------------------------------------------------------------------------- /snippets/reduxSelector.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | state.${2:selector} 5 | ]]> 6 | rxselect 7 | source.js,source.jsx,source.ts,source.tsx 8 | reduxSelector 9 | -------------------------------------------------------------------------------- /snippets/setInterval.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | ${2} 4 | }, ${0:intervalInms}) 5 | ]]> 6 | sti 7 | source.js,source.jsx,source.ts,source.tsx 8 | setInterval 9 | -------------------------------------------------------------------------------- /snippets/setTimeOut.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | ${2} 4 | }, ${1:delayInms}) 5 | ]]> 6 | sto 7 | source.js,source.jsx,source.ts,source.tsx 8 | setTimeOut 9 | -------------------------------------------------------------------------------- /snippets/setupReactComponentTestWithRedux.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ', () => { 10 | const defaultProps = {} 11 | const wrapper = renderer.create( 12 | 13 | <${1:${TM_FILENAME_BASE}} {...defaultProps} /> 14 | , 15 | ) 16 | 17 | test('render', () => { 18 | expect(wrapper).toMatchSnapshot() 19 | }) 20 | }) 21 | ]]> 22 | srtest 23 | source.js,source.jsx,source.ts,source.tsx 24 | setupReactComponentTestWithRedux 25 | -------------------------------------------------------------------------------- /snippets/setupReactNativeTest.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ', () => { 9 | const defaultProps = {} 10 | const wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />) 11 | 12 | test('render', () => { 13 | expect(wrapper).toMatchSnapshot() 14 | }) 15 | }) 16 | ]]> 17 | sntest 18 | source.js,source.jsx,source.ts,source.tsx 19 | setupReactNativeTest 20 | -------------------------------------------------------------------------------- /snippets/setupReactNativeTestWithRedux.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ', () => { 11 | const defaultProps = {} 12 | const wrapper = renderer.create( 13 | 14 | <${1:${TM_FILENAME_BASE}} {...defaultProps} /> 15 | , 16 | ) 17 | 18 | test('render', () => { 19 | expect(wrapper).toMatchSnapshot() 20 | }) 21 | }) 22 | ]]> 23 | snrtest 24 | source.js,source.jsx,source.ts,source.tsx 25 | setupReactNativeTestWithRedux 26 | -------------------------------------------------------------------------------- /snippets/setupReactTest.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ', () => { 8 | const defaultProps = {} 9 | const wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />) 10 | 11 | test('render', () => { 12 | expect(wrapper).toMatchSnapshot() 13 | }) 14 | }) 15 | ]]> 16 | stest 17 | source.js,source.jsx,source.ts,source.tsx 18 | setupReactTest 19 | -------------------------------------------------------------------------------- /snippets/shouldComponentUpdate.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | scu 7 | source.js,source.jsx,source.ts,source.tsx 8 | shouldComponentUpdate 9 | -------------------------------------------------------------------------------- /snippets/staticPropTpyes.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 6 | ptypes 7 | source.js,source.jsx,source.ts,source.tsx 8 | staticPropTpyes 9 | -------------------------------------------------------------------------------- /snippets/testBlock.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | $0 4 | }) 5 | ]]> 6 | test 7 | source.js,source.jsx,source.ts,source.tsx 8 | testBlock 9 | -------------------------------------------------------------------------------- /snippets/useCallback.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 4 | ${1:callback} 5 | }, 6 | [${2:input}], 7 | )]]> 8 | useCallback 9 | source.js,source.jsx,source.ts,source.tsx 10 | useCallback 11 | -------------------------------------------------------------------------------- /snippets/useContext.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | useContext 4 | source.js,source.jsx,source.ts,source.tsx 5 | useContext 6 | -------------------------------------------------------------------------------- /snippets/useDebugValue.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | useDebugValue 4 | source.js,source.jsx,source.ts,source.tsx 5 | useDebugValue 6 | -------------------------------------------------------------------------------- /snippets/useEffect.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | return () => { 4 | ${1:effect} 5 | }; 6 | }, [${2:input}])]]> 7 | useEffect 8 | source.js,source.jsx,source.ts,source.tsx 9 | useEffect 10 | -------------------------------------------------------------------------------- /snippets/useImperativeHandle.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 5 | ${2:handler} 6 | }, 7 | [${3:input}], 8 | )]]> 9 | useImperativeHandle 10 | source.js,source.jsx,source.ts,source.tsx 11 | useImperativeHandle 12 | -------------------------------------------------------------------------------- /snippets/useLayoutEffect.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | { 3 | return () => { 4 | ${1:effect} 5 | }, 6 | [${2:input}] 7 | })]]> 8 | useLayoutEffect 9 | source.js,source.jsx,source.ts,source.tsx 10 | useLayoutEffect 11 | -------------------------------------------------------------------------------- /snippets/useMemo.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | ${1:function}, ${2:input})]]> 3 | useMemo 4 | source.js,source.jsx,source.ts,source.tsx 5 | useMemo 6 | -------------------------------------------------------------------------------- /snippets/useReducer.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | useReducer 4 | source.js,source.jsx,source.ts,source.tsx 5 | useReducer 6 | -------------------------------------------------------------------------------- /snippets/useRef.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | useRef 4 | source.js,source.jsx,source.ts,source.tsx 5 | useRef 6 | -------------------------------------------------------------------------------- /snippets/useState.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | useState 4 | source.js,source.jsx,source.ts,source.tsx 5 | useState 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import snippets from './snippets.json'; 3 | 4 | /** 5 | * Various replacement patterns 6 | * @param {string} unparsed code snippet 7 | * @return {string} parsed code snippet 8 | */ 9 | const parseSnippet = text => { 10 | const parsedText = text 11 | .replace('TM_FILENAME_BASE', 'TM_FILENAME/(.+)\\..+|.*/$1/:name') 12 | .replace(', { Component }', '') // Avoid importing Component and PureComponent separately 13 | .replace(', { PureComponent }', '') 14 | .replace('extends Component', 'extends React.Component') 15 | .replace('extends PureComponent', 'extends React.PureComponent') 16 | .replace( 17 | 'const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState})', 18 | 'const [${1:state}, set${2:State}] = useState(${3:initialState})', 19 | ); 20 | 21 | return parsedText; 22 | }; 23 | 24 | /** 25 | * Get the actually code snippet and parse to fit Sublime snippet format 26 | * @param {string} body 27 | */ 28 | const getContent = body => { 29 | let sublimeContent = ''; 30 | if (typeof body === 'string') { 31 | sublimeContent = body; 32 | } else { 33 | // Some are stored as json arrays and needs to be reduced into a text snippet 34 | sublimeContent = body.reduce((total, current) => `${total}\n${current}`); 35 | } 36 | 37 | const parsedSublimeContent = parseSnippet(sublimeContent); 38 | 39 | return ``; 40 | }; 41 | 42 | /** 43 | * Get the tab trigger word 44 | * @param {string} prefix 45 | */ 46 | const getTabTrigger = prefix => `${prefix}`; 47 | 48 | /** 49 | * Get the scope field (defaults to scoure.js) 50 | */ 51 | const getScope = () => `source.js,source.jsx,source.ts,source.tsx`; 52 | 53 | /** 54 | * Get the description field 55 | * @param {string} description 56 | */ 57 | const getDescription = key => `${parseSnippet(key)}`; 58 | 59 | /** 60 | * Putting the xml tags togehter in the sublime snippet format 61 | * @param {string} content 62 | * @param {string} tabTrigger 63 | * @param {string} scope 64 | * @param {string} description [description] 65 | */ 66 | const getSnippet = (content, tabTrigger, scope, description) => ` 67 | ${content} 68 | ${tabTrigger} 69 | ${scope} 70 | ${description} 71 | `; 72 | 73 | /** 74 | * Generate the file anem 75 | * @param {string} key 76 | */ 77 | const getFilename = key => { 78 | let sublimeFilename = parseSnippet(key); 79 | sublimeFilename = sublimeFilename.replace(/ /g, '').replace(/[^\w.]/g, ''); 80 | return `${sublimeFilename}.sublime-snippet`; 81 | }; 82 | 83 | /** 84 | * Generate the snippets by iterating over the object items from the snippets.json file 85 | */ 86 | const generateSnippets = () => { 87 | for (const key in snippets) { 88 | if (!snippets.hasOwnProperty(key)) continue; 89 | const { prefix, body, description } = snippets[key]; 90 | const fileName = getFilename(key); 91 | 92 | try { 93 | const sublimeContent = getContent(body); 94 | const sublimeTabTrigger = getTabTrigger(prefix); 95 | const sublimeScope = getScope(); 96 | const sublimeDescription = getDescription(key); 97 | const sublimeSnippet = getSnippet( 98 | sublimeContent, 99 | sublimeTabTrigger, 100 | sublimeScope, 101 | sublimeDescription, 102 | ); 103 | 104 | fs.writeFile(`./snippets/${fileName}`, sublimeSnippet, function(err) { 105 | if (err) { 106 | return console.log(`Error occured writing: ${fileName}`); 107 | } 108 | console.log(`${fileName} added.`); 109 | }); 110 | } catch (err) { 111 | console.log(`Error occured creating: ${fileName} ${err}`); 112 | } 113 | } 114 | }; 115 | 116 | generateSnippets(); 117 | -------------------------------------------------------------------------------- /src/snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "import": { 3 | "prefix": "imp", 4 | "body": "import ${2:moduleName} from '${1:module}'$0" 5 | }, 6 | "importNoModuleName": { 7 | "prefix": "imn", 8 | "body": "import '${1:module}'$0" 9 | }, 10 | "importDestructing": { 11 | "prefix": "imd", 12 | "body": "import { $2 } from '${1:module}'$0" 13 | }, 14 | "importEverything": { 15 | "prefix": "ime", 16 | "body": "import * as ${2:alias} from '${1:module}'$0" 17 | }, 18 | "importAs": { 19 | "prefix": "ima", 20 | "body": "import { ${2:originalName} as ${3:alias} } from '${1:module}'$0" 21 | }, 22 | "exportDefault": { 23 | "prefix": "exp", 24 | "body": "export default $1$0" 25 | }, 26 | "exportDestructing": { 27 | "prefix": "exd", 28 | "body": "export { $2 } from '${1:module}'$0" 29 | }, 30 | "exportAs": { 31 | "prefix": "exa", 32 | "body": "export { ${2:originalName} as ${3:alias} } from '${1:module}'$0" 33 | }, 34 | "exportNamedFunction": { 35 | "prefix": "enf", 36 | "body": [ 37 | "export const ${1:functionName} = (${2:params}) => {", 38 | "\t$0", 39 | "}", 40 | "" 41 | ], 42 | "description": "Export named function in ES7 syntax" 43 | }, 44 | "exportDefaultFunction": { 45 | "prefix": "edf", 46 | "body": ["export default (${1:params}) => {", "\t$0", "}", ""], 47 | "description": "Export default function in ES7 syntax" 48 | }, 49 | "method": { 50 | "prefix": "met", 51 | "body": ["${1:methodName} = (${2:params}) => {", "\t${0}", "}", ""], 52 | "description": "Creates a method inside a class in ES7 syntax" 53 | }, 54 | "propertyGet": { 55 | "prefix": "pge", 56 | "body": ["get ${1:propertyName}() {", "\treturn this.${0}", "}", ""], 57 | "description": "Creates a getter property inside a class in ES7 syntax" 58 | }, 59 | "propertySet": { 60 | "prefix": "pse", 61 | "body": ["set ${1:propertyName}(${2:value}) {", "\t${0}", "}", ""], 62 | "description": "Creates a setter property inside a class in ES7 syntax" 63 | }, 64 | "forEach": { 65 | "prefix": "fre", 66 | "body": ["${1:array}.forEach(${2:currentItem} => {", "\t${0}", "})", ""], 67 | "description": "Creates a forEach statement in ES7 syntax" 68 | }, 69 | "forOf": { 70 | "prefix": "fof", 71 | "body": ["for(let ${1:item} of ${2:object}) {", "\t${0}", "}", ""], 72 | "description": "Iterating over property names of iterable objects" 73 | }, 74 | "forIn": { 75 | "prefix": "fin", 76 | "body": ["for(let ${1:item} in ${2:object}) {", "\t${0}", "}", ""], 77 | "description": "Iterating over property values of iterable objects" 78 | }, 79 | "anonymousFunction": { 80 | "prefix": "anfn", 81 | "body": ["(${1:params}) => {", "\t${2}", "}", ""], 82 | "description": "Creates an anonymous function in ES7 syntax" 83 | }, 84 | "namedFunction": { 85 | "prefix": "nfn", 86 | "body": ["const ${1:name} = (${2:params}) => {", "\t${3}", "}", ""], 87 | "description": "Creates a named function in ES7 syntax" 88 | }, 89 | "destructingObject": { 90 | "prefix": "dob", 91 | "body": "const {${1:propertyName}} = ${2:objectToDestruct}", 92 | "description": "Creates and assigns a local variable using object destructing" 93 | }, 94 | "destructingArray": { 95 | "prefix": "dar", 96 | "body": "const [${1:propertyName}] = ${2:arrayToDestruct}", 97 | "description": "Creates and assigns a local variable using array destructing" 98 | }, 99 | "setInterval": { 100 | "prefix": "sti", 101 | "body": ["setInterval(() => {", "\t${2}", "}, ${0:intervalInms})", ""], 102 | "description": "Executes the given function at specified intervals in ES7 syntax" 103 | }, 104 | "setTimeOut": { 105 | "prefix": "sto", 106 | "body": ["setTimeout(() => {", "\t${2}", "}, ${1:delayInms})", ""], 107 | "description": "Executes the given function after the specified delay in ES7 syntax" 108 | }, 109 | "promise": { 110 | "prefix": "prom", 111 | "body": ["return new Promise((resolve, reject) => {", "\t${1}", "})", ""], 112 | "description": "Creates and returns a new Promise in the standard ES7 syntax" 113 | }, 114 | "consoleAssert": { 115 | "prefix": "cas", 116 | "body": "console.assert(${1:expression}, ${2:object})", 117 | "description": "If the specified expression is false, the message is written to the console along with a stack trace" 118 | }, 119 | "consoleClear": { 120 | "prefix": "ccl", 121 | "body": "console.clear()", 122 | "description": "Clears the console" 123 | }, 124 | "consoleCount": { 125 | "prefix": "cco", 126 | "body": "console.count(${1:label})", 127 | "description": "Writes the the number of times that count() has been invoked at the same line and with the same label" 128 | }, 129 | "consoleDir": { 130 | "prefix": "cdi", 131 | "body": "console.dir(${1:object})", 132 | "description": "Prints a JavaScript representation of the specified object" 133 | }, 134 | "consoleError": { 135 | "prefix": "cer", 136 | "body": "console.error(${1:object})", 137 | "description": "Displays a message in the console and also includes a stack trace from where the method was called" 138 | }, 139 | "consoleGroup": { 140 | "prefix": "cgr", 141 | "body": "console.group(\"${1:label}\")", 142 | "description": "Groups and indents all following output by an additional level, until console.groupEnd() is called." 143 | }, 144 | "consoleGroupEnd": { 145 | "prefix": "cge", 146 | "body": "console.groupEnd()", 147 | "description": "Closes out the corresponding console.group()." 148 | }, 149 | "consoleLog": { 150 | "prefix": "clg", 151 | "body": "console.log(${1:object})", 152 | "description": "Displays a message in the console" 153 | }, 154 | "consoleTrace": { 155 | "prefix": "ctr", 156 | "body": "console.trace(${1:object})", 157 | "description": "Prints a stack trace from the point where the method was called" 158 | }, 159 | "consoleLogObject": { 160 | "prefix": "clo", 161 | "body": "console.log('${1:object}', ${1:object})", 162 | "description": "Logs property with name." 163 | }, 164 | "consoleTime": { 165 | "prefix": "ctm", 166 | "body": "console.time('${1:object}')", 167 | "description": "Console time wrapper" 168 | }, 169 | "consoleTimeEnd": { 170 | "prefix": "cte", 171 | "body": "console.timeEnd('${1:object}')", 172 | "description": "Console time end wrapper" 173 | }, 174 | "consoleWarn": { 175 | "prefix": "cwa", 176 | "body": "console.warn(${1:object})", 177 | "description": "Displays a message in the console but also displays a yellow warning icon along with the logged message" 178 | }, 179 | "consoleInfo": { 180 | "prefix": "cin", 181 | "body": "console.info(${1:object})", 182 | "description": "Displays a message in the console but also displays a blue information icon along with the logged message" 183 | }, 184 | "destructProps": { 185 | "prefix": "cp", 186 | "body": ["const { $1 } = this.props"], 187 | "description": "Creates and assigns a local variable using props destructing" 188 | }, 189 | "destructState": { 190 | "prefix": "cs", 191 | "body": ["const { $1 } = this.state"], 192 | "description": "Creates and assigns a local variable using state destructing" 193 | }, 194 | "import React": { 195 | "prefix": "imr", 196 | "body": ["import React from 'react'", ""] 197 | }, 198 | "import ReactDOM": { 199 | "prefix": "imrd", 200 | "body": ["import ReactDOM from 'react-dom'", ""] 201 | }, 202 | "import React, { Component }": { 203 | "prefix": "imrc", 204 | "body": ["import React, { Component } from 'react'", ""] 205 | }, 206 | "import React, { Component } & PropTypes": { 207 | "prefix": "imrcp", 208 | "body": [ 209 | "import React, { Component } from 'react'", 210 | "import PropTypes from 'prop-types'", 211 | "" 212 | ] 213 | }, 214 | "import React, { PureComponent }": { 215 | "prefix": "imrpc", 216 | "body": ["import React, { PureComponent } from 'react'", ""] 217 | }, 218 | "import React, { PureComponent } & PropTypes": { 219 | "prefix": "imrpcp", 220 | "body": [ 221 | "import React, { PureComponent } from 'react'", 222 | "import PropTypes from 'prop-types'", 223 | "" 224 | ] 225 | }, 226 | "import React, { memo }": { 227 | "prefix": "imrm", 228 | "body": ["import React, { memo } from 'react'", ""] 229 | }, 230 | "import React, { memo } & PropTypes": { 231 | "prefix": "imrmp", 232 | "body": [ 233 | "import React, { memo } from 'react'", 234 | "import PropTypes from 'prop-types'", 235 | "" 236 | ] 237 | }, 238 | "import PropTypes": { 239 | "prefix": "impt", 240 | "body": ["import PropTypes from 'prop-types'", ""] 241 | }, 242 | "import React Router": { 243 | "prefix": "imrr", 244 | "body": [ 245 | "import { BrowserRouter as Router, Route, Link } from 'react-router-dom'", 246 | "" 247 | ] 248 | }, 249 | "import redux statement": { 250 | "prefix": "redux", 251 | "body": ["import { connect } from 'react-redux'", ""] 252 | }, 253 | "reactClassCompoment": { 254 | "prefix": "rcc", 255 | "body": [ 256 | "import React, { Component } from 'react'", 257 | "", 258 | "export default class ${1:${TM_FILENAME_BASE}} extends Component {", 259 | "\trender() {", 260 | "\t\treturn (", 261 | "\t\t\t
", 262 | "\t\t\t\t$0", 263 | "\t\t\t
", 264 | "\t\t)", 265 | "\t}", 266 | "}", 267 | "" 268 | ], 269 | "description": "Creates a React component class with ES7 module system" 270 | }, 271 | "reactClassExportComponent": { 272 | "prefix": "rce", 273 | "body": [ 274 | "import React, { Component } from 'react'", 275 | "", 276 | "export class ${1:${TM_FILENAME_BASE}} extends Component {", 277 | "\trender() {", 278 | "\t\treturn (", 279 | "\t\t\t
", 280 | "\t\t\t\t$0", 281 | "\t\t\t
", 282 | "\t\t)", 283 | "\t}", 284 | "}", 285 | "", 286 | "export default ${1:${TM_FILENAME_BASE}}", 287 | "" 288 | ], 289 | "description": "Creates a React component class with ES7 module system" 290 | }, 291 | "reactFunctionalExportComponent": { 292 | "prefix": "rfce", 293 | "body": [ 294 | "import React from 'react'", 295 | "", 296 | "function ${1:${TM_FILENAME_BASE}}() {", 297 | "\treturn (", 298 | "\t\t
", 299 | "\t\t\t$0", 300 | "\t\t
", 301 | "\t)", 302 | "}", 303 | "", 304 | "export default ${1:${TM_FILENAME_BASE}}", 305 | "" 306 | ], 307 | "description": "Creates a React Functional Component with ES7 module system" 308 | }, 309 | "reactFunctionalComponent": { 310 | "prefix": "rfc", 311 | "body": [ 312 | "import React from 'react'", 313 | "", 314 | "export default function ${1:${TM_FILENAME_BASE}}() {", 315 | "\treturn (", 316 | "\t\t
", 317 | "\t\t\t$0", 318 | "\t\t
", 319 | "\t)", 320 | "}", 321 | "" 322 | ], 323 | "description": "Creates a React Functional Component with ES7 module system" 324 | }, 325 | "reactFunctionalComponentWithPropTypes": { 326 | "prefix": "rfcp", 327 | "body": [ 328 | "import React from 'react'", 329 | "import PropTypes from 'prop-types'", 330 | "", 331 | "function ${1:${TM_FILENAME_BASE}}(props) {", 332 | "\treturn (", 333 | "\t\t
", 334 | "\t\t\t$0", 335 | "\t\t
", 336 | "\t)", 337 | "}", 338 | "", 339 | "${1:${TM_FILENAME_BASE}}.propTypes = {", 340 | "", 341 | "}", 342 | "", 343 | "export default ${1:${TM_FILENAME_BASE}}", 344 | "", 345 | "" 346 | ], 347 | "description": "Creates a React Functional Component with ES7 module system with PropTypes" 348 | }, 349 | "reactArrowFunctionComponent": { 350 | "prefix": ["rafc", "rafce"], 351 | "body": [ 352 | "import React from 'react'", 353 | "", 354 | "const ${1:${TM_FILENAME_BASE}} = () => {", 355 | "\treturn (", 356 | "\t\t
", 357 | "\t\t\t$0", 358 | "\t\t
", 359 | "\t)", 360 | "}", 361 | "", 362 | "export default ${1:${TM_FILENAME_BASE}}", 363 | "" 364 | ], 365 | "description": "Creates a React Arrow Function Component with ES7 module system" 366 | }, 367 | "reactArrowFunctionComponentWithPropTypes": { 368 | "prefix": "rafcp", 369 | "body": [ 370 | "import React from 'react'", 371 | "import PropTypes from 'prop-types'", 372 | "", 373 | "const ${1:${TM_FILENAME_BASE}} = props => {", 374 | "\treturn (", 375 | "\t\t
", 376 | "\t\t\t$0", 377 | "\t\t
", 378 | "\t)", 379 | "}", 380 | "", 381 | "${1:${TM_FILENAME_BASE}}.propTypes = {", 382 | "", 383 | "}", 384 | "", 385 | "export default ${1:${TM_FILENAME_BASE}}", 386 | "" 387 | ], 388 | "description": "Creates a React Arrow Function Component with ES7 module system with PropTypes" 389 | }, 390 | "reactClassExportComponentWithPropTypes": { 391 | "prefix": "rcep", 392 | "body": [ 393 | "import React, { Component } from 'react'", 394 | "import PropTypes from 'prop-types'", 395 | "", 396 | "export class ${1:${TM_FILENAME_BASE}} extends Component {", 397 | "\tstatic propTypes = {", 398 | "", 399 | "\t}", 400 | "", 401 | "\trender() {", 402 | "\t\treturn (", 403 | "\t\t\t
", 404 | "\t\t\t\t$0", 405 | "\t\t\t
", 406 | "\t\t)", 407 | "\t}", 408 | "}", 409 | "", 410 | "export default ${1:${TM_FILENAME_BASE}}", 411 | "" 412 | ], 413 | "description": "Creates a React component class with ES7 module system" 414 | }, 415 | "reactClassPureComponent": { 416 | "prefix": "rpc", 417 | "body": [ 418 | "import React, { PureComponent } from 'react'", 419 | "", 420 | "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {", 421 | "\trender() {", 422 | "\t\treturn (", 423 | "\t\t\t
", 424 | "\t\t\t\t$0", 425 | "\t\t\t
", 426 | "\t\t)", 427 | "\t}", 428 | "}", 429 | "" 430 | ], 431 | "description": "Creates a React pure component class with ES7 module system" 432 | }, 433 | "reactClassExportPureComponent": { 434 | "prefix": "rpce", 435 | "body": [ 436 | "import React, { PureComponent } from 'react'", 437 | "", 438 | "export class ${1:${TM_FILENAME_BASE}} extends PureComponent {", 439 | "\trender() {", 440 | "\t\treturn (", 441 | "\t\t\t
", 442 | "\t\t\t\t$0", 443 | "\t\t\t
", 444 | "\t\t)", 445 | "\t}", 446 | "}", 447 | "", 448 | "export default ${1:$TM_FILENAME_BASE}", 449 | "" 450 | ], 451 | "description": "Creates a React pure component class with ES7 module system export" 452 | }, 453 | "reactClassPureComponentWithPropTypes": { 454 | "prefix": "rpcp", 455 | "body": [ 456 | "import React, { PureComponent } from 'react'", 457 | "import PropTypes from 'prop-types'", 458 | "", 459 | "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {", 460 | "\tstatic propTypes = {", 461 | "", 462 | "\t}", 463 | "", 464 | "\trender() {", 465 | "\t\treturn (", 466 | "\t\t\t
", 467 | "\t\t\t\t$0", 468 | "\t\t\t
", 469 | "\t\t)", 470 | "\t}", 471 | "}", 472 | "" 473 | ], 474 | "description": "Creates a React component class with ES7 module system" 475 | }, 476 | "reactFunctionMemoComponent": { 477 | "prefix": "rmc", 478 | "body": [ 479 | "import React, { memo } from 'react'", 480 | "", 481 | "export default memo(function ${1:${TM_FILENAME_BASE}}() {", 482 | "\treturn (", 483 | "\t\t
", 484 | "\t\t\t$0", 485 | "\t\t
", 486 | "\t)", 487 | "})", 488 | "" 489 | ], 490 | "description": "Creates a React Memo Function Component with ES7 module system" 491 | }, 492 | "reactFunctionMemoComponentWithPropTypes": { 493 | "prefix": "rmcp", 494 | "body": [ 495 | "import React, { memo } from 'react'", 496 | "import PropTypes from 'prop-types'", 497 | "", 498 | "const ${1:${TM_FILENAME_BASE}} = memo(function ${1:${TM_FILENAME_BASE}}(props) {", 499 | "\treturn (", 500 | "\t\t
", 501 | "\t\t\t$0", 502 | "\t\t
", 503 | "\t)", 504 | "})", 505 | "", 506 | "${1:${TM_FILENAME_BASE}}.propTypes = {", 507 | "", 508 | "}", 509 | "", 510 | "export default ${1:${TM_FILENAME_BASE}}", 511 | "" 512 | ], 513 | "description": "Creates a React Memo Function Component with ES7 module system with PropTypes" 514 | }, 515 | "reactClassCompomentPropTypes": { 516 | "prefix": "rccp", 517 | "body": [ 518 | "import React, { Component } from 'react'", 519 | "import PropTypes from 'prop-types'", 520 | "", 521 | "export default class ${1:${TM_FILENAME_BASE}} extends Component {", 522 | "\tstatic propTypes = {", 523 | "\t\t${2:prop}: ${3:PropTypes}", 524 | "\t}", 525 | "", 526 | "\trender() {", 527 | "\t\treturn (", 528 | "\t\t\t
", 529 | "\t\t\t\t$0", 530 | "\t\t\t
", 531 | "\t\t)", 532 | "\t}", 533 | "}", 534 | "" 535 | ], 536 | "description": "Creates a React component class with PropTypes and ES7 module system" 537 | }, 538 | "reactClassCompomentRedux": { 539 | "prefix": "rcredux", 540 | "body": [ 541 | "import React, { Component } from 'react'", 542 | "import PropTypes from 'prop-types'", 543 | "import { connect } from 'react-redux'", 544 | "", 545 | "export class ${1:${TM_FILENAME_BASE}} extends Component {", 546 | "\tstatic propTypes = {", 547 | "\t\t${2:prop}: ${3:PropTypes}", 548 | "\t}", 549 | "", 550 | "\trender() {", 551 | "\t\treturn (", 552 | "\t\t\t
", 553 | "\t\t\t\t$0", 554 | "\t\t\t
", 555 | "\t\t)", 556 | "\t}", 557 | "}", 558 | "", 559 | "const mapStateToProps = (state) => ({", 560 | "\t", 561 | "})", 562 | "", 563 | "const mapDispatchToProps = {", 564 | "\t", 565 | "}", 566 | "", 567 | "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})", 568 | "" 569 | ], 570 | "description": "Creates a React component class with PropTypes with connected redux and ES7 module system" 571 | }, 572 | "mappingToProps": { 573 | "prefix": "reduxmap", 574 | "body": [ 575 | "const mapStateToProps = (state) => ({", 576 | "\t${1}", 577 | "})", 578 | "", 579 | "const mapDispatchToProps = {", 580 | "\t", 581 | "}", 582 | "" 583 | ] 584 | }, 585 | "classConstructor": { 586 | "prefix": "rconst", 587 | "body": [ 588 | "constructor(props) {", 589 | "\tsuper(props)", 590 | "", 591 | "\tthis.state = {", 592 | "\t\t $0", 593 | "\t}", 594 | "}", 595 | "" 596 | ], 597 | "description": "Adds a default constructor for it('', () => {})the class that contains props as arguments" 598 | }, 599 | "emptyState": { 600 | "prefix": "est", 601 | "body": ["state = {", "\t$1", "}", ""], 602 | "description": "Creates empty state object. To be used in a constructor." 603 | }, 604 | "componentWillMount": { 605 | "prefix": "cwm", 606 | "body": ["componentWillMount() {", "\t$0", "}", ""], 607 | "description": "DEPRECATED!!!. Invoked once, both on the client and server, immediately before the initial rendering occurs" 608 | }, 609 | "componentDidMount": { 610 | "prefix": "cdm", 611 | "body": ["componentDidMount() {", "\t$0", "}", ""], 612 | "description": "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs." 613 | }, 614 | "componentWillReceiveProps": { 615 | "prefix": "cwr", 616 | "body": ["componentWillReceiveProps(nextProps) {", "\t$0", "}", ""], 617 | "description": "DEPRECATED!!!. Invoked when a component is receiving new props. This method is not called for the initial render." 618 | }, 619 | "shouldComponentUpdate": { 620 | "prefix": "scu", 621 | "body": ["shouldComponentUpdate(nextProps, nextState) {", "\t$0", "}", ""], 622 | "description": "Invoked before rendering when new props or state are being received. " 623 | }, 624 | "componentWillUpdate": { 625 | "prefix": "cwup", 626 | "body": ["componentWillUpdate(nextProps, nextState) {", "\t$0", "}", ""], 627 | "description": "DEPRECATED!!!. Invoked immediately before rendering when new props or state are being received." 628 | }, 629 | "componentDidUpdate": { 630 | "prefix": "cdup", 631 | "body": ["componentDidUpdate(prevProps, prevState) {", "\t$0", "}", ""], 632 | "description": "Invoked immediately after the component's updates are flushed to the DOM." 633 | }, 634 | "componentWillUnmount": { 635 | "prefix": "cwun", 636 | "body": ["componentWillUnmount() {", "\t$0", "}", ""], 637 | "description": "Invoked immediately before a component is unmounted from the DOM." 638 | }, 639 | "getDerivedStateFromProps": { 640 | "prefix": "gdsfp", 641 | "body": ["static getDerivedStateFromProps(props, state) {", "\t${1}", "}"], 642 | "description": "Invoked right before calling the render method, both on the initial mount and on subsequent updates." 643 | }, 644 | "getSnapshotBeforeUpdate": { 645 | "prefix": "gsbu", 646 | "body": [ 647 | "getSnapshotBeforeUpdate = (prevProps, prevState) => {", 648 | "\t$0", 649 | "}", 650 | "" 651 | ], 652 | "description": "Called right before mutations are made (e.g. before the DOM is updated)" 653 | }, 654 | "componentRender": { 655 | "prefix": "ren", 656 | "body": [ 657 | "render() {", 658 | "\treturn (", 659 | "\t\t
", 660 | "\t\t\t$0", 661 | "\t\t
", 662 | "\t)", 663 | "}" 664 | ], 665 | "description": "Basic render." 666 | }, 667 | "createContext": { 668 | "prefix": "rcontext", 669 | "body": ["const ${1:contextName} = React.createContext()", ""], 670 | "description": "Create React context" 671 | }, 672 | "createRef": { 673 | "prefix": "cref", 674 | "body": ["this.${1:refName}Ref = React.createRef()", ""], 675 | "description": "Create ref statement used inside constructor" 676 | }, 677 | "forwardRef": { 678 | "prefix": "fref", 679 | "body": ["const ref = React.createRef()", ""], 680 | "description": "Forward ref statement used inside component" 681 | }, 682 | "componentSetStateObject": { 683 | "prefix": "sst", 684 | "body": "this.setState({$0})", 685 | "description": "Performs a shallow merge of nextState into current state" 686 | }, 687 | "componentSetStateFunc": { 688 | "prefix": "ssf", 689 | "body": ["this.setState((state, props) => { return { $0 }})", ""], 690 | "description": "Performs a shallow merge of nextState into current state" 691 | }, 692 | "componentProps": { 693 | "prefix": "props", 694 | "body": "this.props.$0", 695 | "description": "Access component's props" 696 | }, 697 | "componentState": { 698 | "prefix": "state", 699 | "body": "this.state.$0" 700 | }, 701 | "bindThis": { 702 | "prefix": "bnd", 703 | "body": "this.${1:methodName} = this.${1:methodName}.bind(this)$0", 704 | "description": "Binds this to a method" 705 | }, 706 | "reduxAction": { 707 | "prefix": "rxaction", 708 | "body": [ 709 | "export const ${1:actionName} = (payload) => ({", 710 | "\ttype: ${3:type},", 711 | "\tpayload", 712 | "})", 713 | "" 714 | ] 715 | }, 716 | "reduxConst": { 717 | "prefix": "rxconst", 718 | "body": "export const ${1:constantName} = '${1:constantName}'" 719 | }, 720 | "reduxReducer": { 721 | "prefix": "rxreducer", 722 | "body": [ 723 | "const initialState = {", 724 | "", 725 | "}", 726 | "", 727 | "export default (state = initialState, { type, payload }) => {", 728 | "\tswitch (type) {", 729 | "", 730 | "\tcase ${1:typeName}:", 731 | "\t\treturn { ...state, ...payload }", 732 | "", 733 | "\tdefault:", 734 | "\t\treturn state", 735 | "\t}", 736 | "}", 737 | "" 738 | ] 739 | }, 740 | "reduxSelector": { 741 | "prefix": "rxselect", 742 | "body": [ 743 | "import { createSelector } from 'reselect'", 744 | "", 745 | "export const ${1:selectorName} = state => state.${2:selector}", 746 | "" 747 | ] 748 | }, 749 | "reactNativeComponent": { 750 | "prefix": "rnc", 751 | "body": [ 752 | "import React, { Component } from 'react'", 753 | "import { Text, View } from 'react-native'", 754 | "", 755 | "export default class ${1:${TM_FILENAME_BASE}} extends Component {", 756 | "\trender() {", 757 | "\t\treturn (", 758 | "\t\t\t", 759 | "\t\t\t\t ${2:textInComponent} ", 760 | "\t\t\t", 761 | "\t\t)", 762 | "\t}", 763 | "}", 764 | "" 765 | ] 766 | }, 767 | "reactNativeComponentWithStyles": { 768 | "prefix": "rncs", 769 | "body": [ 770 | "import React, { Component } from 'react'", 771 | "import { Text, StyleSheet, View } from 'react-native'", 772 | "", 773 | "export default class ${1:${TM_FILENAME_BASE}} extends Component {", 774 | "\trender() {", 775 | "\t\treturn (", 776 | "\t\t\t", 777 | "\t\t\t\t ${2:textInComponent} ", 778 | "\t\t\t", 779 | "\t\t)", 780 | "\t}", 781 | "}", 782 | "", 783 | "const styles = StyleSheet.create({})", 784 | "" 785 | ] 786 | }, 787 | "reactNativeComponentExport": { 788 | "prefix": "rnce", 789 | "body": [ 790 | "import React, { Component } from 'react'", 791 | "import { Text, View } from 'react-native'", 792 | "", 793 | "export class ${1:${TM_FILENAME_BASE}} extends Component {", 794 | "\trender() {", 795 | "\t\treturn (", 796 | "\t\t\t", 797 | "\t\t\t\t ${2:textInComponent} ", 798 | "\t\t\t", 799 | "\t\t)", 800 | "\t}", 801 | "}", 802 | "", 803 | "export default ${1:${TM_FILENAME_BASE}}", 804 | "" 805 | ] 806 | }, 807 | "reactNativePureComponent": { 808 | "prefix": "rnpc", 809 | "body": [ 810 | "import React, { PureComponent } from 'react'", 811 | "import { Text, View } from 'react-native'", 812 | "", 813 | "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {", 814 | "\trender() {", 815 | "\t\treturn (", 816 | "\t\t\t", 817 | "\t\t\t\t ${2:textInComponent} ", 818 | "\t\t\t", 819 | "\t\t)", 820 | "\t}", 821 | "}", 822 | "" 823 | ] 824 | }, 825 | "reactNativePureComponentExport": { 826 | "prefix": "rnpce", 827 | "body": [ 828 | "import React, { PureComponent } from 'react'", 829 | "import { Text, View } from 'react-native'", 830 | "", 831 | "export class ${1:${TM_FILENAME_BASE}} extends PureComponent {", 832 | "\trender() {", 833 | "\t\treturn (", 834 | "\t\t\t", 835 | "\t\t\t\t ${2:textInComponent} ", 836 | "\t\t\t", 837 | "\t\t)", 838 | "\t}", 839 | "}", 840 | "", 841 | "export default ${1:${TM_FILENAME_BASE}}", 842 | "" 843 | ] 844 | }, 845 | "reactNativeClassComponentRedux": { 846 | "prefix": "rncredux", 847 | "body": [ 848 | "import React, { Component } from 'react'", 849 | "import { View, Text } from 'react-native'", 850 | "import PropTypes from 'prop-types'", 851 | "import { connect } from 'react-redux'", 852 | "", 853 | "export class ${1:${TM_FILENAME_BASE}} extends Component {", 854 | "\tstatic propTypes = {", 855 | "\t\t${2:prop}: ${3:PropTypes}", 856 | "\t}", 857 | "", 858 | "\trender() {", 859 | "\t\treturn (", 860 | "\t\t\t", 861 | "\t\t\t\t ${2:textInComponent} ", 862 | "\t\t\t", 863 | "\t\t)", 864 | "\t}", 865 | "}", 866 | "", 867 | "const mapStateToProps = (state) => ({", 868 | "\t", 869 | "})", 870 | "", 871 | "const mapDispatchToProps = {", 872 | "\t", 873 | "}", 874 | "", 875 | "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})", 876 | "" 877 | ], 878 | "description": "Creates a React Native component class with PropTypes with connected redux and ES7 module system" 879 | }, 880 | "reactNativeArrowFunctionComponent": { 881 | "prefix": "rnf", 882 | "body": [ 883 | "import React from 'react'", 884 | "import { View, Text } from 'react-native'", 885 | "", 886 | "const ${1:${TM_FILENAME_BASE}} = () => {", 887 | "\treturn (", 888 | "\t\t", 889 | "\t\t\t$0", 890 | "\t\t", 891 | "\t)", 892 | "}", 893 | "", 894 | "export default ${1:${TM_FILENAME_BASE}}", 895 | "" 896 | ] 897 | }, 898 | "reactNativeImport": { 899 | "prefix": "imrn", 900 | "body": "import { ${1:moduleName} } from 'react-native'" 901 | }, 902 | "reactNativeStyles": { 903 | "prefix": "rnstyle", 904 | "body": ["const styles = StyleSheet.create({", "\t${1:style}", "})", ""] 905 | }, 906 | "propTypeArray": { 907 | "prefix": "pta", 908 | "body": "PropTypes.array,", 909 | "description": "Array prop type" 910 | }, 911 | "propTypeArrayRequired": { 912 | "prefix": "ptar", 913 | "body": "PropTypes.array.isRequired,", 914 | "description": "Array prop type required" 915 | }, 916 | "propTypeBool": { 917 | "prefix": "ptb", 918 | "body": "PropTypes.bool,", 919 | "description": "Bool prop type" 920 | }, 921 | "propTypeBoolRequired": { 922 | "prefix": "ptbr", 923 | "body": "PropTypes.bool.isRequired,", 924 | "description": "Bool prop type required" 925 | }, 926 | "propTypeFunc": { 927 | "prefix": "ptf", 928 | "body": "PropTypes.func,", 929 | "description": "Func prop type" 930 | }, 931 | "propTypeFuncRequired": { 932 | "prefix": "ptfr", 933 | "body": "PropTypes.func.isRequired,", 934 | "description": "Func prop type required" 935 | }, 936 | "propTypeNumber": { 937 | "prefix": "ptn", 938 | "body": "PropTypes.number,", 939 | "description": "Number prop type" 940 | }, 941 | "propTypeNumberRequired": { 942 | "prefix": "ptnr", 943 | "body": "PropTypes.number.isRequired,", 944 | "description": "Number prop type required" 945 | }, 946 | "propTypeObject": { 947 | "prefix": "pto", 948 | "body": "PropTypes.object,", 949 | "description": "Object prop type" 950 | }, 951 | "propTypeObjectRequired": { 952 | "prefix": "ptor", 953 | "body": "PropTypes.object.isRequired,", 954 | "description": "Object prop type required" 955 | }, 956 | "propTypeString": { 957 | "prefix": "pts", 958 | "body": "PropTypes.string,", 959 | "description": "String prop type" 960 | }, 961 | "propTypeStringRequired": { 962 | "prefix": "ptsr", 963 | "body": "PropTypes.string.isRequired,", 964 | "description": "String prop type required" 965 | }, 966 | "propTypeNode": { 967 | "prefix": "ptnd", 968 | "body": "PropTypes.node,", 969 | "description": "Anything that can be rendered: numbers, strings, elements or an array" 970 | }, 971 | "propTypeNodeRequired": { 972 | "prefix": "ptndr", 973 | "body": "PropTypes.node.isRequired,", 974 | "description": "Anything that can be rendered: numbers, strings, elements or an array required" 975 | }, 976 | "propTypeElement": { 977 | "prefix": "ptel", 978 | "body": "PropTypes.element,", 979 | "description": "React element prop type" 980 | }, 981 | "propTypeElementRequired": { 982 | "prefix": "ptelr", 983 | "body": "PropTypes.element.isRequired,", 984 | "description": "React element prop type required" 985 | }, 986 | "propTypeInstanceOf": { 987 | "prefix": "pti", 988 | "body": "PropTypes.instanceOf($0),", 989 | "description": "Is an instance of a class prop type" 990 | }, 991 | "propTypeInstanceOfRequired": { 992 | "prefix": "ptir", 993 | "body": "PropTypes.instanceOf($0).isRequired,", 994 | "description": "Is an instance of a class prop type required" 995 | }, 996 | "propTypeEnum": { 997 | "prefix": "pte", 998 | "body": "PropTypes.oneOf(['$0']),", 999 | "description": "Prop type limited to specific values by treating it as an enum" 1000 | }, 1001 | "propTypeEnumRequired": { 1002 | "prefix": "pter", 1003 | "body": "PropTypes.oneOf(['$0']).isRequired,", 1004 | "description": "Prop type limited to specific values by treating it as an enum required" 1005 | }, 1006 | "propTypeOneOfType": { 1007 | "prefix": "ptet", 1008 | "body": ["PropTypes.oneOfType([", "\t$0", "]),"], 1009 | "description": "An object that could be one of many types" 1010 | }, 1011 | "propTypeOneOfTypeRequired": { 1012 | "prefix": "ptetr", 1013 | "body": ["PropTypes.oneOfType([", "\t$0", "]).isRequired,"], 1014 | "description": "An object that could be one of many types required" 1015 | }, 1016 | "propTypeArrayOf": { 1017 | "prefix": "ptao", 1018 | "body": "PropTypes.arrayOf($0),", 1019 | "description": "An array of a certain type" 1020 | }, 1021 | "propTypeArrayOfRequired": { 1022 | "prefix": "ptaor", 1023 | "body": "PropTypes.arrayOf($0).isRequired,", 1024 | "description": "An array of a certain type required" 1025 | }, 1026 | "propTypeObjectOf": { 1027 | "prefix": "ptoo", 1028 | "body": "PropTypes.objectOf($0),", 1029 | "description": "An object with property values of a certain type" 1030 | }, 1031 | "propTypeObjectOfRequired": { 1032 | "prefix": "ptoor", 1033 | "body": "PropTypes.objectOf($0).isRequired,", 1034 | "description": "An object with property values of a certain type required" 1035 | }, 1036 | "propTypeShape": { 1037 | "prefix": "ptsh", 1038 | "body": ["PropTypes.shape({", "\t$0", "}),"], 1039 | "description": "An object taking on a particular shape" 1040 | }, 1041 | "propTypeShapeRequired": { 1042 | "prefix": "ptshr", 1043 | "body": ["PropTypes.shape({", "\t$0", "}).isRequired,"], 1044 | "description": "An object taking on a particular shape required" 1045 | }, 1046 | "staticPropTpyes": { 1047 | "prefix": "ptypes", 1048 | "body": ["static propTypes = {", "$0", "}", ""] 1049 | }, 1050 | "propTypeAny": { 1051 | "prefix": "ptany", 1052 | "body": "PropTypes.any,", 1053 | "description": "Any prop type" 1054 | }, 1055 | "Comment Big Block": { 1056 | "prefix": "cmmb", 1057 | "body": [ 1058 | "/**", 1059 | "|--------------------------------------------------", 1060 | "| $1", 1061 | "|--------------------------------------------------", 1062 | "*/" 1063 | ] 1064 | }, 1065 | "describeBlock": { 1066 | "prefix": "desc", 1067 | "body": ["describe('$1', () => {", "\t$0", "})", ""], 1068 | "description": "Testing `describe` block" 1069 | }, 1070 | "testBlock": { 1071 | "prefix": "test", 1072 | "body": ["test('should $1', () => {", "\t$0", "})", ""], 1073 | "description": "Testing `test` block" 1074 | }, 1075 | "itBlock": { 1076 | "prefix": "tit", 1077 | "body": ["it('should $1', () => {", "\t$0", "})", ""], 1078 | "description": "Testing `it` block" 1079 | }, 1080 | "setupReactTest": { 1081 | "prefix": "stest", 1082 | "body": [ 1083 | "import React from 'react'", 1084 | "import renderer from 'react-test-renderer'", 1085 | "", 1086 | "import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}'", 1087 | "", 1088 | "describe('<${1:${TM_FILENAME_BASE}} />', () => {", 1089 | "\tconst defaultProps = {}", 1090 | "\tconst wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />)", 1091 | "", 1092 | "\ttest('render', () => {", 1093 | "\t\texpect(wrapper).toMatchSnapshot()", 1094 | "\t})", 1095 | "})", 1096 | "" 1097 | ] 1098 | }, 1099 | "setupReactNativeTest": { 1100 | "prefix": "sntest", 1101 | "body": [ 1102 | "import 'react-native'", 1103 | "import React from 'react'", 1104 | "import renderer from 'react-test-renderer'", 1105 | "", 1106 | "import ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'", 1107 | "", 1108 | "describe('<${1:${TM_FILENAME_BASE}} />', () => {", 1109 | "\tconst defaultProps = {}", 1110 | "\tconst wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />)", 1111 | "", 1112 | "\ttest('render', () => {", 1113 | "\t\texpect(wrapper).toMatchSnapshot()", 1114 | "\t})", 1115 | "})", 1116 | "" 1117 | ] 1118 | }, 1119 | "setupReactComponentTestWithRedux": { 1120 | "prefix": "srtest", 1121 | "body": [ 1122 | "import React from 'react'", 1123 | "import renderer from 'react-test-renderer'", 1124 | "import { Provider } from 'react-redux'", 1125 | "", 1126 | "import store from 'src/store'", 1127 | "import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}'", 1128 | "", 1129 | "describe('<${1:${TM_FILENAME_BASE}} />', () => {", 1130 | "\tconst defaultProps = {}", 1131 | "\tconst wrapper = renderer.create(", 1132 | "\t\t", 1133 | "\t\t <${1:${TM_FILENAME_BASE}} {...defaultProps} />", 1134 | "\t\t,", 1135 | "\t)", 1136 | "", 1137 | "\ttest('render', () => {", 1138 | "\t\texpect(wrapper).toMatchSnapshot()", 1139 | "\t})", 1140 | "})", 1141 | "" 1142 | ], 1143 | "description": "Create test component" 1144 | }, 1145 | "setupReactNativeTestWithRedux": { 1146 | "prefix": "snrtest", 1147 | "body": [ 1148 | "import 'react-native'", 1149 | "import React from 'react'", 1150 | "import renderer from 'react-test-renderer'", 1151 | "import { Provider } from 'react-redux'", 1152 | "", 1153 | "import store from 'src/store'", 1154 | "import ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'", 1155 | "", 1156 | "describe('<${1:${TM_FILENAME_BASE}} />', () => {", 1157 | "\tconst defaultProps = {}", 1158 | "\tconst wrapper = renderer.create(", 1159 | "\t\t", 1160 | "\t\t\t<${1:${TM_FILENAME_BASE}} {...defaultProps} />", 1161 | "\t\t,", 1162 | "\t)", 1163 | "", 1164 | "\ttest('render', () => {", 1165 | "\t\texpect(wrapper).toMatchSnapshot()", 1166 | "\t})", 1167 | "})", 1168 | "" 1169 | ] 1170 | }, 1171 | "graphQLForComponent": { 1172 | "prefix": "graphql", 1173 | "body": ["import { compose, graphql } from 'react-apollo'", ""] 1174 | }, 1175 | "exportGraphQL": { 1176 | "prefix": "expgql", 1177 | "body": [ 1178 | "export default compose(", 1179 | "\tgraphql(${1:queryOrMutation}, { name: ${2:name} }),", 1180 | ")(${1:${TM_FILENAME_BASE}})" 1181 | ] 1182 | }, 1183 | "hocComponentWithRedux": { 1184 | "prefix": "hocredux", 1185 | "body": [ 1186 | "import React from 'react'", 1187 | "import PropTypes from 'prop-types'", 1188 | "import { connect } from 'react-redux'", 1189 | "", 1190 | "export const mapStateToProps = state => ({", 1191 | "", 1192 | "})", 1193 | "", 1194 | "export const mapDispatchToProps = {", 1195 | " ", 1196 | "}", 1197 | "", 1198 | "export const ${1:hocComponentName} = (WrappedComponent) => {", 1199 | "\tconst hocComponent = ({ ...props }) => ", 1200 | "", 1201 | "\thocComponent.propTypes = {", 1202 | "\t}", 1203 | "", 1204 | "\treturn hocComponent", 1205 | "}", 1206 | "", 1207 | "export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:hocComponentName}(WrapperComponent))", 1208 | "" 1209 | ] 1210 | }, 1211 | "hocComponent": { 1212 | "prefix": "hoc", 1213 | "body": [ 1214 | "import React from 'react'", 1215 | "import PropTypes from 'prop-types'", 1216 | "", 1217 | "export default (WrappedComponent) => {", 1218 | "\tconst hocComponent = ({ ...props }) => ", 1219 | "", 1220 | "\thocComponent.propTypes = {", 1221 | "\t}", 1222 | "", 1223 | "\treturn hocComponent", 1224 | "}", 1225 | "" 1226 | ] 1227 | }, 1228 | "useState": { 1229 | "prefix": "useState", 1230 | "body": [ 1231 | "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState})" 1232 | ] 1233 | }, 1234 | "useEffect": { 1235 | "prefix": "useEffect", 1236 | "body": [ 1237 | "useEffect(() => {", 1238 | "\treturn () => {", 1239 | "\t\t${1:effect}", 1240 | "\t};", 1241 | "}, [${2:input}])" 1242 | ] 1243 | }, 1244 | "useContext": { 1245 | "prefix": "useContext", 1246 | "body": ["const ${1:context} = useContext(${2:contextValue})"] 1247 | }, 1248 | "useReducer": { 1249 | "prefix": "useReducer", 1250 | "body": [ 1251 | "const [state, dispatch] = useReducer(${1:reducer}, ${2:initialState}, ${3:init})" 1252 | ] 1253 | }, 1254 | "useCallback": { 1255 | "prefix": "useCallback", 1256 | "body": [ 1257 | "useCallback(", 1258 | "\t() => {", 1259 | "\t\t${1:callback}", 1260 | "\t},", 1261 | "\t[${2:input}],", 1262 | ")" 1263 | ] 1264 | }, 1265 | "useMemo": { 1266 | "prefix": "useMemo", 1267 | "body": ["useMemo(() => ${1:function}, ${2:input})"] 1268 | }, 1269 | "useRef": { 1270 | "prefix": "useRef", 1271 | "body": ["const ${1:ref} = useRef(${2:initialValue})"] 1272 | }, 1273 | "useImperativeHandle": { 1274 | "prefix": "useImperativeHandle", 1275 | "body": [ 1276 | "useImperativeHandle(", 1277 | "\t${1:ref},", 1278 | "\t() => {", 1279 | "\t\t${2:handler}", 1280 | "\t},", 1281 | "\t[${3:input}],", 1282 | ")" 1283 | ] 1284 | }, 1285 | "useDebugValue": { 1286 | "prefix": "useDebugValue", 1287 | "body": ["useDebugValue(${1:value})"] 1288 | }, 1289 | "useLayoutEffect": { 1290 | "prefix": "useLayoutEffect", 1291 | "body": [ 1292 | "useLayoutEffect(() => {", 1293 | "\treturn () => {", 1294 | "\t\t${1:effect}", 1295 | "\t},", 1296 | "\t[${2:input}]", 1297 | "})" 1298 | ] 1299 | } 1300 | } 1301 | --------------------------------------------------------------------------------