├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .vscodeignore ├── CHANGELOG.md ├── README.md ├── images ├── react-logo.png └── react-redux.jpg ├── package.json └── snippets └── snippets.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = true 14 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": false, 4 | "commonjs": true, 5 | "es6": true, 6 | "node": true 7 | }, 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "jsx": true 11 | }, 12 | "sourceType": "module" 13 | }, 14 | "rules": { 15 | "no-const-assign": "warn", 16 | "no-this-before-super": "warn", 17 | "no-undef": "warn", 18 | "no-unreachable": "warn", 19 | "no-unused-vars": "warn", 20 | "constructor-super": "warn", 21 | "valid-typeof": "warn" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | test/** 4 | .gitignore 5 | jsconfig.json 6 | vsc-extension-quickstart.md 7 | .eslintrc.json 8 | .editorconfig -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [2.0.6 - Fixed] 2 | - Fix React Stateless Function `rsf` syntax 3 | 4 | ## [2.0.5 - Added] 5 | - Add React Stateless Function `rsf` 6 | 7 | ## [2.0.4 - Added] 8 | React useEffect `rue` 9 | 10 | ## [2.0.3 - Added] 11 | Add react story snippet `rstory` 12 | 13 | ## [2.0.2 - Added] 14 | Add react-native story snippet `rnstory` 15 | 16 | ## [2.0.1 - Fixed] 17 | Fix issue with naming component 18 | 19 | ## [2.0.0 - Added] 20 | 21 | - Now snippet will interfer the filename in component creation 22 | 23 | ## [1.9.2 - Fixed] 24 | 25 | - Fix import proptypes - By [freddydumont](https://github.com/freddydumont) 26 | 27 | ## [1.9.1 - Added] 28 | 29 | - Add `ednl` Eslint Disable Next Line 30 | - Add `imro` Import react as object, for typescript 31 | 32 | ## [1.9.0 - Added] 33 | 34 | - add `tt` for jest test 35 | 36 | ## [1.8.0 - Added] 37 | 38 | Updated for React 16.3 39 | 40 | - Add Create Context `cct` 41 | - Add getDerivedStateFromProps `gds` 42 | 43 | ## [1.7.3 - Added] 44 | 45 | - Add import PropTypes 46 | 47 | ## [1.7.0 - Added] 48 | 49 | - Add PureComponent Class `pcs` 50 | - Add PureComponent Class with Constructor `pccs` 51 | - Add Component Class FlowType `ccsf` 52 | - Add PureComponent Class FlowType `pcsf` 53 | 54 | ## [1.6.0 - Added] 55 | 56 | - Add Component Class with Constructor 57 | 58 | ## [1.5.0 - Added] 59 | 60 | - Add shouldComponentUpdate 61 | - Add FlowFixMe for flow user 62 | 63 | ## [1.4.0 - Added] 64 | 65 | - Add import PureComponent for react 66 | 67 | ## [1.3.0 - Added] 68 | 69 | - Add React-Nativr StyleSheet 70 | 71 | ## [1.2.0 - Added] 72 | 73 | - Add ComponentDidCatch 74 | 75 | ## [1.1.0 - Added] 76 | 77 | - Add Component Class With Redux 78 | 79 | ## [1.0.1 - Added] 80 | 81 | - Add stateless component return 82 | 83 | ## [0.3.4 - ADDED] 84 | 85 | - ComponentWillReceiveProps - By [aestrro](https://github.com/aestrro) 86 | 87 | ## [0.3.3 - ADDED] 88 | 89 | - Test Describe 90 | - Test It 91 | 92 | ## [0.3.0 - ADDED] 93 | 94 | - Add console.log 95 | 96 | ## [0.2.2 - Fixed] 97 | 98 | - Redux pure function semicolon 99 | 100 | ## [0.2.1 - ADDED] 101 | 102 | - Redux pure function 103 | - Redux pure function const 104 | - Comment Big Block 105 | 106 | ## [0.2.0 - ADDED] 107 | 108 | - Export Styled-Components 109 | - Export Default Styled-Components 110 | 111 | ## [0.1.0 - ADDED] 112 | 113 | - Styled-Components and Styled-Components/Native 114 | 115 | ## [0.0.6 - ADDED] 116 | 117 | - Export default Component Class 118 | - Redux Pure Function 119 | 120 | ## [0.0.5 - ADDED] 121 | 122 | - ComponentDidUpdate 123 | 124 | ## [0.0.4 - ADDED] 125 | 126 | - ComponentWillUnmount 127 | - Styled Component 128 | 129 | ## [0.0.3 - ADDED] 130 | 131 | - Add Stateless Component Function 132 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![](https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20Course%20%E2%86%92-gray.svg?colorA=655BE1&colorB=4F44D6&style=for-the-badge)](https://a.paddle.com/v2/click/16413/111518?link=1227) 2 | [![Version](https://vsmarketplacebadge.apphb.com/version-short/EQuimper.react-native-react-redux.svg)](https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux) 3 | [![Install](https://vsmarketplacebadge.apphb.com/installs-short/EQuimper.react-native-react-redux.svg)](https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux) 4 | [![Ratings](https://vsmarketplacebadge.apphb.com/rating-short/EQuimper.react-native-react-redux.svg)](https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux) 5 | 6 | # No Semicolon ? 7 | 8 | For the version without semi-colon look this one https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux-snippets-for-es6-es7-version-standard 9 | 10 | ## Usage 11 | 12 | After install this snippets add this inside your settings 13 | 14 | `"editor.snippetSuggestions": "top",` 15 | 16 | ## Snippets List 17 | 18 | | Snippets | Content | 19 | | -------: | ------------------------------------ | 20 | | imr | Import React | 21 | | imro | Import React as Object | 22 | | imrc | Import React Component | 23 | | imrpc | Import React PureComponent | 24 | | imrn | Import React-Native Element | 25 | | ims | Import Styled-Components | 26 | | imsn | Import Styled-Components Native | 27 | | impt | Import PropTypes | 28 | | rct | Redux constant | 29 | | crr | Connect Redux | 30 | | sl | Stateless Component | 31 | | slr | Stateless Component Return | 32 | | slc | Stateless Component Function | 33 | | ccs | Component Class | 34 | | cccs | Component Class With Constructor | 35 | | ccsf | Component Class FlowType | 36 | | pcs | PureComponent Class | 37 | | pccs | PureComponent Class With Constructor | 38 | | pcsf | PureComponent FlowType | 39 | | ccsr | Component Class With Redux | 40 | | edccs | Export default Component Class | 41 | | rrd | Redux Reducer | 42 | | rpf | Redux Pure Function | 43 | | rpc | Redux Pure Function Const | 44 | | cwm | ComponentWillMount | 45 | | cdm | ComponentDidMount | 46 | | cdu | ComponentDidUpdate | 47 | | scu | ShouldComponentUpdate | 48 | | cwu | ComponentWillUpdate | 49 | | cwum | ComponentWillUnmount | 50 | | cwrp | ComponentWillReceiveProps | 51 | | cdc | ComponentDidCatch | 52 | | cct | Create Context | 53 | | gds | getDerivedStateFromProps | 54 | | rnss | StyleSheet Style | 55 | | ess | EStyleSheet Style | 56 | | ed | Export default | 57 | | edl | EslintDisableLine | 58 | | ednl | EslintDisableNextLine | 59 | | styc | Styled Component | 60 | | estyc | Export Styled Component | 61 | | edstyc | Export default Styled Component | 62 | | cmmb | Comment Big Block | 63 | | log | Console Log | 64 | | cl | Standard console.log | 65 | | tt | Test | 66 | | tdesc | Test Describe | 67 | | tit | Test It | 68 | | ffm | FlowFixMe | 69 | | rnstory | React-Native Story | 70 | | rstory | React Story | 71 | | rsf | React Stateless Function | 72 | 73 | --- 74 | 75 | # imr [Import React] 76 | 77 | ```js 78 | import React from 'react'; 79 | ``` 80 | 81 | --- 82 | 83 | # imro [Import React as Object] 84 | 85 | ```js 86 | import * as React from 'react'; 87 | ``` 88 | 89 | --- 90 | 91 | ## imrc [Import React Component] 92 | 93 | ```js 94 | import React, { Component } from 'react'; 95 | ``` 96 | 97 | --- 98 | 99 | ## imrpc [Import React PureComponent] 100 | 101 | ```js 102 | import React, { PureComponent } from 'react'; 103 | ``` 104 | 105 | --- 106 | 107 | ## imrn [Import React-Native Element] 108 | 109 | ```js 110 | import { $1 } from 'react-native'; 111 | ``` 112 | 113 | --- 114 | 115 | ## ims [Import Styled-Components] 116 | 117 | ```js 118 | import styled from 'styled-components'; 119 | ``` 120 | 121 | --- 122 | 123 | ## imsn [Import Styled-Components Native] 124 | 125 | ```js 126 | import styled from 'styled-components/native'; 127 | ``` 128 | 129 | --- 130 | 131 | ## impt [Import PropTypes] 132 | 133 | ```js 134 | import PropTypes from 'prop-types'; 135 | ``` 136 | 137 | --- 138 | 139 | ## rct [Redux Constant] 140 | 141 | ```js 142 | export const $1 = '$1'; 143 | ``` 144 | 145 | --- 146 | 147 | ## crr [Connect Redux] 148 | 149 | ```js 150 | import { connect } from 'react-redux'; 151 | ``` 152 | 153 | --- 154 | 155 | ## sl [Stateless Component] 156 | 157 | ```js 158 | const $1 = () => ( 159 | $2 160 | ); 161 | 162 | export default $1; 163 | ``` 164 | 165 | --- 166 | 167 | ## slr [Stateless Component Return] 168 | 169 | ```js 170 | const $1 = () => { 171 | return ( 172 | $2 173 | ); 174 | } 175 | 176 | export default $1; 177 | ``` 178 | 179 | --- 180 | 181 | ## slc [Stateless Component Function] 182 | 183 | ```js 184 | function $1($2) { 185 | $3 186 | } 187 | 188 | export default $1; 189 | ``` 190 | 191 | --- 192 | 193 | ## ccs [Component Class] 194 | 195 | ```js 196 | class $1 extends Component { 197 | state = { $2 } 198 | render() { 199 | return ( 200 | $3 201 | ); 202 | } 203 | } 204 | 205 | export default $1; 206 | ``` 207 | 208 | --- 209 | 210 | ## cccs [Component Class With Constructor] 211 | 212 | ```js 213 | class $1 extends Component { 214 | constructor(props) { 215 | super(props); 216 | this.state = { $2 }; 217 | } 218 | render() { 219 | return ( 220 | $3 221 | ); 222 | } 223 | } 224 | 225 | export default $1; 226 | ``` 227 | 228 | --- 229 | 230 | ## ccsf [Component Class FlowType] 231 | 232 | ```js 233 | type P = { 234 | $1 235 | }; 236 | 237 | type S = { 238 | $2 239 | }; 240 | 241 | class $3 extends Component { 242 | constructor(props) { 243 | super(props); 244 | this.state = { $4 }; 245 | } 246 | render() { 247 | return ( 248 | $5 249 | ); 250 | } 251 | } 252 | 253 | export default $3; 254 | ``` 255 | 256 | --- 257 | 258 | ## pcs [PureComponent Class] 259 | 260 | ```js 261 | class $1 extends PureComponent { 262 | state = { $2 } 263 | render() { 264 | return ( 265 | $3 266 | ); 267 | } 268 | } 269 | 270 | export default $1; 271 | ``` 272 | 273 | --- 274 | 275 | --- 276 | 277 | ## pccs [PureComponent Class With Constructor] 278 | 279 | ```js 280 | class $1 extends PureComponent { 281 | constructor(props) { 282 | super(props); 283 | this.state = { $2 }; 284 | } 285 | render() { 286 | return ( 287 | $3 288 | ); 289 | } 290 | } 291 | 292 | export default $1; 293 | ``` 294 | 295 | --- 296 | 297 | ## pcsf [PureComponent Class FlowType] 298 | 299 | ```js 300 | type P = { 301 | $1 302 | }; 303 | 304 | type S = { 305 | $2 306 | }; 307 | 308 | class $3 extends PureComponent { 309 | constructor(props) { 310 | super(props); 311 | this.state = { $4 }; 312 | } 313 | render() { 314 | return ( 315 | $5 316 | ); 317 | } 318 | } 319 | 320 | export default $3; 321 | ``` 322 | 323 | --- 324 | 325 | ## ccsr [Component Class With Redux] 326 | 327 | ```js 328 | class $1 extends Component { 329 | state = { $2 } 330 | render() { 331 | return ( 332 | $3 333 | ); 334 | } 335 | } 336 | 337 | export default connect($4, $5)($1); 338 | ``` 339 | 340 | --- 341 | 342 | ## edccs [Export default Component Class] 343 | 344 | ```js 345 | export default class $1 extends Component { 346 | state = { $2 } 347 | render() { 348 | return ( 349 | $3 350 | ); 351 | } 352 | } 353 | ``` 354 | 355 | --- 356 | 357 | ## rrd [Redux Reducer] 358 | 359 | ```js 360 | export default (state = $1, action) => { 361 | switch (action.type) { 362 | case $2: 363 | $3 364 | default: 365 | return state; 366 | } 367 | }; 368 | ``` 369 | 370 | --- 371 | 372 | ## rpf [Redux pure function] 373 | 374 | ```js 375 | export const $1 = '$1'; 376 | 377 | export function $2($3) { 378 | return { 379 | type: $1, 380 | $3 381 | } 382 | } 383 | ``` 384 | 385 | --- 386 | 387 | ## rpc [Redux pure function const] 388 | 389 | ```js 390 | export const $1 = '$1'; 391 | 392 | export const $2 = $3 => ({ 393 | type: $1, 394 | $3 395 | }); 396 | ``` 397 | 398 | --- 399 | 400 | ## cwm [ComponentWillMount] 401 | 402 | ```js 403 | componentWillMount() { 404 | $1 405 | } 406 | ``` 407 | 408 | 409 | ## cwu [ComponentWillUpdate] 410 | 411 | ```js 412 | componentWillUpdate() { 413 | $1 414 | } 415 | ``` 416 | 417 | --- 418 | 419 | ## cdu [ComponentDidUpdate] 420 | 421 | ```js 422 | componentDidUpdate(prevProps, prevState) { 423 | $1 424 | } 425 | ``` 426 | 427 | --- 428 | 429 | ## scu [ShouldComponentUpdate] 430 | 431 | ```js 432 | shouldComponentUpdate(nextProps, nextState, nextContext) { 433 | $1 434 | } 435 | ``` 436 | 437 | --- 438 | 439 | ## cdm [ComponentDidMount] 440 | 441 | ```js 442 | componentDidMount() { 443 | $1 444 | } 445 | ``` 446 | 447 | --- 448 | 449 | # cwum [ComponentWillUnmount] 450 | 451 | ```js 452 | componentWillUnmount() { 453 | $1 454 | } 455 | ``` 456 | 457 | --- 458 | 459 | # cwrp [ComponentWillReceiveProps] 460 | 461 | ```js 462 | componentWillReceiveProps(nextProps) { 463 | $1 464 | } 465 | ``` 466 | 467 | --- 468 | 469 | # cdc [ComponentDidCatch] 470 | 471 | ```js 472 | componentDidCatch(error, info) { 473 | $1 474 | } 475 | ``` 476 | 477 | --- 478 | 479 | # cct [Create Context] 480 | 481 | ```js 482 | 483 | const $1Context = createContext($2); 484 | 485 | class $1Provider extends Component { 486 | state = { 487 | $3 488 | } 489 | 490 | render() { 491 | return ( 492 | <$1Context.Provider value={{ state: { $3 }, actions: {} }}> 493 | {this.props.children} 494 | 495 | ); 496 | } 497 | } 498 | 499 | export default $1Provider; 500 | ``` 501 | 502 | --- 503 | 504 | # gds [getDerivedStateFromProps] 505 | 506 | ```js 507 | static getDerivedStateFromProps(nextProps, prevState) { 508 | $1 509 | } 510 | ``` 511 | 512 | --- 513 | 514 | # rnss [StyleSheet Style] 515 | 516 | ```js 517 | const styles = StyleSheet.create({ 518 | $1 519 | }); 520 | ``` 521 | 522 | --- 523 | 524 | # ess [EStyleSheet] 525 | 526 | ```js 527 | import EStyleSheet from 'react-native-extended-stylesheet'; 528 | 529 | const styles = EStyleSheet.create({ 530 | $1 531 | }); 532 | 533 | export default styles; 534 | ``` 535 | 536 | --- 537 | 538 | ## ed [Export default] 539 | 540 | ```js 541 | export default $1; 542 | ``` 543 | 544 | --- 545 | 546 | ## edl [Eslint Disable Line] 547 | 548 | ```js 549 | // eslint-disable-line 550 | ``` 551 | 552 | --- 553 | 554 | ## ednl [Eslint Disable Next Line] 555 | 556 | ```js 557 | // eslint-disable-next-line 558 | ``` 559 | 560 | --- 561 | 562 | ## styc [Styled Component] 563 | 564 | ```js 565 | const $1 = styled.$2` 566 | $3 567 | ` 568 | ``` 569 | 570 | --- 571 | 572 | ## estyc [Export Styled Component] 573 | 574 | ```js 575 | export const $1 = styled.$2` 576 | $3 577 | ` 578 | ``` 579 | 580 | ## edstyc [Export default Styled Component] 581 | 582 | ```js 583 | export default styled.$1` 584 | $2 585 | ` 586 | ``` 587 | 588 | ## cmmb [Comment Big Block] 589 | 590 | ```js 591 | /** 592 | |-------------------------------------------------- 593 | | $1 594 | |-------------------------------------------------- 595 | */ 596 | ``` 597 | 598 | --- 599 | 600 | ## log [Console Log] 601 | 602 | ```js 603 | console.log('===================================='); 604 | console.log($1); 605 | console.log('===================================='); 606 | ``` 607 | 608 | --- 609 | 610 | ## cl [Standard console.log] 611 | 612 | ```js 613 | console.log($1); 614 | ``` 615 | 616 | --- 617 | 618 | ## tt [Test] 619 | 620 | ```js 621 | test('$1', () => { 622 | $2 623 | }); 624 | ``` 625 | 626 | --- 627 | 628 | ## tdesc [Test Describe] 629 | 630 | ```js 631 | describe('$1', () => { 632 | $2 633 | }); 634 | ``` 635 | 636 | --- 637 | 638 | ## tit [Test It] 639 | 640 | ```js 641 | it('should $1', $2($3) => { 642 | $4 643 | }); 644 | ``` 645 | 646 | --- 647 | 648 | ## ffm [FlowFixMe] 649 | 650 | ```js 651 | // $FlowFixMe 652 | ``` 653 | 654 | --- 655 | 656 | ## rnstory [React-Native Story] 657 | 658 | ```js 659 | import React from 'react'; 660 | import { storiesOf } from '@storybook/react-native'; 661 | 662 | storiesOf('$1', module) 663 | .add('default', () => $2); 664 | ``` 665 | 666 | --- 667 | 668 | ## rstory [React Story] 669 | 670 | ```js 671 | import React from 'react'; 672 | import { storiesOf } from '@storybook/react'; 673 | 674 | storiesOf('$1', module) 675 | .add('default', () => $2); 676 | ``` 677 | 678 | --- 679 | 680 | 681 | ## rue [React useEffect] 682 | 683 | ```js 684 | React.useEffect(() => { 685 | $1 686 | }, []); 687 | ``` 688 | 689 | --- 690 | 691 | ## rsf [React Stateless Function] 692 | 693 | ```js 694 | import React from "react"; 695 | 696 | function $1(props) { 697 | return ( 698 |
699 | 700 |
701 | ); 702 | } 703 | 704 | export default $1; 705 | ``` 706 | 707 | --- 708 | -------------------------------------------------------------------------------- /images/react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EQuimper/VSC-React-Native-React-Redux-Snippets/c3a5165546caea90ccc3caf07ae073e3f8d3573f/images/react-logo.png -------------------------------------------------------------------------------- /images/react-redux.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EQuimper/VSC-React-Native-React-Redux-Snippets/c3a5165546caea90ccc3caf07ae073e3f8d3573f/images/react-redux.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-react-redux", 3 | "displayName": "React-Native/React/Redux snippets for es6/es7", 4 | "description": "Code snippets for React-Native/React/Redux es6/es7 and flowtype/typescript, Storybook", 5 | "version": "2.0.6", 6 | "galleryBanner": { 7 | "theme": "light", 8 | "color": "#FFFFFF" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/EQuimper/VSC-React-Native-React-Redux-Snippets" 13 | }, 14 | "icon": "images/react-redux.jpg", 15 | "publisher": "EQuimper", 16 | "keywords": [ 17 | "vscode", 18 | "snippets", 19 | "react", 20 | "redux", 21 | "react-native", 22 | "es6", 23 | "es7", 24 | "javascript", 25 | "storybook" 26 | ], 27 | "badges": [ 28 | { 29 | "url": "https://vsmarketplacebadge.apphb.com/version-short/EQuimper.react-native-react-redux.svg", 30 | "href": "https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux", 31 | "description": "Version" 32 | }, 33 | { 34 | "url": "https://vsmarketplacebadge.apphb.com/installs-short/EQuimper.react-native-react-redux.svg", 35 | "href": "https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux", 36 | "description": "Install Count" 37 | }, 38 | { 39 | "url": "https://vsmarketplacebadge.apphb.com/rating-short/EQuimper.react-native-react-redux.svg", 40 | "href": "https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux", 41 | "description": "Rating" 42 | } 43 | ], 44 | "engines": { 45 | "vscode": "^1.5.0" 46 | }, 47 | "categories": [ 48 | "Snippets" 49 | ], 50 | "contributes": { 51 | "snippets": [ 52 | { 53 | "language": "javascriptreact", 54 | "path": "./snippets/snippets.json" 55 | }, 56 | { 57 | "language": "javascript", 58 | "path": "./snippets/snippets.json" 59 | }, 60 | { 61 | "language": "typescript", 62 | "path": "./snippets/snippets.json" 63 | }, 64 | { 65 | "language": "typescriptreact", 66 | "path": "./snippets/snippets.json" 67 | }, 68 | { 69 | "language": "jsx", 70 | "path": "./snippets/snippets.json" 71 | } 72 | ] 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /snippets/snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "Import react": { 3 | "prefix": "imr", 4 | "body": ["import React from 'react';"], 5 | "description": "Import react" 6 | }, 7 | "Import react as object": { 8 | "prefix": "imro", 9 | "body": ["import * as React from 'react';"], 10 | "description": "Import react as object" 11 | }, 12 | "Import react component": { 13 | "prefix": "imrc", 14 | "body": ["import React, { Component } from 'react';"], 15 | "description": "Import react component" 16 | }, 17 | "Import react pure component": { 18 | "prefix": "imrpc", 19 | "body": ["import React, { PureComponent } from 'react';"], 20 | "description": "Import react PureComponent" 21 | }, 22 | "Import React-Native Element": { 23 | "prefix": "imrn", 24 | "body": "import { $1 } from 'react-native';", 25 | "description": "Import React-Native Element" 26 | }, 27 | "Import PropTypes": { 28 | "prefix": "impt", 29 | "body": ["import PropTypes from 'prop-types';"], 30 | "description": "Import PropTypes" 31 | }, 32 | "Import Styled-Components": { 33 | "prefix": "ims", 34 | "body": "import styled from 'styled-components';", 35 | "description": "Import Styled-Components" 36 | }, 37 | "Import Styled-Components Native": { 38 | "prefix": "imsn", 39 | "body": "import styled from 'styled-components/native';", 40 | "description": "Import Styled-Components" 41 | }, 42 | "Redux constant": { 43 | "prefix": "rct", 44 | "body": "export const $1 = '$1';" 45 | }, 46 | "Print to console": { 47 | "prefix": "cl", 48 | "body": ["console.log($1)"], 49 | "description": "Log output to console" 50 | }, 51 | "Export default": { 52 | "prefix": "ed", 53 | "body": ["export default $1;"], 54 | "description": "Export default" 55 | }, 56 | "EslintDisableLine": { 57 | "prefix": "edl", 58 | "body": "// eslint-disable-line", 59 | "description": "Eslint Disable Line" 60 | }, 61 | "EslintDisableNextLine": { 62 | "prefix": "ednl", 63 | "body": "// eslint-disable-next-line", 64 | "description": "Eslint Disable Next Line" 65 | }, 66 | "Comment Block": { 67 | "prefix": "cm", 68 | "body": ["/**", " * ${1}", " */"] 69 | }, 70 | "Stateless Component": { 71 | "prefix": "sl", 72 | "body": [ 73 | "const ${TM_FILENAME_BASE} = () => (", 74 | "\t$1", 75 | ");", 76 | "", 77 | "export default ${TM_FILENAME_BASE};" 78 | ] 79 | }, 80 | "Stateless Component Return": { 81 | "prefix": "slr", 82 | "body": [ 83 | "const ${TM_FILENAME_BASE} = () => {", 84 | "\treturn (", 85 | "\t\t$1", 86 | "\t);", 87 | "}", 88 | "", 89 | "export default ${TM_FILENAME_BASE};" 90 | ] 91 | }, 92 | "Redux Reducer": { 93 | "prefix": "rrd", 94 | "body": [ 95 | "export default (state = $1, action) => {", 96 | "\tswitch (action.type) {", 97 | "\t\tcase $2:", 98 | "\t\t\t$3", 99 | "\t\tdefault:", 100 | "\t\t\treturn state;", 101 | "\t}", 102 | "};" 103 | ] 104 | }, 105 | "Redux Pure Function": { 106 | "prefix": "rpf", 107 | "body": [ 108 | "export const $1 = '$1';", 109 | "", 110 | "export function $2($3) {", 111 | "\treturn {", 112 | "\t\ttype: $1,", 113 | "\t\t$3", 114 | "\t}", 115 | "}" 116 | ] 117 | }, 118 | "Redux Pure Function Const": { 119 | "prefix": "rpc", 120 | "body": [ 121 | "export const $1 = '$1';", 122 | "", 123 | "export const $2 = $3 => ({", 124 | "\ttype: $1,", 125 | "\t$3", 126 | "});" 127 | ] 128 | }, 129 | "Comment Big Block": { 130 | "prefix": "cmmb", 131 | "body": [ 132 | "/**", 133 | "|--------------------------------------------------", 134 | "| $1", 135 | "|--------------------------------------------------", 136 | "*/" 137 | ] 138 | }, 139 | "ComponentWillMount": { 140 | "prefix": "cwm", 141 | "body": ["componentWillMount() {", "\t$1", "}"] 142 | }, 143 | "ComponentWillUpdate": { 144 | "prefix": "cwu", 145 | "body": ["componentWillUpdate() {", "\t$1", "}"] 146 | }, 147 | "ComponentDidUpdate": { 148 | "prefix": "cdu", 149 | "body": ["componentDidUpdate(prevProps, prevState) {", "\t$1", "}"] 150 | }, 151 | "ShouldComponentUpdate": { 152 | "prefix": "scu", 153 | "body": [ 154 | "shouldComponentUpdate(nextProps, nextState, nextContext) {", 155 | "\t $1", 156 | "}" 157 | ] 158 | }, 159 | "ComponentWillReceiveProps": { 160 | "prefix": "cwrp", 161 | "body": ["componentWillReceiveProps(nextProps) {", "\t$1", "}"] 162 | }, 163 | "Comment big line": { 164 | "prefix": "cbl", 165 | "body": "// ============================================================" 166 | }, 167 | "Component Class": { 168 | "prefix": "ccs", 169 | "body": [ 170 | "class ${TM_FILENAME_BASE} extends Component {", 171 | "\tstate = { $1 }", 172 | "\trender() {", 173 | "\t\treturn (", 174 | "\t\t\t$2", 175 | "\t\t);", 176 | "\t}", 177 | "}", 178 | "", 179 | "export default ${TM_FILENAME_BASE};" 180 | ] 181 | }, 182 | "Component Class With Constructor": { 183 | "prefix": "cccs", 184 | "body": [ 185 | "class ${TM_FILENAME_BASE} extends Component {", 186 | "\tconstructor(props) {", 187 | "\t\tsuper(props);", 188 | "\t\tthis.state = { $1 };", 189 | "\t}", 190 | "\trender() {", 191 | "\t\treturn (", 192 | "\t\t\t$2", 193 | "\t\t);", 194 | "\t}", 195 | "}", 196 | "", 197 | "export default ${TM_FILENAME_BASE};" 198 | ] 199 | }, 200 | "Component Class FlowType": { 201 | "prefix": "ccsf", 202 | "body": [ 203 | "type P = {", 204 | "\t$1", 205 | "};", 206 | "", 207 | "type S = {", 208 | "\t$2", 209 | "};", 210 | "", 211 | "class ${TM_FILENAME_BASE} extends Component {", 212 | "\tstate = { $3 }", 213 | "\trender() {", 214 | "\t\treturn (", 215 | "\t\t\t$4", 216 | "\t\t);", 217 | "\t}", 218 | "}", 219 | "", 220 | "export default ${TM_FILENAME_BASE};" 221 | ] 222 | }, 223 | "PureComponent Class": { 224 | "prefix": "pcs", 225 | "body": [ 226 | "class ${TM_FILENAME_BASE} extends PureComponent {", 227 | "\tstate = { $1 }", 228 | "\trender() {", 229 | "\t\treturn (", 230 | "\t\t\t$3", 231 | "\t\t);", 232 | "\t}", 233 | "}", 234 | "", 235 | "export default ${TM_FILENAME_BASE};" 236 | ] 237 | }, 238 | "PureComponent Class With Constructor": { 239 | "prefix": "pccs", 240 | "body": [ 241 | "class ${TM_FILENAME_BASE} extends PureComponent {", 242 | "\tconstructor(props) {", 243 | "\t\tsuper(props);", 244 | "\t\tthis.state = { $1 };", 245 | "\t}", 246 | "\trender() {", 247 | "\t\treturn (", 248 | "\t\t\t$2", 249 | "\t\t);", 250 | "\t}", 251 | "}", 252 | "", 253 | "export default ${TM_FILENAME_BASE};" 254 | ] 255 | }, 256 | "PureComponent Class FlowType": { 257 | "prefix": "pcsf", 258 | "body": [ 259 | "type P = {", 260 | "\t$1", 261 | "};", 262 | "", 263 | "type S = {", 264 | "\t$2", 265 | "};", 266 | "", 267 | "class ${TM_FILENAME_BASE} extends PureComponent {", 268 | "\tstate = { $3 }", 269 | "\trender() {", 270 | "\t\treturn (", 271 | "\t\t\t$5", 272 | "\t\t);", 273 | "\t}", 274 | "}", 275 | "", 276 | "export default ${TM_FILENAME_BASE};" 277 | ] 278 | }, 279 | "Component Class With Redux": { 280 | "prefix": "ccsr", 281 | "body": [ 282 | "class ${TM_FILENAME_BASE} extends Component {", 283 | "\tstate = { $1 }", 284 | "\trender() {", 285 | "\t\treturn (", 286 | "\t\t\t$2", 287 | "\t\t);", 288 | "\t}", 289 | "}", 290 | "", 291 | "export default connect($4, $5)(${TM_FILENAME_BASE});" 292 | ] 293 | }, 294 | "Export default Component Class": { 295 | "prefix": "edccs", 296 | "body": [ 297 | "export default class ${TM_FILENAME_BASE} extends Component {", 298 | "\tstate = { $1 }", 299 | "\trender() {", 300 | "\t\treturn (", 301 | "\t\t\t$3", 302 | "\t\t);", 303 | "\t}", 304 | "}" 305 | ] 306 | }, 307 | "Connect Redux": { 308 | "prefix": "crr", 309 | "body": "import { connect } from 'react-redux';" 310 | }, 311 | "ComponentDidMount": { 312 | "prefix": "cdm", 313 | "body": ["componentDidMount() {", "\t$1", "}"] 314 | }, 315 | 316 | "Create Context": { 317 | "prefix": "cct", 318 | "body": [ 319 | "const $1Context = createContext($2);", 320 | "", 321 | "class $1Provider extends Component {", 322 | "\tstate = {", 323 | "\t\t$3", 324 | "\t}", 325 | "", 326 | "\trender() {", 327 | "\t\treturn (", 328 | "\t\t\t<$1Context.Provider value={{ state: { $3 }, actions: {} }}>", 329 | "\t\t\t\t{this.props.children}", 330 | "\t\t\t", 331 | "\t\t);", 332 | "\t}", 333 | "}", 334 | "", 335 | "export default $1Provider;" 336 | ] 337 | }, 338 | 339 | "getDerivedStateFromProps": { 340 | "prefix": "gds", 341 | "body": [ 342 | "static getDerivedStateFromProps(nextProps, prevState) {", 343 | "\t$1", 344 | "}" 345 | ] 346 | }, 347 | 348 | "StyleSheet Style": { 349 | "prefix": "rnss", 350 | "body": ["const styles = StyleSheet.create({", "\t$1", "})"] 351 | }, 352 | "EStyleSheet Style": { 353 | "prefix": "ess", 354 | "body": [ 355 | "import EStyleSheet from 'react-native-extended-stylesheet';", 356 | "", 357 | "const styles = EStyleSheet.create({", 358 | "\t$1", 359 | "});", 360 | "", 361 | "export default styles;" 362 | ] 363 | }, 364 | "Stateless Component Function": { 365 | "prefix": "slc", 366 | "body": ["function $1($2) {", "\t$3", "}", "", "export default $1;"] 367 | }, 368 | "Styled Component": { 369 | "prefix": "styc", 370 | "body": ["const $1 = styled.$2`", "\t$3", "`"] 371 | }, 372 | "Export Styled Component": { 373 | "prefix": "estyc", 374 | "body": ["export const $1 = styled.$2`", "\t$3", "`"] 375 | }, 376 | "Export default Styled Component": { 377 | "prefix": "edstyc", 378 | "body": ["export default styled.$1`", "\t$2", "`"] 379 | }, 380 | "ComponentWillUnmount": { 381 | "prefix": "cwum", 382 | "body": ["componentWillUnmount() {", "\t$1", "}"] 383 | }, 384 | "ComponentDidCatch": { 385 | "prefix": "cdc", 386 | "body": ["componentDidCatch(error, info) {", "\t$1", "}"] 387 | }, 388 | "Console Log": { 389 | "prefix": "log", 390 | "body": [ 391 | "console.log('====================================');", 392 | "console.log($1);", 393 | "console.log('====================================');" 394 | ] 395 | }, 396 | "Test": { 397 | "prefix": "tt", 398 | "body": ["test('$1', () => {", "\t$2", "});"] 399 | }, 400 | "Test Describe": { 401 | "prefix": "tdesc", 402 | "body": ["describe('$1', () => {", "\t$2", "});"] 403 | }, 404 | "Test it": { 405 | "prefix": "tit", 406 | "body": ["it('should $1', $2($3) => {", "\t$4", "});"] 407 | }, 408 | "FlowFixMe": { 409 | "prefix": "ffm", 410 | "body": "// \\$FlowFixMe" 411 | }, 412 | "React-Native Story": { 413 | "prefix": "rnstory", 414 | "body": [ 415 | "import React from 'react';", 416 | "import { storiesOf } from '@storybook/react-native';", 417 | "", 418 | "storiesOf('$1', module)", 419 | "\t.add('default', () => $2);" 420 | ] 421 | }, 422 | "React Story": { 423 | "prefix": "rstory", 424 | "body": [ 425 | "import React from 'react';", 426 | "import { storiesOf } from '@storybook/react';", 427 | "", 428 | "storiesOf('$1', module)", 429 | "\t.add('default', () => $2);" 430 | ] 431 | }, 432 | "React useEffect": { 433 | "prefix": "rue", 434 | "body": [ 435 | "React.useEffect(() => {", 436 | "\t$1", 437 | "}, []);" 438 | ] 439 | }, 440 | "React Stateless Function": { 441 | "prefix": "rsf", 442 | "body": [ 443 | "import React from 'react';", 444 | "", 445 | "function ${TM_FILENAME_BASE}(props) {", 446 | "\treturn (", 447 | "\t\t
", 448 | "\t\t\t", 449 | "\t\t
", 450 | "\t);", 451 | "}", 452 | "", 453 | "export default ${TM_FILENAME_BASE};" 454 | ], 455 | "description": "Creates a stateless React component as a named function without PropTypes (Reactjs code snippet)" 456 | } 457 | } 458 | --------------------------------------------------------------------------------