Fragmenty to fragmenty kodu wielokrotnego użytku, które można łatwo i szybko wstawiać do edytora tekstu.
Polega to na tym, że zaczniesz wpisywać krótki kod dłoni, pojawi się wyskakujące okienko. Wystarczy nacisnąć Enter, aby wybrać fragment kodu. Uzyskasz taki fragment kodu.
Warto pamiętać, że fragmenty kodu mogą działać tylko wtedy, gdy edytowany plik ma określone rozszerzenie (np. fragmenty kodu JavaScript działają tylko z plikami z rozszerzeniem .js).
Fragmenty kodu JS i NodeJS
Pakiet fragmentów JavaScript i NodeJS autorstwa Zeno Rocha to świetny pakiet prostych fragmentów, które umożliwiają szybkie pisanie popularnych skryptów JavaScript.
Poniżej znajdziesz kilka przykładów skróconych kodów i ich kodu:
ae (dodaj detektor zdarzeń)
document.addEventListener('event', function(e) {
// body...
});
cel (utwórz element)
document.createElement(elem);
cdf (utwórz fragment dokumentu)
document.createDocumentFragment(elem);
pr (prototyp)
ClassName.prototype.methodName = function(arguments) {
// body...
}
iife (wyrażenie funkcji wywoływanej od razu)
(function(window, document, undefined) {
// body...
})(window, document);
Oto post Bena Almana w poście na kanale iife’s przeznaczony dla Matta.
Zeno zawiera pełną listę poleceń, których możesz używać w repozytorium Github (i stronach pakietu).
Pakiet narzędzi ES2015
ES2015 (znana też jako ES6) jest świetna. Możesz dołączyć do niej specjalny pakiet z fragmentami wiadomości.
Aby korzystać z tego pakietu i jego fragmentów, zainstaluj Babel przez NPM.
npm instalacja -g babel
Zwróć też uwagę na stolicę na początku niektórych skróconych kodów.
Obietnica
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 na stronie sterowania pakietem sublime.
Ten pakiet nie jest dostępny dla Atom. Najbliższym odpowiednikiem wydaje się pakiet o nazwie „es6-javascript”.
Pakiet komponentów Polymer i Web
Nie musisz już pisać stałych elementów na potrzeby Polymer dzięki świetnym fragmentom kodu Polymer i komponentów internetowych Mr Dodsons.
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 coś dla fanów React. Za ich pomocą możesz wyodrębnić komponenty i powszechnie pisany kod.
rcc (szkielet klasy)
var React = require('react');
var PropTypes = React.PropTypes;
var = React.createClass({
render: function() {
return (
<div />
);
}
});
module.exports = ;
scu (należySkomponentu aktualizacji)
shouldComponentUpdate: function(nextProps, nextState) {
},
props
this.props.
state
this.state.
Pakiety MOAR
Istnieje mnóstwo innych pakietów oferujących fragmenty kodu dla różnych ram. Jeśli więc piszesz ciągle te same fragmenty kodu, być może ktoś napisał pakiet, aby to pozbyć się tego problemu. Wystarczy, że wyszukasz w pakiecie swój edytor (Sublime | Atom).