Süblime (ve Atom) Snippet'ler

Snippet'ler yeniden kullanılabilir kod'u hızlı ve kolay bir şekilde metin düzenleyicinize gidebilirsiniz.

İşleyiş şekli şöyledir: Kısa bir el kodu yazmaya başlarsınız. Ardından, bir pop-up istediğiniz snippet için Enter tuşuna basmanız yeterlidir. Önceden tanımlanmış bir kod parçasını oluşturur.

Aklınızda bulundurmanız gereken tek şey, snippet'lerin yalnızca belirli bir uzantıya sahipse (ör. JavaScript snippet'leri yalnızca .js ile biten bir dosyayı düzenlerken).

JS ve NodeJS Snippet'leri

Muhteşem | Atom

JavaScript ve NodeJS Snippet'leri paket hazırlayan: Zeno Rocha, mükemmel bir basit snippet paketidir yaygın JavaScript kodlarını hızlıca yazmanıza olanak tanır.

Aşağıda, bazı steno kod örnekleri ve bunların ürettikleri kod verilmiştir:

ae (Etkinlik İşleyici ekle)

document.addEventListener('event', function(e) {  
 // body...  
});

cel (Öğe Oluştur)

document.createElement(elem);

cdf (Belge Parçası Oluştur)

document.createDocumentFragment(elem);

pr (Prototip)

ClassName.prototype.methodName = function(arguments) {  
 // body...  
}

iife (Hemen çağrılan işlev ifadesi)

(function(window, document, undefined) {  
 // body...  
})(window, document);

Ben Alman'ın iife'ın, için çok heyecanlıyım.

Zeno, github'da kullanabileceğiniz komutların tam listesini sunar. depo (ve paket sayfalar).

ES2015 Araç Seti

Muhteşem

ES2015 (diğer adıyla ES6) muhteşem bir şey. Üstelik, harika özelliklerin yanı sıra bir pakettir.

Bu paketi ve snippet'lerini kullanmak için Babel ile NPM arasında.

npm install -g babel

Bazı kısaltmaların başındaki büyük harfleri de not edin.

Söz

Promise((resolve, reject) => {

});

sınıf

class Classname extends AnotherClass {
  constructor(args) {
    // code
  }

  // methods
}

nesne

var obj = {
  __proto__: theProtoObj,
  handler,
  toString() {
    return "object";
  }
}

Desteklenen snippet'lerin tam listesi için Sublime paketine bakın. kontrol sayfasına gidin.

Maalesef bu paket Atom'da sunulmamaktadır. En yakın eşdeğer bu paketin adı, "es6-javascript".

Polimer ve Web Bileşeni Paketi

Muhteşem | Atom

Mr Mr. Dodsons, harika Polimer ve Web Bileşeni snippet'leri içerir.

hi (HTML İçe Aktarma)

<link rel="import" href="bower_components//.html">

pe (Polimer Öğe)

<dom-module id="">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>

  </template>
  <script>
    Polymer({
      is: ''
    });
  </script>
</dom-module>

Tepki snippet'leri

Muhteşem | Atom

Son olarak, React hayranları için hazırladığımız pakete göz atın. İskele ve bu snippet'lerle birlikte yaygın olarak yazılan kodları koordine etmenizi sağlar.

rcc (Sınıf Bileşeni İskeleti)

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.

durum

this.state.

MOAR Paketleri

Farklı öğeler için snippet'ler sunan çok sayıda başka paket vardır çerçeveleri kullanabilirsiniz. Bu nedenle, aynı kod parçalarını birileri, paketin sizin için son derece önemli olmasının yapmak istiyorsanız, düzenleyiciniz için paket yönetiminde bir arama (Sublime | Atom).