├── .github └── FUNDING.yml ├── .gitignore ├── .vscodeignore ├── LICENSE ├── README.md ├── art ├── js-icon.png └── js-icon.psd ├── package.json └── snippets └── javascript.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: akamud 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | node_modules -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | typings/** 3 | out/test/** 4 | test/** 5 | **/*.ts 6 | **/*.map 7 | .gitignore 8 | tsconfig.json 9 | vsc-extension-quickstart.md 10 | art/js-icon.psd 11 | .travis.yml 12 | test-data/** 13 | coverage/** -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Mahmoud Ali 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## JavaScript Snippet Pack for Visual Studio Code 2 | 3 | Download this extension from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items/akamud.vscode-javascript-snippet-pack) 4 | 5 | ## Sponsors 6 | 7 | [![](https://alt-images.codestream.com/codestream_logo_ali_javascriptsnippet.png)](https://sponsorlink.codestream.com/?utm_source=vscmarket&utm_campaign=ali_javascriptsnippet&utm_medium=banner "Try CodeStream") 8 | Request and perform code reviews from inside your IDE. Review any code, even if it's a work-in-progress that hasn't been committed yet, and use jump-to-definition, your favorite keybindings, and other IDE tools. 9 | [Try it free](https://sponsorlink.codestream.com/?utm_source=vscmarket&utm_campaign=ali_javascriptsnippet&utm_medium=banner "Try CodeStream") 10 | 11 | ## Usage 12 | 13 | ----------------------------------------- 14 | 15 | A snippet pack to make you more productive working with JavaScript. 16 | Based on [Visual Studio extension](https://github.com/madskristensen/JavaScriptSnippetPack) by [Mads Kristensen](https://github.com/madskristensen), which is based on [Atom snippets](https://atom.io/packages/javascript-snippets). 17 | 18 | This extension ships a bunch of useful code snippets for the JavaScript and TypeScript editors. 19 | 20 | Here's the full list of all the snippets: 21 | 22 | ## Console 23 | 24 | ### [cd] console.dir 25 | 26 | ```javascript 27 | console.dir(${1}); 28 | ``` 29 | 30 | ### [ce] console.error 31 | 32 | ```javascript 33 | console.error(${1}); 34 | ``` 35 | 36 | ### [ci] console.info 37 | 38 | ```javascript 39 | console.info(${1}); 40 | ``` 41 | 42 | ### [cl] console.log 43 | 44 | ```javascript 45 | console.log(${1}); 46 | ``` 47 | 48 | ### [cw] console.warn 49 | 50 | ```javascript 51 | console.warn(${1}); 52 | ``` 53 | 54 | ### [de] debugger 55 | 56 | ```javascript 57 | debugger; 58 | ``` 59 | 60 | ## DOM 61 | 62 | ### [ae] addEventListener 63 | 64 | ```javascript 65 | ${1:document}.addEventListener('${2:load}', function(e) { 66 | ${3:// body} 67 | }); 68 | ``` 69 | 70 | ### [ac] appendChild 71 | 72 | ```javascript 73 | ${1:document}.appendChild(${2:elem}); 74 | ``` 75 | 76 | ### [rc] removeChild 77 | 78 | ```javascript 79 | ${1:document}.removeChild(${2:elem}); 80 | ``` 81 | 82 | ### [cel] createElement 83 | 84 | ```javascript 85 | ${1:document}.createElement(${2:elem}); 86 | ``` 87 | 88 | ### [cdf] createDocumentFragment 89 | 90 | ```javascript 91 | ${1:document}.createDocumentFragment(); 92 | ``` 93 | 94 | ### [ca] classList.add 95 | 96 | ```javascript 97 | ${1:document}.classList.add('${2:class}'); 98 | ``` 99 | 100 | ### [ct] classList.toggle 101 | 102 | ```javascript 103 | ${1:document}.classList.toggle('${2:class}'); 104 | ``` 105 | 106 | ### [cr] classList.remove 107 | 108 | ```javascript 109 | ${1:document}.classList.remove('${2:class}'); 110 | ``` 111 | 112 | ### [gi] getElementById 113 | 114 | ```javascript 115 | ${1:document}.getElementById('${2:id}'); 116 | ``` 117 | 118 | ### [gc] getElementsByClassName 119 | 120 | ```javascript 121 | ${1:document}.getElementsByClassName('${2:class}'); 122 | ``` 123 | 124 | ### [gt] getElementsByTagName 125 | 126 | ```javascript 127 | ${1:document}.getElementsByTagName('${2:tag}'); 128 | ``` 129 | 130 | ### [ga] getAttribute 131 | 132 | ```javascript 133 | ${1:document}.getAttribute('${2:attr}'); 134 | ``` 135 | 136 | ### [sa] setAttribute 137 | 138 | ```javascript 139 | ${1:document}.setAttribute('${2:attr}', ${3:value}); 140 | ``` 141 | 142 | ### [ra] removeAttribute 143 | 144 | ```javascript 145 | ${1:document}.removeAttribute('${2:attr}'); 146 | ``` 147 | 148 | ### [ih] innerHTML 149 | 150 | ```javascript 151 | ${1:document}.innerHTML = '${2:elem}'; 152 | ``` 153 | 154 | ### [tc] textContent 155 | 156 | ```javascript 157 | ${1:document}.textContent = '${2:content}'; 158 | ``` 159 | 160 | ### [qs] querySelector 161 | 162 | ```javascript 163 | ${1:document}.querySelector('${2:selector}'); 164 | ``` 165 | 166 | ### [qsa] querySelectorAll 167 | 168 | ```javascript 169 | ${1:document}.querySelectorAll('${2:selector}'); 170 | ``` 171 | 172 | ## Loop 173 | 174 | ### [fe] forEach 175 | 176 | ```javascript 177 | ${1:array}.forEach(function(item) { 178 | ${2:// body} 179 | }); 180 | ``` 181 | 182 | ## Function 183 | 184 | ### [fn] function 185 | 186 | ```javascript 187 | function ${1:methodName} (${2:arguments}) { 188 | ${3:// body} 189 | } 190 | ``` 191 | 192 | ### [afn] anonymous function 193 | 194 | ```javascript 195 | function(${1:arguments}) { 196 | ${2:// body} 197 | } 198 | ``` 199 | 200 | ### [pr] prototype 201 | 202 | ```javascript 203 | ${1:object}.prototype.${2:method} = function(${3:arguments}) { 204 | ${4:// body} 205 | } 206 | ``` 207 | 208 | ### [iife] immediately-invoked function expression 209 | 210 | ```javascript 211 | (function(${1:window}, ${2:document}) { 212 | ${3:// body} 213 | })(${1:window}, ${2:document}); 214 | ``` 215 | 216 | ### [call] function call 217 | 218 | ```javascript 219 | ${1:method}.call(${2:context}, ${3:arguments}) 220 | ``` 221 | 222 | ### [apply] function apply 223 | 224 | ```javascript 225 | ${1:method}.apply(${2:context}, [${3:arguments}]) 226 | ``` 227 | 228 | ### [ofn] function as a property of an object 229 | 230 | ```javascript 231 | ${1:functionName}: function(${2:arguments}) { 232 | ${3:// body} 233 | } 234 | ``` 235 | 236 | ## JSON 237 | 238 | ### [jp] JSON.parse 239 | 240 | ```javascript 241 | JSON.parse(${1:obj}); 242 | ``` 243 | 244 | ### [js] JSON.stringify 245 | 246 | ```javascript 247 | JSON.stringify(${1:obj}); 248 | ``` 249 | 250 | ## Timer 251 | 252 | ### [si] setInterval 253 | 254 | ```javascript 255 | setInterval(function() { 256 | ${0:// body} 257 | }, ${1:1000}); 258 | ``` 259 | 260 | ### [st] setTimeout 261 | 262 | ```javascript 263 | setTimeout(function() { 264 | ${0:// body} 265 | }, ${1:1000}); 266 | ``` 267 | 268 | ## Misc 269 | 270 | ### [us] use strict 271 | 272 | ```javascript 273 | 'use strict'; 274 | ``` 275 | 276 | ### [al] alert 277 | 278 | ```javascript 279 | alert('${1:msg}'); 280 | ``` 281 | 282 | ### [co] confirm 283 | 284 | ```javascript 285 | confirm('${1:msg}'); 286 | ``` 287 | 288 | ### [pm] prompt 289 | 290 | ```javascript 291 | prompt('${1:msg}'); 292 | ``` 293 | 294 | ## License 295 | [MIT License](https://raw.githubusercontent.com/akamud/vscode-javascript-snippet-pack/master/LICENSE) 296 | -------------------------------------------------------------------------------- /art/js-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akamud/vscode-javascript-snippet-pack/2350c241605cf001259c92c6ee803a699de6c1e2/art/js-icon.png -------------------------------------------------------------------------------- /art/js-icon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akamud/vscode-javascript-snippet-pack/2350c241605cf001259c92c6ee803a699de6c1e2/art/js-icon.psd -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscode-javascript-snippet-pack", 3 | "publisher": "akamud", 4 | "displayName": "JavaScript Snippet Pack ", 5 | "description": "A snippet pack to make you more productive working with JavaScript", 6 | "icon": "art/js-icon.png", 7 | "galleryBanner": { 8 | "color": "#F0DB4F", 9 | "theme": "dark" 10 | }, 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/akamud/vscode-javascript-snippet-pack/issues" 14 | }, 15 | "homepage": "https://github.com/akamud/vscode-javascript-snippet-pack/", 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/akamud/vscode-javascript-snippet-pack/blob/master/README.md" 19 | }, 20 | "version": "0.1.6", 21 | "engines": { "vscode": "^0.11.x" }, 22 | "categories": ["Snippets"], 23 | "keywords": [ 24 | "Javascript", 25 | "Typescript" 26 | ], 27 | "contributes": { 28 | "snippets": [ 29 | { 30 | "language": "javascript", 31 | "path": "./snippets/javascript.json" 32 | }, 33 | { 34 | "language": "typescript", 35 | "path": "./snippets/javascript.json" 36 | }, 37 | { 38 | "language": "javascriptreact", 39 | "path": "./snippets/javascript.json" 40 | }, 41 | { 42 | "language": "typescriptreact", 43 | "path": "./snippets/javascript.json" 44 | } 45 | ] 46 | } 47 | } -------------------------------------------------------------------------------- /snippets/javascript.json: -------------------------------------------------------------------------------- 1 | { 2 | "console.dir": { 3 | "prefix": "cd", 4 | "body": [ 5 | "console.dir($1);" 6 | ], 7 | "description": "Code snippet for \"console.dir\"" 8 | }, 9 | "console.error": { 10 | "prefix": "ce", 11 | "body": [ 12 | "console.error($1);" 13 | ], 14 | "description": "Code snippet for \"console.error\"" 15 | }, 16 | "console.info": { 17 | "prefix": "ci", 18 | "body": [ 19 | "console.info($1);" 20 | ], 21 | "description": "Code snippet for \"console.info\"" 22 | }, 23 | "console.log": { 24 | "prefix": "cl", 25 | "body": [ 26 | "console.log($1);" 27 | ], 28 | "description": "Code snippet for \"console.log\"" 29 | }, 30 | "console.warn": { 31 | "prefix": "cw", 32 | "body": [ 33 | "console.warn($1);" 34 | ], 35 | "description": "Code snippet for \"console.warn\"" 36 | }, 37 | "debugger": { 38 | "prefix": "de", 39 | "body": [ 40 | "debugger;$1" 41 | ], 42 | "description": "Code snippet for \"debugger\"" 43 | }, 44 | "addEventListener": { 45 | "prefix": "ae", 46 | "body": [ 47 | "${1:document}.addEventListener('${2:load}', function (e) {", 48 | "\t${3:// body}", 49 | "});" 50 | ], 51 | "description": "Code snippet for \"addEventListener\"" 52 | }, 53 | "appendChild": { 54 | "prefix": "ac", 55 | "body": [ 56 | "${1:document}.appendChild(${2:elem});" 57 | ], 58 | "description": "Code snippet for \"appendChild\"" 59 | }, 60 | "removeChild": { 61 | "prefix": "rc", 62 | "body": [ 63 | "${1:document}.removeChild(${2:elem});" 64 | ], 65 | "description": "Code snippet for \"removeChild\"" 66 | }, 67 | "createElement": { 68 | "prefix": "cel", 69 | "body": [ 70 | "${1:document}.createElement(${2:elem});" 71 | ], 72 | "description": "Code snippet for \"createElement\"" 73 | }, 74 | "createDocumentFragment": { 75 | "prefix": "cdf", 76 | "body": [ 77 | "${1:document}.createDocumentFragment();$2" 78 | ], 79 | "description": "Code snippet for \"createDocumentFragment\"" 80 | }, 81 | "classList.add": { 82 | "prefix": "ca", 83 | "body": [ 84 | "${1:document}.classList.add('${2:class}');" 85 | ], 86 | "description": "Code snippet for \"classList.add\"" 87 | }, 88 | "classList.toggle": { 89 | "prefix": "ct", 90 | "body": [ 91 | "${1:document}.classList.toggle('${2:class}');" 92 | ], 93 | "description": "Code snippet for \"classList.toggle\"" 94 | }, 95 | "classList.remove": { 96 | "prefix": "cr", 97 | "body": [ 98 | "${1:document}.classList.remove('${2:class}');" 99 | ], 100 | "description": "Code snippet for \"classList.remove\"" 101 | }, 102 | "getElementById": { 103 | "prefix": "gi", 104 | "body": [ 105 | "${1:document}.getElementById('${2:id}');" 106 | ], 107 | "description": "Code snippet for \"getElementById\"" 108 | }, 109 | "getElementsByClassName": { 110 | "prefix": "gc", 111 | "body": [ 112 | "${1:document}.getElementsByClassName('${2:class}');" 113 | ], 114 | "description": "Code snippet for \"getElementsByClassName\"" 115 | }, 116 | "getElementsByTagName": { 117 | "prefix": "gt", 118 | "body": [ 119 | "${1:document}.getElementsByTagName('${2:tag}');" 120 | ], 121 | "description": "Code snippet for \"getElementsByTagName\"" 122 | }, 123 | "getAttribute": { 124 | "prefix": "ga", 125 | "body": [ 126 | "${1:document}.getAttribute('${2:attr}');" 127 | ], 128 | "description": "Code snippet for \"getAttribute\"" 129 | }, 130 | "setAttribute": { 131 | "prefix": "sa", 132 | "body": [ 133 | "${1:document}.setAttribute('${2:attr}', ${3:value});" 134 | ], 135 | "description": "Code snippet for \"setAttribute\"" 136 | }, 137 | "removeAttribute": { 138 | "prefix": "ra", 139 | "body": [ 140 | "${1:document}.removeAttribute('${2:attr}');" 141 | ], 142 | "description": "Code snippet for \"removeAttribute\"" 143 | }, 144 | "innerHTML": { 145 | "prefix": "ih", 146 | "body": [ 147 | "${1:document}.innerHTML = '${2:elem}';" 148 | ], 149 | "description": "Code snippet for \"innerHTML\"" 150 | }, 151 | "textContent": { 152 | "prefix": "tc", 153 | "body": [ 154 | "${1:document}.textContent = '${2:content}';" 155 | ], 156 | "description": "Code snippet for \"textContent\"" 157 | }, 158 | "querySelector": { 159 | "prefix": "qs", 160 | "body": [ 161 | "${1:document}.querySelector('${2:selector}');" 162 | ], 163 | "description": "Code snippet for \"querySelector\"" 164 | }, 165 | "querySelectorAll": { 166 | "prefix": "qsa", 167 | "body": [ 168 | "${1:document}.querySelectorAll('${2:selector}');" 169 | ], 170 | "description": "Code snippet for \"querySelectorAll\"" 171 | }, 172 | "forEach": { 173 | "prefix": "fe", 174 | "body": [ 175 | "${1:array}.forEach(function(item) {", 176 | "\t${2:// body}", 177 | "});" 178 | ], 179 | "description": "Code snippet for \"forEach\"" 180 | }, 181 | "function": { 182 | "prefix": "fn", 183 | "body": [ 184 | "function ${1:methodName} (${2:arguments}) {", 185 | "\t${3:// body}", 186 | "}" 187 | ], 188 | "description": "Code snippet for function" 189 | }, 190 | "anonymous function": { 191 | "prefix": "afn", 192 | "body": [ 193 | "function(${1:arguments}) {", 194 | "\t${2:// body}", 195 | "}" 196 | ], 197 | "description": "Code snippet for anonymous function" 198 | }, 199 | "prototype": { 200 | "prefix": "pr", 201 | "body": [ 202 | "${1:object}.prototype.${2:method} = function(${3:arguments}) {", 203 | "\t${4:// body}", 204 | "}" 205 | ], 206 | "description": "Code snippet for prototype" 207 | }, 208 | "immediately-invoked function expression": { 209 | "prefix": "iife", 210 | "body": [ 211 | "(function(${1:window}, ${2:document}) {", 212 | "\t${3:// body}", 213 | "})(${1:window}, ${2:document});" 214 | ], 215 | "description": "Code snippet for immediately-invoked function expression" 216 | }, 217 | "function call": { 218 | "prefix": "call", 219 | "body": [ 220 | "${1:method}.call(${2:context}, ${3:arguments});" 221 | ], 222 | "description": "Code snippet for function call" 223 | }, 224 | "function apply": { 225 | "prefix": "apply", 226 | "body": [ 227 | "${1:method}.apply(${2:context}, [${3:arguments}]);" 228 | ], 229 | "description": "Code snippet for function apply" 230 | }, 231 | "function as a property of an object": { 232 | "prefix": "ofn", 233 | "body": [ 234 | "${1:functionName}: function(${2:arguments}) {", 235 | "\t${3:// body}", 236 | "}" 237 | ], 238 | "description": "Code snippet for function as a property of an object" 239 | }, 240 | "JSON.parse": { 241 | "prefix": "jp", 242 | "body": [ 243 | "JSON.parse(${1:obj});" 244 | ], 245 | "description": "Code snippet for 'JSON.parse'" 246 | }, 247 | "JSON.stringify": { 248 | "prefix": "js", 249 | "body": [ 250 | "JSON.stringify(${1:obj});" 251 | ], 252 | "description": "Code snippet for 'JSON.stringify'" 253 | }, 254 | "setInterval": { 255 | "prefix": "si", 256 | "body": [ 257 | "setInterval(function() {", 258 | "\t${0:// body}", 259 | "}, ${1:1000});" 260 | ], 261 | "description": "Code snippet for 'setInterval'" 262 | }, 263 | "setTimeout": { 264 | "prefix": "st", 265 | "body": [ 266 | "setTimeout(function() {", 267 | "\t${0:// body}", 268 | "}, ${1:1000});" 269 | ], 270 | "description": "Code snippet for 'setTimeout'" 271 | }, 272 | "use strict": { 273 | "prefix": "us", 274 | "body": [ 275 | "'use strict';" 276 | ], 277 | "description": "Code snippet for 'use strict'" 278 | }, 279 | "alert": { 280 | "prefix": "al", 281 | "body": [ 282 | "alert('${1:msg}');" 283 | ], 284 | "description": "Code snippet for 'alert'" 285 | }, 286 | "confirm": { 287 | "prefix": "co", 288 | "body": [ 289 | "confirm('${1:msg}');" 290 | ], 291 | "description": "Code snippet for 'confirm'" 292 | }, 293 | "prompt": { 294 | "prefix": "pm", 295 | "body": [ 296 | "prompt('${1:msg}');" 297 | ], 298 | "description": "Code snippet for 'prompt'" 299 | } 300 | } --------------------------------------------------------------------------------