Fragmenty to fragmenty do wielokrotnego użytku kod, który możesz łatwo i szybko przenieść się do edytora tekstu.
Działa to tak: zaczynasz wpisywać krótki kod, a potem pojawi się wyskakujące okienko, po prostu naciśnij Enter, by dodać interesujący Cię fragment, a otrzymasz wstępnie zdefiniowany fragmentu kodu.
Pamiętaj, że fragmenty kodu mogą działać tylko wtedy, gdy edytowany plik ma określone rozszerzenie (np. fragmenty kodu JavaScript będą działać tylko wtedy, gdy edytujesz plik kończący się na .js).
fragmenty kodu JS i NodeJS;
Pakiet JavaScript and NodeJS Snippets autorstwa Zeno Rocha to świetny pakiet prostych fragmentów kodu, które umożliwiają szybkie pisanie typowego kodu JavaScript.
Oto kilka przykładów kodów skrótów i kodu, który one generują:
ae (dodaj detektor zdarzeń)
document.addEventListener('event', function(e) {
// body...
});
cel (Create Element)
document.createElement(elem);
cdf (Create Document Fragment)
document.createDocumentFragment(elem);
pr (prototyp)
ClassName.prototype.methodName = function(arguments) {
// body...
}
iife (wyrażenie funkcji wywoływanej natychmiastowo)
(function(window, document, undefined) {
// body...
})(window, document);
Oto post Bena Almana na temat: Iife's, tylko Matta.
Zeno zawiera pełną listę poleceń, których możesz używać w repozytorium GitHub (oraz na stronach pakietu).
Zestaw narzędzi ES2015
ES2015 (czyli ES6) jest niesamowity, a jak w przypadku większości niesamowitych rzeczy, ma też pakiet fragmentów kodu.
Aby korzystać z tego pakietu i jego fragmentów, zainstaluj Babel za pomocą NPM.
npm install -g babel
Zwróć też uwagę na stolicę na początku niektórych skróconych kodów.
Promise
Promise((resolve, reject) => {
});
klasa
class Classname extends AnotherClass {
constructor(args) {
// code
}
// methods
}
Obiekt
var obj = {
__proto__: theProtoObj,
handler,
toString() {
return "object";
}
}
Pełną listę obsługiwanych fragmentów znajdziesz w pakiecie Sublime stronie kontrolnej.
Ten pakiet nie jest dostępny w przypadku Atom. Najbliższy odpowiednik Wygląda na to, że ten pakiet ma nazwę 'es6-javascript'.
Pakiet Polymer i Web Component
Oszczędź sobie pracy przy pisaniu szablonów dla Polymera dzięki niesamowitym fragmentom kodu Mr.Dodsons dla komponentów Polymera i komponentów internetowych.
hi (import HTML)
<link rel="import" href="bower_components//.html">
pe (element polimerowy)
<dom-module id="">
<style>
:host {
display: block;
}
</style>
<template>
</template>
<script>
Polymer({
is: ''
});
</script>
</dom-module>
Fragmenty reakcji
Na koniec mamy pakiet dla fanów React. Ruszt i zwykle napisany kod za ich pomocą.
rcc (szkielet klasowy)
var React = require('react');
var PropTypes = React.PropTypes;
var = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = ;
scu (powinienSkomponentu aktualizacji)
shouldComponentUpdate: function(nextProps, nextState) {
},
rekwizyty
this.props.
stan
this.state.
Pakiety MOAR
Jest mnóstwo innych pakietów, które oferują fragmenty kodu dla różnych jeśli w trakcie pisania tych samych fragmentów kodu istnieje ryzyko, że ktoś napisał pakiet, dzięki któremu w przeszłości, wystarczy wyszukać edytor pakietu w narzędziu (Sublime | Atom).