Gli snippet sono blocchi riutilizzabili di il codice puoi inserire dati nell'editor di testo facilmente e rapidamente.
Il loro funzionamento consiste nel digitare un breve codice, appare un popup e è sufficiente premere Invio per lo snippet desiderato e verrà visualizzata una un frammento di codice.
L'unica cosa da tenere a mente è che gli snippet possono funzionare solo quando il file hanno un'estensione specifica (ad es. gli snippet JavaScript funzionerebbero quando modifichi un file che termina con .js).
Snippet JS e NodeJS
Gli snippet JavaScript e NodeJS pacco di Zeno Rocha è un ottimo pacchetto di semplici snippet che ti consentono di scrivere rapidamente codice JavaScript comune.
Di seguito sono riportati alcuni esempi di codici brevi e del codice che generano:
ae (Aggiungi listener di eventi)
document.addEventListener('event', function(e) {
// body...
});
cel (Crea elemento)
document.createElement(elem);
cdf (Crea frammento documento)
document.createDocumentFragment(elem);
pr (prototipo)
ClassName.prototype.methodName = function(arguments) {
// body...
}
iife (espressione di funzione richiamata immediatamente)
(function(window, document, undefined) {
// body...
})(window, document);
Ecco il post di Ben Alman su iife, solo per Matt.
Zeno ha un elenco completo dei comandi che puoi usare su github repo (e pacchettizza pagine).
Toolkit ES2015
ES2015 (noto anche come ES6) è incredibile e, con le cose più interessanti, c'è un estratto pacchetto da accompagnare.
Per utilizzare questo pacchetto e i relativi snippet, assicurati di installare Da Babel a Gestione dei partner di rete.
npm install -g babel
Inoltre, prendi nota della lettera maiuscola all'inizio di alcuni codici brevi.
Promesso
Promise((resolve, reject) => {
});
classe
class Classname extends AnotherClass {
constructor(args) {
// code
}
// methods
}
oggetto
var obj = {
__proto__: theProtoObj,
handler,
toString() {
return "object";
}
}
Per un elenco completo degli snippet supportati, consulta il pacchetto Sublime pagina di controllo.
Purtroppo questo pacchetto non è disponibile per Atom. L'equivalente più prossimo sembra essere questo pacchetto denominato "es6-JavaScript".
Pacchetto di componenti Polymer e Web
Riduci i tuoi sforzi per scrivere boilerplate per Polymer con Mr Dodsons fantastici snippet Polymer e componenti web.
hi (importazione HTML)
<link rel="import" href="bower_components//.html">
pe (elemento polimerico)
<dom-module id="">
<style>
:host {
display: block;
}
</style>
<template>
</template>
<script>
Polymer({
is: ''
});
</script>
</dom-module>
Snippet delle reazioni
Infine, c'è un pacchetto per i fan di React, disponibile anche per te. Impalcatura componenti e codice comunemente scritto con questi snippet.
rcc (scheletro componente della classe)
var React = require('react');
var PropTypes = React.PropTypes;
var = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = ;
scu (WhereComponentUpdate)
shouldComponentUpdate: function(nextProps, nextState) {
},
oggetti
this.props.
stato
this.state.
Pacchetti MOAR
Esistono moltissimi altri pacchetti che offrono snippet per framework, quindi se ti ritrovi a scrivere gli stessi frammenti è probabile che qualcuno abbia scritto un pacchetto per passato, esegui una ricerca nella gestione dei pacchetti per il tuo editor (Sublime | Atom).