Snippets sind wiederverwendbare Codeblöcke, die Sie schnell und einfach in Ihren Texteditor einfügen können.
Sie beginnen damit, einen kurzen Code einzugeben, ein Pop-up-Fenster erscheint und Sie drücken einfach die Eingabetaste für das gewünschte Snippet, um einen vordefinierten Code-Chunk zu erhalten.
Das einzige Problem: Snippets funktionieren möglicherweise nur, wenn die von Ihnen bearbeitete Datei eine bestimmte Endung hat, d.h. JavaScript-Snippets funktionieren nur, wenn Sie eine Datei mit der Endung .js bearbeiten.
JS- und NodeJS-Snippets
Das Paket mit JavaScript- und NodeJS-Snippets von Zeno Rocha ist ein tolles Paket mit einfachen Snippets, mit denen sich gängiges JavaScript schnell schreiben lässt.
Im Folgenden finden Sie einige Beispiele für Kurzcodes und den damit generierten Code:
ae (Ereignis-Listener hinzufügen)
document.addEventListener('event', function(e) {
// body...
});
cel (Element erstellen)
document.createElement(elem);
cdf (Dokumentfragment erstellen)
document.createDocumentFragment(elem);
pr (Prototyp)
ClassName.prototype.methodName = function(arguments) {
// body...
}
iife (unmittelbar aufgerufener Funktionsausdruck)
(function(window, document, undefined) {
// body...
})(window, document);
Hier ist der Beitrag von Ben Alman über iifes, nur für Matt.
Zeno bietet eine vollständige Liste der Befehle, die Sie im GitHub-Repository und auf den Paketseiten verwenden können.
ES2015-Toolkit
ES2015 (ES6) ist genial. Zu den meisten tollen Dingen gibt es auch ein passendes Snippet-Paket.
Wenn Sie dieses Paket und seine Snippets verwenden möchten, müssen Sie Babel über NPM installieren.
npm install -g Babel
Beachten Sie auch die Großschreibung am Anfang einiger Kurzcodes.
Versprechen
Promise((resolve, reject) => {
});
Klasse
class Classname extends AnotherClass {
constructor(args) {
// code
}
// methods
}
Objekt
var obj = {
__proto__: theProtoObj,
handler,
toString() {
return "object";
}
}
Eine vollständige Liste der unterstützten Snippets finden Sie auf der Seite für die Steuerung des Sublime-Pakets.
Leider ist dieses Paket für Atom nicht verfügbar. Die nächste Entsprechung scheint dieses Paket mit dem Namen "es6-javascript' zu sein.
Polymer- und Webkomponenten-Paket
Mit Mr Dodsons genialen Polymer- und Webkomponenten-Snippets sparen Sie Zeit beim Schreiben von Textbausteinen für Polymer.
hi (HTML-Import)
<link rel="import" href="bower_components//.html">
pe (Polymerelement)
<dom-module id="">
<style>
:host {
display: block;
}
</style>
<template>
</template>
<script>
Polymer({
is: ''
});
</script>
</dom-module>
Snippets reagieren
Und zu guter Letzt: Für die React-Fans gibt es auch für dich ein passendes Paket. Bauen Sie mit diesen Snippets Komponenten und allgemein geschriebenen Code aus.
rcc (Klassenkomponentengerüst)
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.
MOAR-Pakete
Es gibt viele andere Pakete, die Snippets für verschiedene Frameworks bieten. Wenn Sie also immer wieder dieselben Codeteile schreiben, ist es sehr wahrscheinlich, dass jemand ein Paket geschrieben hat, um das zu ändern. Führen Sie einfach eine Suche in der Paketverwaltung für Ihren Editor durch (Sublime | Atom).