Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Sublime (and Atom) Snippets

Snippets are reusable chunks of code that you can easily and quickly drop into your text editor.

The way they work is you start typing a short hand code, a popup will appear and you simply press enter for the snippet you want and you'll get a predefined chunk of code.

The only gotcha to bare in mind is that snippets may only work when the file you are editing has a specific extension (i.e. JavaScript snippets would only work when editing a file ending with .js).

JS and NodeJS Snippets

Sublime | Atom

The JavaScript and NodeJS Snippets package by Zeno Rocha is a great package of simple snippets that allow you to quickly write out common JavaScript.

Below are some examples of shorthand codes and the code they produce:

ae (Add Event Listener)

document.addEventListener('event', function(e) {  
 // body...  
});

cel (Create Element)

document.createElement(elem);

cdf (Create Document Fragment)

document.createDocumentFragment(elem);

pr (Prototype)

ClassName.prototype.methodName = function(arguments) {  
 // body...  
}

iife (Immediately-invoked function expression)

(function(window, document, undefined) {  
 // body...  
})(window, document);

Here's the post by Ben Alman on iife's, just for Matt.

Zeno has a full list of the commands you can use on the github repo (and package pages).

ES2015 Toolkit

Sublime

ES2015 (a.k.a ES6) is awesome and with most awesome things, there's a snippet package to go with it.

To use this package and it's snippets, be sure to install Babel through NPM.

npm install -g babel

Also take note of the capital at the start of some of the shorthand codes.

Promise

Promise((resolve, reject) => {

});

class

class Classname extends AnotherClass {
  constructor(args) {
    // code
  }

  // methods
}

object

var obj = {
  __proto__: theProtoObj,
  handler,
  toString() {
    return "object";
  }
}

For full listing of the supported snippets check out the Sublime package control page.

Unfortunately this package isn't available for Atom. The closest equivalent seems to be this package titled 'es6-javascript'.

Polymer and Web Component Package

Sublime | Atom

Cut down your effort writing out boilerplate for Polymer with Mr Dodsons awesome Polymer and Web Component snippets.

hi (HTML Import)

<link rel="import" href="bower_components//.html">

pe (Polymer Element)

<dom-module id="">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>

  </template>
  <script>
    Polymer({
      is: ''
    });
  </script>
</dom-module>

React Snippets

Sublime | Atom

Finally for the React fans out there, there's a package for you too. Scaffold out components and commonly written code with these snippets.

rcc (Class Component Skeleton)

var React = require('react');
var PropTypes = React.PropTypes;

var  = React.createClass({

  render: function() {
    return (
      <div />
    );
  }

});

module.exports = ;

scu (shouldComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

props

this.props.

state

this.state.

MOAR Packages

There are a tonne of other packages which offer snippets for different frameworks, so if you find yourself writing the same pieces of code over and over, chances are someone has written a package to help make that a thing of the past, just do a search in the package manage for your editor (Sublime | Atom).