Les extraits sont des morceaux de code réutilisables que vous pouvez insérer facilement et rapidement dans votre éditeur de texte.
Pour cela, vous devez commencer à saisir un petit code manuel. Une fenêtre pop-up s'affiche. Appuyez simplement sur Entrée pour obtenir un fragment de code prédéfini.
Le seul problème à garder à l'esprit est que les extraits ne fonctionnent que lorsque le fichier que vous modifiez possède une extension spécifique (par exemple, les extraits JavaScript ne fonctionnent que lorsque vous modifiez un fichier se terminant par .js).
Extraits JS et NodeJS
Le package d'extraits JavaScript et NodeJS 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 abrégés et du 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 (créer un fragment de document)
document.createDocumentFragment(elem);
pr (prototype)
ClassName.prototype.methodName = function(arguments) {
// body...
}
iife (expression de fonction appelée immédiatement)
(function(window, document, undefined) {
// body...
})(window, document);
Voici le post de Ben Alman sur iife's, juste pour Matt.
Zeno dispose d'une liste complète des commandes que vous pouvez utiliser sur le dépôt GitHub (et les pages de packages).
Kit ES2015
ES2015 (également connu sous le nom d'ES6) est génial. Et pour la plupart des nouveautés, un package d'extraits est fourni.
Pour utiliser ce package et ses extraits, veillez à installer Babel via NPM.
npm install -g babel
Notez également la majuscule au début de certains codes abrégés.
Promesse
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 compatibles, consultez la page de contrôle des packages Sublime.
Malheureusement, ce package n'est pas disponible pour Atom. L'équivalent le plus proche semble être ce package intitulé "es6-javascript".
Polymer and Web Component Package
Simplifiez l'écriture de code récurrent pour Polymer grâce aux extraits Polymer et Web Component de Mr Dodsons.
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 de réaction
Enfin, pour les fans de React, il y a aussi un pack pour vous. échafaudez les composants et le code couramment écrit avec ces extraits.
rcc (squelette composante 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) {
},
props
this.props.
state
this.state.
Packages MOAR
Il existe une tonne d'autres packages qui proposent des extraits pour différents frameworks. Par conséquent, si vous écrivez les mêmes éléments de code encore et encore, il est probable que quelqu'un ait écrit un package pour rendre ce concept passé. Effectuez simplement une recherche dans la gestion des packages pour votre éditeur (Sublime | Atom).