├── .gitignore ├── LICENSE ├── README.md ├── media └── javascript.png ├── package.json └── snippets ├── global.code-snippets ├── js.code-snippets ├── jsx.code-snippets ├── ts.code-snippets └── tsx.code-snippets /.gitignore: -------------------------------------------------------------------------------- 1 | *.vsix 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2022 Nathan Chapman 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ✂️ vscode-javascript-snippets 2 | 3 | [![Version](https://img.shields.io/vscode-marketplace/v/nathanchapman.javascriptsnippets.svg)](https://marketplace.visualstudio.com/items?itemName=nathanchapman.javascriptsnippets) 4 | [![Installs](https://img.shields.io/visual-studio-marketplace/i/nathanchapman.javascriptsnippets)](https://marketplace.visualstudio.com/items?itemName=nathanchapman.javascriptsnippets) 5 | [![Rating](https://img.shields.io/vscode-marketplace/r/nathanchapman.javascriptsnippets.svg)](https://marketplace.visualstudio.com/items?itemName=nathanchapman.javascriptsnippets&ssr=false#review-details) 6 | 7 | > Visual Studio Code snippets for JavaScript, TypeScript, and React 8 | 9 | Code snippets are templates that make it easier to autocomplete repeating code patterns. They're like shortcuts for writing code. 10 | 11 | ## Setup 12 | 13 | Just install this package from the [Extension Marketplace](https://marketplace.visualstudio.com/items?itemName=nathanchapman.javascriptsnippets), then add `"editor.snippetSuggestions": "top"` to your [user settings](https://code.visualstudio.com/docs/getstarted/settings) to see these snippets on top in the suggestion popover. Make sure you've also set `"editor.tabCompletion": "on"` for `tab` completion. 14 | 15 | ## Snippets 16 | 17 | These snippets are optimized to be short and easy to remember. 18 | They follow [JavaScript Standard Style](https://standardjs.com/). 19 | They also support `tab` autocompletion to accelerate your workflow! 20 | 21 | Below is a list of all available snippets and the shortcuts for each one. The `⇥` means the `tab` key. 22 | 23 | ### JavaScript 24 | 25 | #### Declarations 26 | 27 | ##### `v⇥` var statement 28 | 29 | ```javascript 30 | var ${0} 31 | ``` 32 | 33 | ##### `v=⇥` var assignment 34 | 35 | ```javascript 36 | var ${1:name} = ${2:value} 37 | ``` 38 | 39 | ##### `l⇥` let statement 40 | 41 | ```javascript 42 | let ${0} 43 | ``` 44 | 45 | ##### `l=⇥` let assignment 46 | 47 | ```javascript 48 | let ${1:name} = ${2:value} 49 | ``` 50 | 51 | ##### `dl=⇥` destructuring let assignment 52 | 53 | ```javascript 54 | let {${1:name}} = ${2:value} 55 | ``` 56 | 57 | ##### `co⇥` const statement 58 | 59 | ```javascript 60 | const ${0} 61 | ``` 62 | 63 | ##### `co=⇥` const assignment 64 | 65 | ```javascript 66 | const ${1:name} = ${2:value} 67 | ``` 68 | 69 | ##### `dco=⇥` destructuring const assignment 70 | 71 | ```javascript 72 | const {${1:name}} = ${2:value} 73 | ``` 74 | 75 | #### Flow Control 76 | 77 | ##### `if⇥` if statement 78 | 79 | ```javascript 80 | if (${1:condition}) { 81 | ${0} 82 | } 83 | ``` 84 | 85 | ##### `el⇥` else statement 86 | 87 | ```javascript 88 | else { 89 | ${0} 90 | } 91 | ``` 92 | 93 | ##### `ifel⇥` if/else statement 94 | 95 | ```javascript 96 | if (${1:condition}) { 97 | ${0} 98 | } else { 99 | 100 | } 101 | ``` 102 | 103 | ##### `elif⇥` else if statement 104 | 105 | ```javascript 106 | else if (${1:condition}) { 107 | ${0} 108 | } 109 | ``` 110 | 111 | ##### `ter⇥` ternary operator 112 | 113 | ```javascript 114 | ${1:condition} ? ${2:expression} : ${3:expression} 115 | ``` 116 | 117 | ##### `fl⇥` for loop 118 | 119 | ```javascript 120 | for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} < ${2:len}; ${1:i}++) { 121 | ${0} 122 | } 123 | ``` 124 | 125 | ##### `rfl⇥` reverse for loop 126 | 127 | ```javascript 128 | for (let ${1:i} = ${2:iterable}.length - 1; ${1:i} >= 0; ${1:i}--) { 129 | ${0} 130 | } 131 | ``` 132 | 133 | ##### `fi⇥` for in loop 134 | 135 | ```javascript 136 | for (let ${1:key} in ${2:array}) { 137 | if (${2:array}.hasOwnProperty(${1:key})) { 138 | ${0} 139 | } 140 | } 141 | ``` 142 | 143 | }, 144 | 145 | ##### `fo⇥` for of loop (ES6) 146 | 147 | ```javascript 148 | for (let ${1:key} of ${2:array}) { 149 | ${0} 150 | } 151 | ``` 152 | 153 | ##### `wl⇥` while loop 154 | 155 | ```javascript 156 | while (${1:condition}) { 157 | ${0} 158 | } 159 | ``` 160 | 161 | ##### `tc⇥` try/catch 162 | 163 | ```javascript 164 | try { 165 | ${0} 166 | } catch (${1:err}) { 167 | 168 | } 169 | ``` 170 | 171 | ##### `tf⇥` try/finally 172 | 173 | ```javascript 174 | try { 175 | ${0} 176 | } finally { 177 | 178 | } 179 | ``` 180 | 181 | ##### `tcf⇥` try/catch/finally 182 | 183 | ```javascript 184 | try { 185 | ${0} 186 | } catch (${1:err}) { 187 | 188 | } finally { 189 | 190 | } 191 | ``` 192 | 193 | ##### `sw⇥` switch case 194 | 195 | ```javascript 196 | switch (${1:expr}) { 197 | case ${2:value}: 198 | return $0 199 | default: 200 | return 201 | } 202 | ``` 203 | 204 | #### Functions 205 | 206 | ##### `f⇥` anonymous function 207 | 208 | ```javascript 209 | function (${1:arguments}) { 210 | ${0} 211 | } 212 | ``` 213 | 214 | ##### `fn⇥` named function 215 | 216 | ```javascript 217 | function ${1:name}(${2:arguments}) { 218 | ${0} 219 | } 220 | ``` 221 | 222 | ##### `iife⇥` immediately-invoked function expression (IIFE) 223 | 224 | ```javascript 225 | ((${1:arguments}) => { 226 | ${0} 227 | })(${2}) 228 | ``` 229 | 230 | ##### `fa⇥` function apply 231 | 232 | ```javascript 233 | ${1:fn}.apply(${2:this}, ${3:arguments}) 234 | ``` 235 | 236 | ##### `fc⇥` function call 237 | 238 | ```javascript 239 | ${1:fn}.call(${2:this}, ${3:arguments}) 240 | ``` 241 | 242 | ##### `fb⇥` function bind 243 | 244 | ```javascript 245 | ${1:fn}.bind(${2:this}, ${3:arguments}) 246 | ``` 247 | 248 | ##### `af⇥` arrow function (ES6) 249 | 250 | ```javascript 251 | (${1:arguments}) => ${2:statement} 252 | ``` 253 | 254 | ##### `afb⇥` arrow function with body (ES6) 255 | 256 | ```javascript 257 | (${1:arguments}) => { 258 | ${0} 259 | } 260 | ``` 261 | 262 | ##### `gf⇥` generator function (ES6) 263 | 264 | ```javascript 265 | function* (${1:arguments}) { 266 | ${0} 267 | } 268 | ``` 269 | 270 | ##### `gfn⇥` named generator function (ES6) 271 | 272 | ```javascript 273 | function* ${1:name}(${2:arguments}) { 274 | ${0} 275 | } 276 | ``` 277 | 278 | #### Iterables 279 | 280 | ##### `seq⇥` sequence of 0..n 281 | 282 | ```javascript 283 | [...Array(${1:length}).keys()]${0} 284 | ``` 285 | 286 | ##### `fe⇥` forEach loop 287 | 288 | ```javascript 289 | ${1}.forEach((${2:item}) => { 290 | ${0} 291 | }) 292 | ``` 293 | 294 | ##### `map⇥` map 295 | 296 | ```javascript 297 | ${1}.map((${2:item}) => { 298 | ${0} 299 | }) 300 | ``` 301 | 302 | ##### `reduce⇥` reduce 303 | 304 | ```javascript 305 | ${1}.reduce((${2:previous}, ${3:current}) => { 306 | ${0} 307 | }${4:, initial}) 308 | ``` 309 | 310 | ##### `filter⇥` filter 311 | 312 | ```javascript 313 | ${1}.filter(${2:item} => { 314 | ${0} 315 | }) 316 | ``` 317 | 318 | ##### `find⇥` find 319 | 320 | ```javascript 321 | ${1}.find(${2:item} => { 322 | ${0} 323 | }) 324 | ``` 325 | 326 | #### Objects and Classes 327 | 328 | ##### `ol⇥` object literal 329 | 330 | ```javascript 331 | { 332 | kv${0} 333 | } 334 | ``` 335 | 336 | ##### `slol⇥` same-line object literal 337 | 338 | ```javascript 339 | { kv${0} } 340 | ``` 341 | 342 | ##### `kv⇥` key/value pair 343 | 344 | ```javascript 345 | ${1:key}: ${2:value}, 346 | ``` 347 | 348 | ##### `c⇥` class (ES6) 349 | 350 | ```javascript 351 | class ${1:name} { 352 | constructor(${2:arguments}) { 353 | ${0} 354 | } 355 | } 356 | ``` 357 | 358 | ##### `cex⇥` child class (ES6) 359 | 360 | ```javascript 361 | class ${1:name} extends ${2:base} { 362 | constructor(${3:arguments}) { 363 | super(${3:arguments}) 364 | ${0} 365 | } 366 | } 367 | ``` 368 | 369 | ##### `ctor⇥` class constructor (ES6) 370 | 371 | ```javascript 372 | constructor(${1:arguments}) { 373 | super(${1:arguments}) 374 | ${0} 375 | } 376 | ``` 377 | 378 | ##### `m⇥` method (ES6 syntax) 379 | 380 | ```javascript 381 | ${1:method}(${2:arguments}) { 382 | ${0} 383 | } 384 | ``` 385 | 386 | ##### `get⇥` getter (ES6 syntax) 387 | 388 | ```javascript 389 | get ${1:property}() { 390 | ${0} 391 | } 392 | ``` 393 | 394 | ##### `set⇥` setter (ES6 syntax) 395 | 396 | ```javascript 397 | set ${1:property}(${2:value}) { 398 | ${0} 399 | } 400 | ``` 401 | 402 | ##### `gs⇥` getter and setter (ES6 syntax) 403 | 404 | ```javascript 405 | get ${1:property}() { 406 | ${0} 407 | } 408 | 409 | set ${1:property}(${2:value}) { 410 | 411 | } 412 | ``` 413 | 414 | ##### `pctor⇥` prototypal constructor 415 | 416 | ```javascript 417 | var ${1:Class} = function(${2:arguments}) { 418 | ${0} 419 | } 420 | ``` 421 | 422 | ##### `proto⇥` prototype method 423 | 424 | ```javascript 425 | ${1:Class}.prototype.${2:method} = function(${3:arguments}) { 426 | ${0} 427 | } 428 | ``` 429 | 430 | ##### `oa⇥` Object.assign 431 | 432 | ```javascript 433 | Object.assign(${1:dest}, ${2:source}) 434 | ``` 435 | 436 | ##### `oc⇥` Object.assign copy (shallow clone) 437 | 438 | ```javascript 439 | Object.assign({}, ${1:original}, ${2:source}) 440 | ``` 441 | 442 | #### Returning values 443 | 444 | ##### `r⇥` return 445 | 446 | ```javascript 447 | return ${0} 448 | ``` 449 | 450 | ##### `rp⇥` return Promise (ES6) 451 | 452 | ```javascript 453 | return new Promise((resolve, reject) => { 454 | ${0} 455 | }) 456 | ``` 457 | 458 | ##### `rc⇥` return complex value (such as JSX components) 459 | 460 | ```javascript 461 | return ( 462 | ${0} 463 | ) 464 | ``` 465 | 466 | #### Types 467 | 468 | ##### `tof⇥` typeof 469 | 470 | ```javascript 471 | typeof ${1:source} === '${2:undefined}' 472 | ``` 473 | 474 | ##### `iof⇥` instanceof 475 | 476 | ```javascript 477 | ${1:source} instanceof ${2:Object} 478 | ``` 479 | 480 | #### Promises 481 | 482 | ##### `pr⇥` Promise (ES6) 483 | 484 | ```javascript 485 | new Promise((resolve, reject) => { 486 | ${0} 487 | }) 488 | ``` 489 | 490 | ##### `then⇥` Promise.then 491 | 492 | ```javascript 493 | ${1:promise}.then((${2:value}) => { 494 | ${0} 495 | }) 496 | ``` 497 | 498 | ##### `catch⇥` Promise.catch 499 | 500 | ```javascript 501 | ${1:promise}.catch((${2:err}) => { 502 | ${0} 503 | }) 504 | ``` 505 | 506 | #### ES6 Modules 507 | 508 | ##### `ex⇥` export (ES6) 509 | 510 | ```javascript 511 | export ${1:member} 512 | ``` 513 | 514 | ##### `exd⇥` export default (ES6) 515 | 516 | ```javascript 517 | export default ${1:member} 518 | ``` 519 | 520 | ##### `im⇥` import module (ES6) 521 | 522 | ```javascript 523 | import ${1:*} from '${2:module}' 524 | ``` 525 | 526 | ##### `ima⇥` import module as (ES6) 527 | 528 | ```javascript 529 | import ${1:*} as ${2:name} from '${3:module}' 530 | ``` 531 | 532 | #### Node.js 533 | 534 | ##### `cb⇥` Node.js style callback 535 | 536 | ```javascript 537 | (err, ${1:value}) => {${0}} 538 | ``` 539 | 540 | ##### `re⇥` require 541 | 542 | ```javascript 543 | require('${1:module}') 544 | ``` 545 | 546 | ##### `rel⇥` require local 547 | 548 | ```javascript 549 | require('./${1:module}') 550 | ``` 551 | 552 | ##### `req⇥` require assignment 553 | 554 | ```javascript 555 | const ${1:module} = require('${1:module}') 556 | ``` 557 | 558 | ##### `reql⇥` require assignment local 559 | 560 | ```javascript 561 | const ${1:module} = require('./${1:module}') 562 | ``` 563 | 564 | ##### `dreq⇥` destructuring require assignment 565 | 566 | ```javascript 567 | const {${1:module}} = require('${1:module}') 568 | ``` 569 | 570 | ##### `dreql⇥` destructuring require assignment local 571 | 572 | ```javascript 573 | const {${1:module}} = require('./${1:module}') 574 | ``` 575 | 576 | ##### `em⇥` exports.member 577 | 578 | ```javascript 579 | exports.${1:member} = ${2:value} 580 | ``` 581 | 582 | ##### `me⇥` module.exports 583 | 584 | ```javascript 585 | module.exports = ${1:name} 586 | ``` 587 | 588 | ##### `meo⇥` module exports object 589 | 590 | ```javascript 591 | module.exports = { 592 | ${1:member} 593 | } 594 | ``` 595 | 596 | ##### `on⇥` event handler 597 | 598 | ```javascript 599 | ${1:emitter}.on('${2:event}', (${3:arguments}) => { 600 | ${0} 601 | }) 602 | ``` 603 | 604 | #### Testing (Jest, Mocha, Jasmine, etc.) 605 | 606 | ##### `desc⇥` describe 607 | 608 | ```javascript 609 | describe('${1:description}', () => { 610 | ${0} 611 | }) 612 | ``` 613 | 614 | ##### `cont⇥` context 615 | 616 | ```javascript 617 | context('${1:description}', () => { 618 | ${0} 619 | }) 620 | ``` 621 | 622 | ##### `it⇥` test (synchronous) 623 | 624 | ```javascript 625 | it('${1:description}', () => { 626 | ${0} 627 | }) 628 | ``` 629 | 630 | ##### `ita⇥` test (asynchronous) 631 | 632 | ```javascript 633 | it('${1:description}', async () => { 634 | ${0} 635 | }) 636 | ``` 637 | 638 | ##### `itc⇥` test (callback) 639 | 640 | ```javascript 641 | it('${1:description}', (done) => { 642 | ${0} 643 | done() 644 | }) 645 | ``` 646 | 647 | ##### `bf⇥` before test suite 648 | 649 | ```javascript 650 | before(() => { 651 | ${0} 652 | }) 653 | ``` 654 | 655 | ##### `bfe⇥` before each test 656 | 657 | ```javascript 658 | beforeEach(() => { 659 | ${0} 660 | }) 661 | ``` 662 | 663 | ##### `aft⇥` after test suite 664 | 665 | ```javascript 666 | after(() => { 667 | ${0} 668 | }) 669 | ``` 670 | 671 | ##### `afe⇥` after each test 672 | 673 | ```javascript 674 | afterEach(() => { 675 | ${0} 676 | }) 677 | ``` 678 | 679 | #### Console 680 | 681 | ##### `cl⇥` console.log 682 | 683 | ```javascript 684 | console.log(${0}) 685 | ``` 686 | 687 | ##### `ce⇥` console.error 688 | 689 | ```javascript 690 | console.error(${0}) 691 | ``` 692 | 693 | ##### `cw⇥` console.warn 694 | 695 | ```javascript 696 | console.warn(${0}) 697 | ``` 698 | 699 | ##### `cll⇥` console.log (labeled) 700 | 701 | ```javascript 702 | console.log('${0}', ${0}) 703 | ``` 704 | 705 | ##### `cel⇥` console.error (labeled) 706 | 707 | ```javascript 708 | console.error('${0}', ${0}) 709 | ``` 710 | 711 | ##### `cwl⇥` console.warn (labeled) 712 | 713 | ```javascript 714 | console.warn('${0}', ${0}) 715 | ``` 716 | 717 | #### Timers 718 | 719 | ##### `st⇥` setTimeout 720 | 721 | ```javascript 722 | setTimeout(() => { 723 | ${0} 724 | }, ${1:delay}) 725 | ``` 726 | 727 | ##### `si⇥` setInterval 728 | 729 | ```javascript 730 | setInterval(() => { 731 | ${0} 732 | }, ${1:delay}) 733 | ``` 734 | 735 | ##### `sim⇥` setImmediate 736 | 737 | ```javascript 738 | setImmediate(() => { 739 | ${0} 740 | }) 741 | ``` 742 | 743 | ##### `nt⇥` process nextTick 744 | 745 | ```javascript 746 | process.nextTick(() => { 747 | ${0} 748 | }) 749 | ``` 750 | 751 | #### Miscellaneous 752 | 753 | ##### `us⇥` insert 'use strict' statement 754 | 755 | ```javascript 756 | 'use strict' 757 | ``` 758 | 759 | #### React (JS) 760 | 761 | ##### `propTypes⇥` 762 | 763 | ```javascript 764 | static propTypes = {$0} 765 | ``` 766 | 767 | ##### `defaultProps⇥` 768 | 769 | ```javascript 770 | static defaultProps = {$0} 771 | ``` 772 | 773 | ##### `getDerivedStateFromProps⇥` 774 | 775 | ```javascript 776 | static getDerivedStateFromProps(${1:nextProps}, ${2:prevState}) {$0} 777 | ``` 778 | 779 | #### React (TS) 780 | 781 | ##### `defaultProps⇥` 782 | 783 | ```typescript 784 | static defaultProps: Partial<${1:${TM_FILENAME_BASE}Props}> = {$0} 785 | ``` 786 | 787 | ##### `getDerivedStateFromProps⇥` 788 | 789 | ```typescript 790 | static getDerivedStateFromProps(${1:nextProps}: ${3:${TM_FILENAME_BASE}${2:Props}}, ${4:prevState}: ${6:${TM_FILENAME_BASE}${5:State}}): Partial<${6:${TM_FILENAME_BASE}${5:State}}> {$0} 791 | ``` 792 | -------------------------------------------------------------------------------- /media/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nathanchapman/vscode-javascript-snippets/22f2503e27e11f54e226a033086626d166d6f432/media/javascript.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascriptsnippets", 3 | "version": "0.4.0", 4 | "license": "MIT", 5 | "description": "Visual Studio Code snippets for JavaScript, TypeScript, and React", 6 | "author": "Nathan Chapman (https://nathanchapman.dev)", 7 | "publisher": "nathanchapman", 8 | "displayName": "JavaScript Snippets", 9 | "icon": "media/javascript.png", 10 | "repository": "github:nathanchapman/vscode-javascript-snippets", 11 | "bugs": "https://github.com/nathanchapman/vscode-javascript-snippets/issues", 12 | "homepage": "https://github.com/nathanchapman/vscode-javascript-snippets#readme", 13 | "engines": { 14 | "vscode": "^1.x.x" 15 | }, 16 | "categories": [ 17 | "Snippets" 18 | ], 19 | "contributes": { 20 | "snippets": [ 21 | { 22 | "path": "./snippets/global.code-snippets" 23 | }, 24 | { 25 | "language": "javascript", 26 | "path": "./snippets/js.code-snippets" 27 | }, 28 | { 29 | "language": "typescript", 30 | "path": "./snippets/ts.code-snippets" 31 | }, 32 | { 33 | "language": "javascriptreact", 34 | "path": "./snippets/jsx.code-snippets" 35 | }, 36 | { 37 | "language": "typescriptreact", 38 | "path": "./snippets/tsx.code-snippets" 39 | } 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /snippets/global.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | // Declarations 3 | "var statement": { 4 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 5 | "prefix": "v", 6 | "body": "var ${0}", 7 | "description": "var statement" 8 | }, 9 | "var assignment": { 10 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 11 | "prefix": "v=", 12 | "body": "var ${1:name} = ${2:value}", 13 | "description": "var assignment" 14 | }, 15 | "let statement": { 16 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 17 | "prefix": "l", 18 | "body": "let ${0}", 19 | "description": "let statement" 20 | }, 21 | "let assignment": { 22 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 23 | "prefix": "l=", 24 | "body": "let ${1:name} = ${2:value}", 25 | "description": "let assignment" 26 | }, 27 | "destructuring let assignment": { 28 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 29 | "prefix": "dl=", 30 | "body": "let {${1:name}} = ${2:value}", 31 | "description": "destructuring let assignment" 32 | }, 33 | "const statement": { 34 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 35 | "prefix": "co", 36 | "body": "const ${0}", 37 | "description": "const statement" 38 | }, 39 | "const assignment": { 40 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 41 | "prefix": "co=", 42 | "body": "const ${1:name} = ${2:value}", 43 | "description": "const assignment" 44 | }, 45 | "destructuring const assignment": { 46 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 47 | "prefix": "dco=", 48 | "body": "const {${1:name}} = ${2:value}", 49 | "description": "destructuring const assignment" 50 | }, 51 | // Flow Control 52 | "if statement": { 53 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 54 | "prefix": "if", 55 | "body": "if (${1:condition}) {\n\t${0}\n}", 56 | "description": "if statement" 57 | }, 58 | "else statement": { 59 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 60 | "prefix": "el", 61 | "body": "else {\n\t${0}\n}", 62 | "description": "else statement" 63 | }, 64 | "if/else statement": { 65 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 66 | "prefix": "ifel", 67 | "body": "if (${1:condition}) {\n\t${0}\n} else {\n\t\n}", 68 | "description": "if/else statement" 69 | }, 70 | "else if statement": { 71 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 72 | "prefix": "elif", 73 | "body": "else if (${1:condition}) {\n\t${0}\n}", 74 | "description": "else if statement" 75 | }, 76 | "ternary operator": { 77 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 78 | "prefix": "ter", 79 | "body": "${1:condition} ? ${2:expression} : ${3:expression}", 80 | "description": "ternary operator" 81 | }, 82 | "for loop": { 83 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 84 | "prefix": "fl", 85 | "body": "for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} < ${2:len}; ${1:i}++) {\n\t${0}\n}", 86 | "description": "for loop" 87 | }, 88 | "reverse for loop": { 89 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 90 | "prefix": "rfl", 91 | "body": "for (let ${1:i} = ${2:iterable}.length - 1; ${1:i} >= 0; ${1:i}--) {\n\t${0}\n}", 92 | "description": "reverse for loop" 93 | }, 94 | "for in loop": { 95 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 96 | "prefix": "fi", 97 | "body": "for (let ${1:key} in ${2:array}) {\n\tif (${2:array}.hasOwnProperty(${1:key})) {\n\t\t${0}\n\t}\n}", 98 | "description": "for in loop" 99 | }, 100 | "for of loop (ES6)": { 101 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 102 | "prefix": "fo", 103 | "body": "for (let ${1:key} of ${2:array}) {\n\t${0}\n}", 104 | "description": "for of loop (ES6)" 105 | }, 106 | "while loop": { 107 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 108 | "prefix": "wl", 109 | "body": "while (${1:condition}) {\n\t${0}\n}", 110 | "description": "while loop" 111 | }, 112 | "try/catch": { 113 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 114 | "prefix": "tc", 115 | "body": "try {\n\t${0}\n} catch (${1:err}) {\n\t\n}", 116 | "description": "try/catch" 117 | }, 118 | "try/finally": { 119 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 120 | "prefix": "tf", 121 | "body": "try {\n\t${0}\n} finally {\n\t\n}", 122 | "description": "try/finally" 123 | }, 124 | "try/catch/finally": { 125 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 126 | "prefix": "tcf", 127 | "body": "try {\n\t${0}\n} catch (${1:err}) {\n\t\n} finally {\n\t\n}", 128 | "description": "try/catch/finally" 129 | }, 130 | "switch case": { 131 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 132 | "prefix": "sw", 133 | "body": "switch (${1:expr}) {\n\tcase ${2:value}:\n\t\treturn $0\n\tdefault:\n\t\treturn\n}", 134 | "description": "switch case" 135 | }, 136 | // Functions 137 | "anonymous function": { 138 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 139 | "prefix": "f", 140 | "body": "function (${1:arguments}) {\n\t${0}\n}", 141 | "description": "anonymous function" 142 | }, 143 | "named function": { 144 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 145 | "prefix": "fn", 146 | "body": "function ${1:name}(${2:arguments}) {\n\t${0}\n}", 147 | "description": "named function" 148 | }, 149 | "immediately-invoked function expression (IIFE)": { 150 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 151 | "prefix": "iife", 152 | "body": "((${1:arguments}) => {\n\t${0}\n})(${2})", 153 | "description": "immediately-invoked function expression (IIFE)" 154 | }, 155 | "function apply": { 156 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 157 | "prefix": "fa", 158 | "body": "${1:fn}.apply(${2:this}, ${3:arguments})", 159 | "description": "function apply" 160 | }, 161 | "function call": { 162 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 163 | "prefix": "fc", 164 | "body": "${1:fn}.call(${2:this}, ${3:arguments})", 165 | "description": "function call" 166 | }, 167 | "function bind": { 168 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 169 | "prefix": "fb", 170 | "body": "${1:fn}.bind(${2:this}, ${3:arguments})", 171 | "description": "function bind" 172 | }, 173 | "arrow function (ES6)": { 174 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 175 | "prefix": "af", 176 | "body": "(${1:arguments}) => ${2:statement}", 177 | "description": "arrow function (ES6)" 178 | }, 179 | "arrow function with body (ES6)": { 180 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 181 | "prefix": "afb", 182 | "body": "(${1:arguments}) => {\n\t${0}\n}", 183 | "description": "arrow function with body (ES6)" 184 | }, 185 | "generator function (ES6)": { 186 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 187 | "prefix": "gf", 188 | "body": "function* (${1:arguments}) {\n\t${0}\n}", 189 | "description": "generator function (ES6)" 190 | }, 191 | "named generator function (ES6)": { 192 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 193 | "prefix": "gfn", 194 | "body": "function* ${1:name}(${2:arguments}) {\n\t${0}\n}", 195 | "description": "named generator function (ES6)" 196 | }, 197 | // Iterables 198 | "sequence of 0..n": { 199 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 200 | "prefix": "seq", 201 | "body": "[...Array(${1:length}).keys()]${0}", 202 | "description": "sequence of 0..n" 203 | }, 204 | "forEach loop": { 205 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 206 | "prefix": "fe", 207 | "body": "${1}.forEach((${2:item}) => {\n\t${0}\n})", 208 | "description": "forEach loop" 209 | }, 210 | "map": { 211 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 212 | "prefix": "map", 213 | "body": "${1}.map((${2:item}) => {\n\t${0}\n})", 214 | "description": "map" 215 | }, 216 | "reduce": { 217 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 218 | "prefix": "reduce", 219 | "body": "${1}.reduce((${2:previous}, ${3:current}) => {\n\t${0}\n}${4:, initial})", 220 | "description": "reduce" 221 | }, 222 | "filter": { 223 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 224 | "prefix": "filter", 225 | "body": "${1}.filter(${2:item} => {\n\t${0}\n})", 226 | "description": "filter" 227 | }, 228 | "find": { 229 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 230 | "prefix": "find", 231 | "body": "${1}.find(${2:item} => {\n\t${0}\n})", 232 | "description": "find" 233 | }, 234 | // Objects and Classes 235 | "object literal": { 236 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 237 | "prefix": "ol", 238 | "body": "{\n\tkv${0}\n}", 239 | "description": "object literal" 240 | }, 241 | "same-line object literal": { 242 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 243 | "prefix": "slol", 244 | "body": "{ kv${0} }", 245 | "description": "same-line object literal" 246 | }, 247 | "key/value pair": { 248 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 249 | "prefix": "kv", 250 | "body": "${1:key}: ${2:value},", 251 | "description": "key/value pair" 252 | }, 253 | "class (ES6)": { 254 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 255 | "prefix": "c", 256 | "body": "class ${1:name} {\n\tconstructor(${2:arguments}) {\n\t\t${0}\n\t}\n}", 257 | "description": "class (ES6)" 258 | }, 259 | "child class (ES6)": { 260 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 261 | "prefix": "cex", 262 | "body": "class ${1:name} extends ${2:base} {\n\tconstructor(${3:arguments}) {\n\t\tsuper(${3:arguments})\n\t\t${0}\n\t}\n}", 263 | "description": "child class (ES6)" 264 | }, 265 | "class constructor (ES6)": { 266 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 267 | "prefix": "ctor", 268 | "body": "constructor(${1:arguments}) {\n\tsuper(${1:arguments})${0}\n}", 269 | "description": "class constructor (ES6)" 270 | }, 271 | "method (ES6 syntax)": { 272 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 273 | "prefix": "m", 274 | "body": "${1:method}(${2:arguments}) {\n\t${0}\n}", 275 | "description": "method (ES6 syntax)" 276 | }, 277 | "getter (ES6 syntax)": { 278 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 279 | "prefix": "get", 280 | "body": "get ${1:property}() {\n\t${0}\n}", 281 | "description": "getter (ES6 syntax)" 282 | }, 283 | "setter (ES6 syntax)": { 284 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 285 | "prefix": "set", 286 | "body": "set ${1:property}(${2:value}) {\n\t${0}\n}", 287 | "description": "setter (ES6 syntax)" 288 | }, 289 | "getter and setter (ES6 syntax)": { 290 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 291 | "prefix": "gs", 292 | "body": "get ${1:property}() {\n\t${0}\n}\nset ${1:property}(${2:value}) {\n\t\n}", 293 | "description": "getter and setter (ES6 syntax)" 294 | }, 295 | "prototypal constructor": { 296 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 297 | "prefix": "pctor", 298 | "body": "var ${1:Class} = function(${2:arguments}) {\n\t${0}\n}", 299 | "description": "prototypal constructor" 300 | }, 301 | "prototype method": { 302 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 303 | "prefix": "proto", 304 | "body": "${1:Class}.prototype.${2:method} = function(${3:arguments}) {\n\t${0}\n}", 305 | "description": "prototype method" 306 | }, 307 | "Object.assign": { 308 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 309 | "prefix": "oa", 310 | "body": "Object.assign(${1:dest}, ${2:source})", 311 | "description": "Object.assign" 312 | }, 313 | "Object.assign copy (shallow clone)": { 314 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 315 | "prefix": "oc", 316 | "body": "Object.assign({}, ${1:original}, ${2:source})", 317 | "description": "Object.assign copy (shallow clone)" 318 | }, 319 | // Returning values 320 | "return": { 321 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 322 | "prefix": "r", 323 | "body": "return ${0}", 324 | "description": "return" 325 | }, 326 | "return Promise (ES6)": { 327 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 328 | "prefix": "rp", 329 | "body": "return new Promise((resolve, reject) => {\n\t${0}\n})", 330 | "description": "return Promise (ES6)" 331 | }, 332 | "return complex value (such as JSX components)": { 333 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 334 | "prefix": "rc", 335 | "body": "return (\n\t${0}\n)", 336 | "description": "return complex value (such as JSX components)" 337 | }, 338 | // Types 339 | "typeof": { 340 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 341 | "prefix": "tof", 342 | "body": "typeof ${1:source} === '${2:undefined}'", 343 | "description": "typeof" 344 | }, 345 | "instanceof": { 346 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 347 | "prefix": "iof", 348 | "body": "${1:source} instanceof ${2:Object}", 349 | "description": "instanceof" 350 | }, 351 | // Promises 352 | "promise": { 353 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 354 | "prefix": "pr", 355 | "body": "new Promise((resolve, reject) => {\n\t${0}\n})", 356 | "description": "Promise (ES6)" 357 | }, 358 | "promise.then": { 359 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 360 | "prefix": "then", 361 | "body": "${1:promise}.then((${2:value}) => {\n\t${0}\n})", 362 | "description": "Promise.then" 363 | }, 364 | "promise.catch": { 365 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 366 | "prefix": "catch", 367 | "body": "${1:promise}.catch((${2:err}) => {\n\t${0}\n})", 368 | "description": "Promise.catch" 369 | }, 370 | // ES6 Modules 371 | "export (ES6)": { 372 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 373 | "prefix": "ex", 374 | "body": "export ${1:member}", 375 | "description": "export (ES6)" 376 | }, 377 | "export default (ES6)": { 378 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 379 | "prefix": "exd", 380 | "body": "export default ${1:member}", 381 | "description": "export default (ES6)" 382 | }, 383 | "import module (ES6)": { 384 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 385 | "prefix": "im", 386 | "body": "import ${1:*} from '${2:module}'", 387 | "description": "import module (ES6)" 388 | }, 389 | "import module as (ES6)": { 390 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 391 | "prefix": "ima", 392 | "body": "import ${1:*} as ${2:name} from '${3:module}'", 393 | "description": "import module as (ES6)" 394 | }, 395 | // Node.js 396 | "Node.js style callback": { 397 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 398 | "prefix": "cb", 399 | "body": "(err, ${1:value}) => {${0}}", 400 | "description": "Node.js style callback" 401 | }, 402 | "require": { 403 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 404 | "prefix": "re", 405 | "body": "require('${1:module}')", 406 | "description": "require" 407 | }, 408 | "require local": { 409 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 410 | "prefix": "rel", 411 | "body": "require('./${1:module}')", 412 | "description": "require local" 413 | }, 414 | "require assignment": { 415 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 416 | "prefix": "req", 417 | "body": "const ${1:module} = require('${1:module}')", 418 | "description": "require assignment" 419 | }, 420 | "require assignment local": { 421 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 422 | "prefix": "reql", 423 | "body": "const ${1:module} = require('./${1:module}')", 424 | "description": "require assignment local" 425 | }, 426 | "destructuring require assignment": { 427 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 428 | "prefix": "dreq", 429 | "body": "const {${1:module}} = require('${1:module}')", 430 | "description": "destructuring require assignment" 431 | }, 432 | "destructuring require assignment local": { 433 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 434 | "prefix": "dreql", 435 | "body": "const {${1:module}} = require('./${1:module}')", 436 | "description": "destructuring require assignment local" 437 | }, 438 | "exports.member": { 439 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 440 | "prefix": "em", 441 | "body": "exports.${1:member} = ${2:value}", 442 | "description": "exports.member" 443 | }, 444 | "module.exports": { 445 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 446 | "prefix": "me", 447 | "body": "module.exports = ${1:name}", 448 | "description": "module.exports" 449 | }, 450 | "module exports object": { 451 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 452 | "prefix": "meo", 453 | "body": "module.exports = {\n\t${1:member}\n}", 454 | "description": "module exports object" 455 | }, 456 | "event handler": { 457 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 458 | "prefix": "on", 459 | "body": "${1:emitter}.on('${2:event}', (${3:arguments}) => {\n\t${0}\n})", 460 | "description": "event handler" 461 | }, 462 | // Testing (Jest, Mocha, Jasmine, etc.) 463 | "describe": { 464 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 465 | "prefix": "desc", 466 | "body": "describe('${1:description}', () => {\n\t${0}\n})", 467 | "description": "describe" 468 | }, 469 | "context": { 470 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 471 | "prefix": "cont", 472 | "body": "context('${1:description}', () => {\n\t${0}\n})", 473 | "description": "context" 474 | }, 475 | "test (synchronous)": { 476 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 477 | "prefix": "it", 478 | "body": "it('${1:description}', () => {\n\t${0}\n})", 479 | "description": "test (synchronous)" 480 | }, 481 | "test (asynchronous)": { 482 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 483 | "prefix": "ita", 484 | "body": "it('${1:description}', async () => {\n\t${0}\n})", 485 | "description": "test (asynchronous)" 486 | }, 487 | "test (callback)": { 488 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 489 | "prefix": "itc", 490 | "body": "it('${1:description}', (done) => {\n\t${0}\n\tdone()\n})", 491 | "description": "test (callback)" 492 | }, 493 | "before test suite": { 494 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 495 | "prefix": "bf", 496 | "body": "before(() => {\n\t${0}\n})", 497 | "description": "before test suite" 498 | }, 499 | "before each test": { 500 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 501 | "prefix": "bfe", 502 | "body": "beforeEach(() => {\n\t${0}\n})", 503 | "description": "before each test" 504 | }, 505 | "after test suite": { 506 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 507 | "prefix": "aft", 508 | "body": "after(() => {\n\t${0}\n})", 509 | "description": "after test suite" 510 | }, 511 | "after each test": { 512 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 513 | "prefix": "afe", 514 | "body": "afterEach(() => {\n\t${0}\n})", 515 | "description": "after each test" 516 | }, 517 | // Console 518 | "console.log": { 519 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 520 | "prefix": "cl", 521 | "body": "console.log(${0})", 522 | "description": "console.log" 523 | }, 524 | "console.error": { 525 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 526 | "prefix": "ce", 527 | "body": "console.error(${0})", 528 | "description": "console.error" 529 | }, 530 | "console.warn": { 531 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 532 | "prefix": "cw", 533 | "body": "console.warn(${0})", 534 | "description": "console.warn" 535 | }, 536 | "console.log labeled": { 537 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 538 | "prefix": "cll", 539 | "body": "console.log('${0}', ${0})", 540 | "description": "console.log labeled" 541 | }, 542 | "console.error labeled": { 543 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 544 | "prefix": "cel", 545 | "body": "console.error('${0}', ${0})", 546 | "description": "console.error labeled" 547 | }, 548 | "console.warn labeled": { 549 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 550 | "prefix": "cwl", 551 | "body": "console.warn('${0}', ${0})", 552 | "description": "console.warn labeled" 553 | }, 554 | // Timers 555 | "setTimeout": { 556 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 557 | "prefix": "st", 558 | "body": "setTimeout(() => {\n\t${0}\n}, ${1:delay})", 559 | "description": "setTimeout" 560 | }, 561 | "setInterval": { 562 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 563 | "prefix": "si", 564 | "body": "setInterval(() => {\n\t${0}\n}, ${1:delay})", 565 | "description": "setInterval" 566 | }, 567 | "setImmediate": { 568 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 569 | "prefix": "sim", 570 | "body": "setImmediate(() => {\n\t${0}\n})", 571 | "description": "setImmediate" 572 | }, 573 | "process nextTick": { 574 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 575 | "prefix": "nt", 576 | "body": "process.nextTick(() => {\n\t${0}\n})", 577 | "description": "process nextTick" 578 | }, 579 | // Miscellaneous 580 | "insert 'use strict' statement": { 581 | "scope": "javascript,typescript,javascriptreact,typescriptreact", 582 | "prefix": "us", 583 | "body": "'use strict'", 584 | "description": "insert 'use strict' statement" 585 | } 586 | } 587 | -------------------------------------------------------------------------------- /snippets/js.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | // JavaScript 3 | "const statement": { 4 | "prefix": "co", 5 | "body": "const ${0}", 6 | "description": "const statement" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /snippets/jsx.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | // React (JS) 3 | "component static prop types": { 4 | "prefix": "propTypes", 5 | "body": "static propTypes = {$0}", 6 | "description": "Component Static Prop Types" 7 | }, 8 | "component static default props": { 9 | "prefix": "defaultProps", 10 | "body": "static defaultProps = {$0}", 11 | "description": "Component Static Default Props" 12 | }, 13 | "component static get derived state from props": { 14 | "prefix": "getDerivedStateFromProps", 15 | "body": "static getDerivedStateFromProps(${1:nextProps}, ${2:prevState}) {$0}", 16 | "description": "Component Static Get Derived State From Props" 17 | }, 18 | "component set state": { 19 | "prefix": "setState", 20 | "body": "this.setState($1)$0" 21 | }, 22 | "component constructor": { 23 | "prefix": "constructor", 24 | "body": [ 25 | "constructor(${1:props}) {", 26 | "\tsuper(${1:props})", 27 | "", 28 | "\t$4", 29 | "}" 30 | ] 31 | }, 32 | "component will mount": { 33 | "prefix": "componentWillMount", 34 | "body": "componentWillMount() {$0}", 35 | "description": "DEPRECATION WARNING [v16.3]: Use `componentDidMount` instead." 36 | }, 37 | "component did mount": { 38 | "prefix": "componentDidMount", 39 | "body": "componentDidMount() {$0}" 40 | }, 41 | "component will receive props": { 42 | "prefix": "componentWillReceiveProps", 43 | "body": "componentWillReceiveProps(${1:nextProps}) {$0}", 44 | "description": "DEPRECATION WARNING [v16.3]: Use `static getDerivedStateFromProps` instead." 45 | }, 46 | "should component update": { 47 | "prefix": "shouldComponentUpdate", 48 | "body": "shouldComponentUpdate(${1:nextProps}, ${2:nextState}) {$0}" 49 | }, 50 | "component will update": { 51 | "prefix": "componentWillUpdate", 52 | "body": "componentWillUpdate(${1:nextProps}, ${2:nextState}) {$0}", 53 | "description": "DEPRECATION WARNING [v16.3]: Use `componentDidUpdate` instead." 54 | }, 55 | "component did update": { 56 | "prefix": "componentDidUpdate", 57 | "body": "componentDidUpdate(${1:nextProps}, ${2:state}) {$0}" 58 | }, 59 | "component will unmount": { 60 | "prefix": "componentWillUnmount", 61 | "body": "componentWillUnmount() {$0}" 62 | }, 63 | "component did catch": { 64 | "prefix": "componentDidCatch", 65 | "body": "componentDidCatch(${1:error}, ${2:errorInfo}) {$0}" 66 | }, 67 | "component render": { 68 | "prefix": "render", 69 | "body": ["render() {", "\treturn ($0)", "}"] 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /snippets/ts.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | // TypeScript 3 | "const statement": { 4 | "prefix": "co", 5 | "body": "const ${0}", 6 | "description": "const statement" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /snippets/tsx.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | // React (TS) 3 | "component static prop types": { 4 | "prefix": "propTypes", 5 | "body": "static propTypes = {$0}", 6 | "description": "Component Static Prop Types" 7 | }, 8 | "component static default props": { 9 | "prefix": "defaultProps", 10 | "body": "static defaultProps: Partial<${1:${TM_FILENAME_BASE}Props}> = {$0}" 11 | }, 12 | "component static get derived state from props": { 13 | "prefix": "getDerivedStateFromProps", 14 | "body": "static getDerivedStateFromProps(${1:nextProps}: ${3:${TM_FILENAME_BASE}${2:Props}}, ${4:prevState}: ${6:${TM_FILENAME_BASE}${5:State}}): Partial<${6:${TM_FILENAME_BASE}${5:State}}> {$0}" 15 | }, 16 | "component set state": { 17 | "prefix": "setState", 18 | "body": "this.setState($1)$0" 19 | }, 20 | "component constructor": { 21 | "prefix": "constructor", 22 | "body": [ 23 | "constructor(${1:props}: ${3:${TM_FILENAME_BASE}${2:Props}}) {", 24 | "\tsuper(${1:props})", 25 | "", 26 | "\t$4", 27 | "}" 28 | ] 29 | }, 30 | "component will mount": { 31 | "prefix": "componentWillMount", 32 | "body": "componentWillMount() {$0}", 33 | "description": "DEPRECATION WARNING [v16.3]: Use `componentDidMount` instead." 34 | }, 35 | "component did mount": { 36 | "prefix": "componentDidMount", 37 | "body": "componentDidMount() {$0}" 38 | }, 39 | "component will receive props": { 40 | "prefix": "componentWillReceiveProps", 41 | "body": "componentWillReceiveProps(${1:nextProps}: ${3:${TM_FILENAME_BASE}${2:Props}}) {$0}", 42 | "description": "DEPRECATION WARNING [v16.3]: Use `static getDerivedStateFromProps` instead." 43 | }, 44 | "should component update": { 45 | "prefix": "shouldComponentUpdate", 46 | "body": "shouldComponentUpdate(${1:nextProps}: ${3:${TM_FILENAME_BASE}${2:Props}}, ${4:nextState}: ${6:${TM_FILENAME_BASE}${5:State}}) {$0}" 47 | }, 48 | "component will update": { 49 | "prefix": "componentWillUpdate", 50 | "body": "componentWillUpdate(${1:nextProps}: ${3:${TM_FILENAME_BASE}${2:Props}}, ${4:nextState}: ${6:${TM_FILENAME_BASE}${5:State}}) {$0}", 51 | "description": "DEPRECATION WARNING [v16.3]: Use `componentDidUpdate` instead." 52 | }, 53 | "component did update": { 54 | "prefix": "componentDidUpdate", 55 | "body": "componentDidUpdate(${1:nextProps}: ${3:${TM_FILENAME_BASE}${2:Props}}, ${4:nextState}: ${6:${TM_FILENAME_BASE}${5:State}}) {$0}" 56 | }, 57 | "component will unmount": { 58 | "prefix": "componentWillUnmount", 59 | "body": "componentWillUnmount() {$0}" 60 | }, 61 | "component did catch": { 62 | "prefix": "componentDidCatch", 63 | "body": "componentDidCatch(${1:error}: Error, ${2:errorInfo}: React.ErrorInfo) {$0}" 64 | }, 65 | "component render": { 66 | "prefix": "render", 67 | "body": ["render() {", "\treturn ($0)", "}"] 68 | } 69 | } 70 | --------------------------------------------------------------------------------