Extraits Sublime (et Atom)

Les extraits sont des fragments réutilisables code qui que vous pouvez déposer facilement et rapidement dans votre éditeur de texte.

Pour cela, vous commencez à saisir un code, une fenêtre pop-up s'affiche et il vous suffit d'appuyer sur Entrée pour obtenir l'extrait de code bloc de code.

Le seul point à garder à l'esprit est que les extraits ne fonctionnent que lorsque le fichier que vous modifiez possède une extension spécifique (c'est-à-dire que les extraits JavaScript ne fonctionnent que lorsque vous modifiez un fichier se terminant par .js).

Extraits JS et NodeJS

Sublime | Atom

Le package d'extraits JavaScript et Node.js de Zeno Rocha est un excellent package d'extraits simples qui vous permet d'écrire rapidement du code JavaScript courant.

Vous trouverez ci-dessous quelques exemples de codes courts et le code qu'ils génèrent:

ae (Ajouter un écouteur d'événements)

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

cel (Créer un élément)

document.createElement(elem);

cdf (Create Document Fragment)

document.createDocumentFragment(elem);

pr (prototype)

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

Expression de fonction appelée immédiatement (IIFE)

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

Voici le post de Ben Alman sur iifes, rien que pour Matt.

Zeno propose une liste complète des commandes que vous pouvez utiliser sur le GitHub repo (et les packages pages).

Kit d'outils ES2015

Sublime

ES2015 (ou ES6) est génial, et comme pour la plupart des choses géniales, il existe un package d'extraits correspondant.

Pour utiliser ce package et ses extraits, assurez-vous d'installer Babel via la gestion des partenaires du réseau.

npm install -g babel

Notez également la majuscule au début de certains codes abrégés.

Promise

Promise((resolve, reject) => {

});

classe

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

  // methods
}

objet

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

Pour obtenir la liste complète des extraits acceptés, consultez la page de contrôle des packages Sublime.

Malheureusement, ce package n'est pas disponible pour Atom. Équivalent le plus proche semble être ce package intitulé 'es6-javascript'.

Package Polymer et composants Web

Sublime | Atom

Écrivez plus facilement que du code récurrent pour Polymer avec Mr Dodsons : des extraits de code formidables Polymer et Web Component.

hi (importation HTML)

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

pe (élément polymère)

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

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

Extraits React

Sublime | Atom

Enfin, pour les fans de React, un package est également disponible. Créez des composants et du code couramment écrit avec ces extraits.

rcc (squelette du composant de classe)

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

var  = React.createClass({

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

});

module.exports = ;

scu (shouldComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

objets

this.props.

state

this.state.

Packages MOAR

Il existe une tonne d'autres packages qui proposent des extraits pour différents frameworks. Si vous vous retrouvez à écrire les mêmes éléments de code encore et encore, il est probable que quelqu'un ait écrit un package pour vous aider à y remédier. Il vous suffit de faire une recherche dans le gestionnaire de paquets de votre éditeur (Sublime | Atom).