{"id":20266670,"url":"https://github.com/nathanchapman/vscode-javascript-snippets","last_synced_at":"2025-04-11T03:22:31.730Z","repository":{"id":98102899,"uuid":"107336721","full_name":"nathanchapman/vscode-javascript-snippets","owner":"nathanchapman","description":"✂️ Visual Studio Code snippets for JavaScript, TypeScript, and React","archived":false,"fork":false,"pushed_at":"2024-03-26T16:20:11.000Z","size":66,"stargazers_count":45,"open_issues_count":0,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T02:59:18.055Z","etag":null,"topics":["javascript","javascript-snippets","react","react-snippets","snippets","typescript","typescript-snippets","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathanchapman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-17T23:57:03.000Z","updated_at":"2025-02-24T23:26:52.000Z","dependencies_parsed_at":"2024-11-14T12:10:51.641Z","dependency_job_id":"8f2309d0-1ba3-462f-989a-fefe1d5f662e","html_url":"https://github.com/nathanchapman/vscode-javascript-snippets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanchapman%2Fvscode-javascript-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanchapman%2Fvscode-javascript-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanchapman%2Fvscode-javascript-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathanchapman%2Fvscode-javascript-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathanchapman","download_url":"https://codeload.github.com/nathanchapman/vscode-javascript-snippets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248334330,"owners_count":21086375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-snippets","react","react-snippets","snippets","typescript","typescript-snippets","vscode","vscode-extension"],"created_at":"2024-11-14T12:10:48.941Z","updated_at":"2025-04-11T03:22:31.709Z","avatar_url":"https://github.com/nathanchapman.png","language":null,"readme":"# ✂️ vscode-javascript-snippets\n\n[![Version](https://img.shields.io/vscode-marketplace/v/nathanchapman.javascriptsnippets.svg)](https://marketplace.visualstudio.com/items?itemName=nathanchapman.javascriptsnippets)\n[![Installs](https://img.shields.io/visual-studio-marketplace/i/nathanchapman.javascriptsnippets)](https://marketplace.visualstudio.com/items?itemName=nathanchapman.javascriptsnippets)\n[![Rating](https://img.shields.io/vscode-marketplace/r/nathanchapman.javascriptsnippets.svg)](https://marketplace.visualstudio.com/items?itemName=nathanchapman.javascriptsnippets\u0026ssr=false#review-details)\n\n\u003e Visual Studio Code snippets for JavaScript, TypeScript, and React\n\nCode snippets are templates that make it easier to autocomplete repeating code patterns. They're like shortcuts for writing code.\n\n## Setup\n\nJust 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.\n\n## Snippets\n\nThese snippets are optimized to be short and easy to remember.\nThey follow [JavaScript Standard Style](https://standardjs.com/).\nThey also support `tab` autocompletion to accelerate your workflow!\n\nBelow is a list of all available snippets and the shortcuts for each one. The `⇥` means the `tab` key.\n\n### JavaScript\n\n#### Declarations\n\n##### `v⇥` var statement\n\n```javascript\nvar ${0}\n```\n\n##### `v=⇥` var assignment\n\n```javascript\nvar ${1:name} = ${2:value}\n```\n\n##### `l⇥` let statement\n\n```javascript\nlet ${0}\n```\n\n##### `l=⇥` let assignment\n\n```javascript\nlet ${1:name} = ${2:value}\n```\n\n##### `dl=⇥` destructuring let assignment\n\n```javascript\nlet {${1:name}} = ${2:value}\n```\n\n##### `co⇥` const statement\n\n```javascript\nconst ${0}\n```\n\n##### `co=⇥` const assignment\n\n```javascript\nconst ${1:name} = ${2:value}\n```\n\n##### `dco=⇥` destructuring const assignment\n\n```javascript\nconst {${1:name}} = ${2:value}\n```\n\n#### Flow Control\n\n##### `if⇥` if statement\n\n```javascript\nif (${1:condition}) {\n  ${0}\n}\n```\n\n##### `el⇥` else statement\n\n```javascript\nelse {\n  ${0}\n}\n```\n\n##### `ifel⇥` if/else statement\n\n```javascript\nif (${1:condition}) {\n  ${0}\n} else {\n  \n}\n```\n\n##### `elif⇥` else if statement\n\n```javascript\nelse if (${1:condition}) {\n  ${0}\n}\n```\n\n##### `ter⇥` ternary operator\n\n```javascript\n${1:condition} ? ${2:expression} : ${3:expression}\n```\n\n##### `fl⇥` for loop\n\n```javascript\nfor (let ${1:i} = 0, ${2:len} = ${3:iterable}.length; ${1:i} \u003c ${2:len}; ${1:i}++) {\n  ${0}\n}\n```\n\n##### `rfl⇥` reverse for loop\n\n```javascript\nfor (let ${1:i} = ${2:iterable}.length - 1; ${1:i} \u003e= 0; ${1:i}--) {\n  ${0}\n}\n```\n\n##### `fi⇥` for in loop\n\n```javascript\nfor (let ${1:key} in ${2:array}) {\n  if (${2:array}.hasOwnProperty(${1:key})) {\n    ${0}\n  }\n}\n```\n\n},\n\n##### `fo⇥` for of loop (ES6)\n\n```javascript\nfor (let ${1:key} of ${2:array}) {\n  ${0}\n}\n```\n\n##### `wl⇥` while loop\n\n```javascript\nwhile (${1:condition}) {\n  ${0}\n}\n```\n\n##### `tc⇥` try/catch\n\n```javascript\ntry {\n  ${0}\n} catch (${1:err}) {\n  \n}\n```\n\n##### `tf⇥` try/finally\n\n```javascript\ntry {\n  ${0}\n} finally {\n  \n}\n```\n\n##### `tcf⇥` try/catch/finally\n\n```javascript\ntry {\n  ${0}\n} catch (${1:err}) {\n  \n} finally {\n  \n}\n```\n\n##### `sw⇥` switch case\n\n```javascript\nswitch (${1:expr}) {\n  case ${2:value}:\n    return $0\n  default:\n    return\n}\n```\n\n#### Functions\n\n##### `f⇥` anonymous function\n\n```javascript\nfunction (${1:arguments}) {\n  ${0}\n}\n```\n\n##### `fn⇥` named function\n\n```javascript\nfunction ${1:name}(${2:arguments}) {\n  ${0}\n}\n```\n\n##### `iife⇥` immediately-invoked function expression (IIFE)\n\n```javascript\n((${1:arguments}) =\u003e {\n  ${0}\n})(${2})\n```\n\n##### `fa⇥` function apply\n\n```javascript\n${1:fn}.apply(${2:this}, ${3:arguments})\n```\n\n##### `fc⇥` function call\n\n```javascript\n${1:fn}.call(${2:this}, ${3:arguments})\n```\n\n##### `fb⇥` function bind\n\n```javascript\n${1:fn}.bind(${2:this}, ${3:arguments})\n```\n\n##### `af⇥` arrow function (ES6)\n\n```javascript\n(${1:arguments}) =\u003e ${2:statement}\n```\n\n##### `afb⇥` arrow function with body (ES6)\n\n```javascript\n(${1:arguments}) =\u003e {\n  ${0}\n}\n```\n\n##### `gf⇥` generator function (ES6)\n\n```javascript\nfunction* (${1:arguments}) {\n  ${0}\n}\n```\n\n##### `gfn⇥` named generator function (ES6)\n\n```javascript\nfunction* ${1:name}(${2:arguments}) {\n  ${0}\n}\n```\n\n#### Iterables\n\n##### `seq⇥` sequence of 0..n\n\n```javascript\n[...Array(${1:length}).keys()]${0}\n```\n\n##### `fe⇥` forEach loop\n\n```javascript\n${1}.forEach((${2:item}) =\u003e {\n  ${0}\n})\n```\n\n##### `map⇥` map\n\n```javascript\n${1}.map((${2:item}) =\u003e {\n  ${0}\n})\n```\n\n##### `reduce⇥` reduce\n\n```javascript\n${1}.reduce((${2:previous}, ${3:current}) =\u003e {\n  ${0}\n}${4:, initial})\n```\n\n##### `filter⇥` filter\n\n```javascript\n${1}.filter(${2:item} =\u003e {\n  ${0}\n})\n```\n\n##### `find⇥` find\n\n```javascript\n${1}.find(${2:item} =\u003e {\n  ${0}\n})\n```\n\n#### Objects and Classes\n\n##### `ol⇥` object literal\n\n```javascript\n{\n  kv${0}\n}\n```\n\n##### `slol⇥` same-line object literal\n\n```javascript\n{ kv${0} }\n```\n\n##### `kv⇥` key/value pair\n\n```javascript\n${1:key}: ${2:value},\n```\n\n##### `c⇥` class (ES6)\n\n```javascript\nclass ${1:name} {\n  constructor(${2:arguments}) {\n    ${0}\n  }\n}\n```\n\n##### `cex⇥` child class (ES6)\n\n```javascript\nclass ${1:name} extends ${2:base} {\n  constructor(${3:arguments}) {\n    super(${3:arguments})\n    ${0}\n  }\n}\n```\n\n##### `ctor⇥` class constructor (ES6)\n\n```javascript\nconstructor(${1:arguments}) {\n  super(${1:arguments})\n  ${0}\n}\n```\n\n##### `m⇥` method (ES6 syntax)\n\n```javascript\n${1:method}(${2:arguments}) {\n  ${0}\n}\n```\n\n##### `get⇥` getter (ES6 syntax)\n\n```javascript\nget ${1:property}() {\n  ${0}\n}\n```\n\n##### `set⇥` setter (ES6 syntax)\n\n```javascript\nset ${1:property}(${2:value}) {\n  ${0}\n}\n```\n\n##### `gs⇥` getter and setter (ES6 syntax)\n\n```javascript\nget ${1:property}() {\n  ${0}\n}\n\nset ${1:property}(${2:value}) {\n  \n}\n```\n\n##### `pctor⇥` prototypal constructor\n\n```javascript\nvar ${1:Class} = function(${2:arguments}) {\n  ${0}\n}\n```\n\n##### `proto⇥` prototype method\n\n```javascript\n${1:Class}.prototype.${2:method} = function(${3:arguments}) {\n  ${0}\n}\n```\n\n##### `oa⇥` Object.assign\n\n```javascript\nObject.assign(${1:dest}, ${2:source})\n```\n\n##### `oc⇥` Object.assign copy (shallow clone)\n\n```javascript\nObject.assign({}, ${1:original}, ${2:source})\n```\n\n#### Returning values\n\n##### `r⇥` return\n\n```javascript\nreturn ${0}\n```\n\n##### `rp⇥` return Promise (ES6)\n\n```javascript\nreturn new Promise((resolve, reject) =\u003e {\n  ${0}\n})\n```\n\n##### `rc⇥` return complex value (such as JSX components)\n\n```javascript\nreturn (\n  ${0}\n)\n```\n\n#### Types\n\n##### `tof⇥` typeof\n\n```javascript\ntypeof ${1:source} === '${2:undefined}'\n```\n\n##### `iof⇥` instanceof\n\n```javascript\n${1:source} instanceof ${2:Object}\n```\n\n#### Promises\n\n##### `pr⇥` Promise (ES6)\n\n```javascript\nnew Promise((resolve, reject) =\u003e {\n  ${0}\n})\n```\n\n##### `then⇥` Promise.then\n\n```javascript\n${1:promise}.then((${2:value}) =\u003e {\n  ${0}\n})\n```\n\n##### `catch⇥` Promise.catch\n\n```javascript\n${1:promise}.catch((${2:err}) =\u003e {\n  ${0}\n})\n```\n\n#### ES6 Modules\n\n##### `ex⇥` export (ES6)\n\n```javascript\nexport ${1:member}\n```\n\n##### `exd⇥` export default (ES6)\n\n```javascript\nexport default ${1:member}\n```\n\n##### `im⇥` import module (ES6)\n\n```javascript\nimport ${1:*} from '${2:module}'\n```\n\n##### `ima⇥` import module as (ES6)\n\n```javascript\nimport ${1:*} as ${2:name} from '${3:module}'\n```\n\n#### Node.js\n\n##### `cb⇥` Node.js style callback\n\n```javascript\n(err, ${1:value}) =\u003e {${0}}\n```\n\n##### `re⇥` require\n\n```javascript\nrequire('${1:module}')\n```\n\n##### `rel⇥` require local\n\n```javascript\nrequire('./${1:module}')\n```\n\n##### `req⇥` require assignment\n\n```javascript\nconst ${1:module} = require('${1:module}')\n```\n\n##### `reql⇥` require assignment local\n\n```javascript\nconst ${1:module} = require('./${1:module}')\n```\n\n##### `dreq⇥` destructuring require assignment\n\n```javascript\nconst {${1:module}} = require('${1:module}')\n```\n\n##### `dreql⇥` destructuring require assignment local\n\n```javascript\nconst {${1:module}} = require('./${1:module}')\n```\n\n##### `em⇥` exports.member\n\n```javascript\nexports.${1:member} = ${2:value}\n```\n\n##### `me⇥` module.exports\n\n```javascript\nmodule.exports = ${1:name}\n```\n\n##### `meo⇥` module exports object\n\n```javascript\nmodule.exports = {\n  ${1:member}\n}\n```\n\n##### `on⇥` event handler\n\n```javascript\n${1:emitter}.on('${2:event}', (${3:arguments}) =\u003e {\n  ${0}\n})\n```\n\n#### Testing (Jest, Mocha, Jasmine, etc.)\n\n##### `desc⇥` describe\n\n```javascript\ndescribe('${1:description}', () =\u003e {\n  ${0}\n})\n```\n\n##### `cont⇥` context\n\n```javascript\ncontext('${1:description}', () =\u003e {\n  ${0}\n})\n```\n\n##### `it⇥` test (synchronous)\n\n```javascript\nit('${1:description}', () =\u003e {\n  ${0}\n})\n```\n\n##### `ita⇥` test (asynchronous)\n\n```javascript\nit('${1:description}', async () =\u003e {\n  ${0}\n})\n```\n\n##### `itc⇥` test (callback)\n\n```javascript\nit('${1:description}', (done) =\u003e {\n  ${0}\n  done()\n})\n```\n\n##### `bf⇥` before test suite\n\n```javascript\nbefore(() =\u003e {\n  ${0}\n})\n```\n\n##### `bfe⇥` before each test\n\n```javascript\nbeforeEach(() =\u003e {\n  ${0}\n})\n```\n\n##### `aft⇥` after test suite\n\n```javascript\nafter(() =\u003e {\n  ${0}\n})\n```\n\n##### `afe⇥` after each test\n\n```javascript\nafterEach(() =\u003e {\n  ${0}\n})\n```\n\n#### Console\n\n##### `cl⇥` console.log\n\n```javascript\nconsole.log(${0})\n```\n\n##### `ce⇥` console.error\n\n```javascript\nconsole.error(${0})\n```\n\n##### `cw⇥` console.warn\n\n```javascript\nconsole.warn(${0})\n```\n\n##### `cll⇥` console.log (labeled)\n\n```javascript\nconsole.log('${0}', ${0})\n```\n\n##### `cel⇥` console.error (labeled)\n\n```javascript\nconsole.error('${0}', ${0})\n```\n\n##### `cwl⇥` console.warn (labeled)\n\n```javascript\nconsole.warn('${0}', ${0})\n```\n\n#### Timers\n\n##### `st⇥` setTimeout\n\n```javascript\nsetTimeout(() =\u003e {\n  ${0}\n}, ${1:delay})\n```\n\n##### `si⇥` setInterval\n\n```javascript\nsetInterval(() =\u003e {\n  ${0}\n}, ${1:delay})\n```\n\n##### `sim⇥` setImmediate\n\n```javascript\nsetImmediate(() =\u003e {\n  ${0}\n})\n```\n\n##### `nt⇥` process nextTick\n\n```javascript\nprocess.nextTick(() =\u003e {\n  ${0}\n})\n```\n\n#### Miscellaneous\n\n##### `us⇥` insert 'use strict' statement\n\n```javascript\n'use strict'\n```\n\n#### React (JS)\n\n##### `propTypes⇥`\n\n```javascript\nstatic propTypes = {$0}\n```\n\n##### `defaultProps⇥`\n\n```javascript\nstatic defaultProps = {$0}\n```\n\n##### `getDerivedStateFromProps⇥`\n\n```javascript\nstatic getDerivedStateFromProps(${1:nextProps}, ${2:prevState}) {$0}\n```\n\n#### React (TS)\n\n##### `defaultProps⇥`\n\n```typescript\nstatic defaultProps: Partial\u003c${1:${TM_FILENAME_BASE}Props}\u003e = {$0}\n```\n\n##### `getDerivedStateFromProps⇥`\n\n```typescript\nstatic getDerivedStateFromProps(${1:nextProps}: ${3:${TM_FILENAME_BASE}${2:Props}}, ${4:prevState}: ${6:${TM_FILENAME_BASE}${5:State}}): Partial\u003c${6:${TM_FILENAME_BASE}${5:State}}\u003e {$0}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanchapman%2Fvscode-javascript-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathanchapman%2Fvscode-javascript-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathanchapman%2Fvscode-javascript-snippets/lists"}