Süblime (ve Atom) Snippet'ler

Snippet'ler yeniden kullanılabilir 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.

Tek dikkat etmeniz gereken nokta, snippet'lerin yalnızca düzenlediğiniz dosyanın belirli bir uzantıya sahip olduğunda çalışabileceğidir (ör. JavaScript snippet'leri yalnızca .js ile biten bir dosyayı düzenlerken çalışır).

JS ve NodeJS Snippet'leri

Sublime | Atom

Zeno Rocha tarafından hazırlanan JavaScript ve NodeJS snippet'leri paketi, yaygın JavaScript'i hızlıca yazmanıza olanak tanıyan basit snippet'lerden oluşan mükemmel bir pakettir.

Aşağıda kısa kodlara ve bu kodların oluşturduğu koda bazı örnekler verilmiştir:

ae (Etkinlik İşleyici ekle)

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

cel (Öğe Oluştur)

document.createElement(elem);

cdf (Create Document Fragment)

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 NPM üzerinden Babel'i yüklediğinizden emin olun.

npm install -g babel

Ayrıca, kısa kodların bazılarının başında büyük harf olduğunu unutmayın.

Promise

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 paket kontrol sayfasına göz atın.

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

Polimer ve Web Bileşeni Paketi

Sublime | 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 Öğesi)

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

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

Tepki snippet'leri

Sublime | 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 (Class Component Skeleton)

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 bir paket yazmış olabilir. Böyle bir durumda, yapmak istiyorsanız, düzenleyiciniz için paket yönetiminde bir arama (Sublime | Atom).