ES6 JavaScript Snippets for Visual Studio Code

This extension (which can also be found on the marketplace) is a JS snippets pack largely inspired by other extensions (Charalampos Karypidis) but with a few of my own twists and added snippets. I use vim extension so my snippets is likely biased towards vim users (I use "o"/"O" & "j"/"k" to jump around).

Supported File Types

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Html (.html)
• Vue (.vue) (Vetur extension required)

Help

1. You use each snippet by typing out their name (i.e. req) and then hitting TAB on your keyboard.
2. You must be in one of the supported file types for these snippets to work.
3. Some snippets have multiple steps you can cycle through.

• Hitting TAB will move you forward one step
• Hitting CTRL + TAB will move you back one step
• If you can't see any suggested snippets try hitting CTRL/COMMAND + SPACE

$1 is where the snippet starts and $0 is where the snippet ends.

Snippets

// CommonJS
const $0 = require('$1'); // req
module.exports = $0;      // mex

// ES6
import $0 from '$1';            // imp
import '$0';                    // imn
import { $0 } from '$1';        // imd
import * as $1 from '$0';       // ime
import { $2 as $0 } from '$1';  // ima
export                          // ex
export default $0;              // exp
export function $0() {}         // exf
export function $1($0) {}       // exfn
export { $0 } from '$1'         // exd
export { $2 as $0 } from '$1';  // exa

// Console
console.log()          // cl
console.log("$1", $1)  // clo
console.dir($1)        // cdir

// DOM
addEventListener('$1', $0)  // ae
querySelector('$0')         // qs
querySelectorAll('$0');     // qsa
appendChild($0);            // ac
removeChild($0);            // rc
createElement($0);          // ce
createTextNode($0);         // ctn
createDocumentFragment();   // cdf
classList.add($0);          // ca
classList.toggle($0);       // ct
classList.remove($0);       // cr
getElementById($0);         // gi
getElementsByClassName($0); // gc
getElementsByTagName($0);   // gt
getAttribute($0);           // ga
setAttribute($0);           // sa
removeAttribute($0);        // ra
querySelector('$1').addEventListener('$2', $0) // qsae

forEach(($1) => { $0 })     // fe
for (const $1 of $2) { $0 } // fof
for (const $1 in $2) { $0 } // fin

function $1($0) {}      // fn
function $1($2) {$0}    // fnn
const $1 = ($2) => $0   // afn
const $1 = ($2) => {$0} // afnn

const { $0 } = $1 // dob
const [$0] = $1   // dar

prototype.$1 = $0   // proto
(($1) => { $0 })(); // iife

// cla1, cla2, cla3 (for 1, 2 or 3 properties)
class $1 {
  constructor($2) {
    this.$2 = $2;
  }
}

// clex
class ${1:className} extends ${2:parentClass} {
  constructor($0) {
    super();
  }
}

constructor($0) {}   // con
constructor($1) {$0} // conn

$1 ($2) { $0 }               // met
get $1 () {return this.${0}} // pget
set $1 (${2:value}) {${0}}   // pset

setInterval(() => { $0 }, $1);  // sti
setTimeout(() => { $0 }, $1);   // sto

JSON.parse($0);     // jp
JSON.stringify($0); // js

return new Promise((resolve, reject) => { $0 }); // prom

// cmmb
/**
|--------------------------------
| $0
|--------------------------------
*/

MIT License