Snippets Sublime (e Atom)

Snippets são pedaços reutilizáveis de ou código você pode abrir de maneira fácil e rápida em seu editor de texto.

Eles funcionam assim que você começa a digitar um código curto na mão, um pop-up é exibido e basta pressionar Enter no snippet desejado e obter uma um bloco de código.

O único problema a ter em mente é que os snippets só funcionam quando o arquivo que você estão editando tem uma extensão específica (ou seja, os snippets JavaScript só funcionam ao editar um arquivo terminado em .js).

Snippets JS e NodeJS

Sublime (em inglês) | Atom (em inglês)

Os snippets JavaScript e NodeJS pacote de Zeno Rocha é um ótimo pacote de trechos simples que permitem gravar rapidamente JavaScript comum.

Abaixo estão alguns exemplos de códigos abreviados e o código que eles produzem:

ae (adicionar listener de eventos)

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

cel (criar elemento)

document.createElement(elem);

cdf (criar fragmento do documento)

document.createDocumentFragment(elem);

pr (protótipo)

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

iife (expressão de função invocada imediatamente)

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

Esta é a postagem de Ben Alman em iife, apenas para Matt.

O Zeno tem uma lista completa dos comandos que você pode usar no github repo (e pacote ).

Kit de ferramentas ES2015

Sublime (em inglês)

O ES2015 (também conhecido como ES6) é incrível e tem vários recursos incríveis para acompanhá-lo.

Para usar este pacote e seus snippets, instale Babel por meio do NPM.

npm install -g babel

Além disso, observe a capital no início de alguns dos códigos abreviados.

Promise

Promise((resolve, reject) => {

});

classe

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

  // methods
}

objeto

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

Para uma lista completa de snippets suportados, confira o pacote Sublime de controle de acesso.

Este pacote não está disponível para o Atom. O equivalente mais próximo parece ser este pacote com o título "es6-javascript".

Pacote de componentes da Web e do Polymer

Sublime (em inglês) | Atom (em inglês)

Reduza seu trabalho de escrever códigos boilerplate para a Polymer com o Mr. Dodsons (em inglês) incríveis snippets do componente da Web e do Polymer.

hi (importação de HTML)

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

pe (elemento polímero)

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

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

Snippets do React

Sublime | Atom (em inglês)

Por fim, para os fãs do React, temos um pacote perfeito para vocês. Andaime e códigos comumente escritos com esses snippets.

rcc (esqueleto de componentes da classe)

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

var  = React.createClass({

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

});

module.exports = ;

scu (shouldComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

propriedades

this.props.

estado

this.state.

Pacotes MOAR

Há vários outros pacotes que oferecem snippets para diferentes se você escrever os mesmos pedaços de código repetidamente acabar, é provável que alguém tenha escrito um pacote para ajudar a tornar isso uma coisa basta fazer uma pesquisa no pacote de gerenciamento para seu editor (Sublime | Atom).