Wyrafinowane (i Atom) fragmenty

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.

Jedyne, o czym trzeba pamiętać, jest to, że fragmenty mogą działać tylko wtedy, mają określone rozszerzenie (np. fragmenty kodu JavaScript działają tylko podczas edytowania pliku z rozszerzeniem .js).

Fragmenty JS i NodeJS

Wyrafinowanie | Atom

Fragmenty JavaScript i NodeJS pakiet autorstwa Zeno Rocha to świetny pakiet prostych fragmentów które pozwalają szybko pisać typowy JavaScript.

Poniżej znajduje się kilka przykładów skróconych kodów i generowanych przez nie kodów:

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 (natychmiast wywoływane wyrażenie funkcji)

(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ć na GitHubie repo (i pakietu) ).

Zestaw narzędzi ES2015

Wyrafinowanie

ES2015 (inaczej ES6) jest świetny, a najlepsze jest jego fragment na każdą okazję.

Aby korzystać z tego pakietu i jego fragmentów kodu, zainstaluj Babel przez NPM.

npm install -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 w pakiecie Sublime stronie kontrolnej.

Ten pakiet nie jest dostępny dla Atom. Najbliższy odpowiednik Wygląda na to, że ten pakiet ma nazwę 'es6-javascript'.

Pakiet komponentów polimerowych i internetowych

Wyrafinowanie | Atom

Ogranicz się do pisania „schematu” na potrzeby Polymer, używając Mr. Dodsons, czyli fragmentów kodu Polymer i Web Komponent.

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

Wyrafinowanie | Atom

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 (powinienKomponentUpdate)

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).