Gli snippet sono blocchi di codice riutilizzabili che puoi trascinare facilmente e rapidamente nel tuo editor di testo.
Inizia a digitare un breve codice, appare una finestra popup e premi Invio per selezionare lo snippet desiderato per ottenere un blocco di codice predefinito.
L'unico aspetto da tenere presente è che gli snippet possono funzionare solo se il file che stai modificando ha un'estensione specifica (ad esempio, gli snippet JavaScript funzionano solo quando si modifica un file che termina con .js).
Snippet JS e NodeJS
Il pacchetto di snippet JavaScript e NodeJSdi Zeno Rocha è un ottimo pacchetto di semplici snippet che ti consentono di scrivere rapidamente il codice JavaScript più comune.
Di seguito sono riportati alcuni esempi di codici abbreviati e il codice che producono:
ae (Aggiungi listener di eventi)
document.addEventListener('event', function(e) {
// body...
});
cel (Crea elemento)
document.createElement(elem);
cdf (Crea frammento di documento)
document.createDocumentFragment(elem);
pr (prototipo)
ClassName.prototype.methodName = function(arguments) {
// body...
}
iife (espressione di funzione chiamata 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 utilizzare sul repository github (e sulle pagine dei pacchetti).
Toolkit ES2015
ES2015 (noto anche come ES6) è fantastico e, con le cose più incredibili, c'è un pacchetto di snippet da abbinare.
Per utilizzare questo pacchetto e i relativi snippet, assicurati di installare Babel tramite NPM.
npm install -g babel
Prendi nota anche della maiuscola all'inizio di alcuni dei codici abbreviati.
Promessa
Promise((resolve, reject) => {
});
classe
class Classname extends AnotherClass {
constructor(args) {
// code
}
// methods
}
oggetto
var obj = {
__proto__: theProtoObj,
handler,
toString() {
return "object";
}
}
Per l'elenco completo degli snippet supportati, consulta la pagina di controllo del pacchetto Sublime.
Purtroppo questo pacchetto non è disponibile per Atom. L'equivalente più simile sembra essere questo pacchetto denominato "es6-javascript".
Pacchetto di componenti web e polimero
Riduci il tuo impegno nella scrittura di boilerplate per Polymer con gli straordinari snippet Polymer e Web Componente di Mr Dodsons.
ciao (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 di reazione
Infine, c'è un pacchetto adatto anche a te per i fan dei React. Distribuisci componenti e codice scritto comunemente con questi snippet.
rcc (scheletro dei componenti della classe)
var React = require('react');
var PropTypes = React.PropTypes;
var = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = ;
scu (dovComponenteUpdate)
shouldComponentUpdate: function(nextProps, nextState) {
},
props
this.props.
state
this.state.
Pacchetti MOAR
Esistono tantissimi altri pacchetti che offrono snippet per vari framework, quindi se ti capita spesso di scrivere le stesse porzioni di codice, è probabile che qualcuno abbia scritto un pacchetto per aiutarti a fare qualcosa del passato, ti basta eseguire una ricerca nel pacchetto di gestione per il tuo editor (Sublime | Atom).