المقتطفات الفرعية (وAtom)

المقتطفات هي أجزاء قابلة لإعادة الاستخدام من الرمز التي يمكنك إسقاطها بسهولة وسرعة في محرِّر النصوص.

وطريقة عملها هي أن تبدأ بكتابة رمز اختصار، وسيظهر لك مربّع منبثق، وسيكون عليك ببساطة الضغط على مفتاح Enter للحصول على المقتطف الذي تريده، وستحصل على مقتطف رمز مُحدّد مسبقًا.

المشكلة الوحيدة المتاحة في الاعتبار هي أن المقتطفات قد تعمل فقط عندما يكون الملف للتعديل لها إضافة محددة (أي أن مقتطفات JavaScript لا تعمل إلا عند تعديل ملف ينتهي بـ js.).

مقتطفات JavaScript وNodeJS

Sublime | Atom

حزمة مقتطفات JavaScript وNodeJS التي أنشأها زينو روشا هي حزمة رائعة من المقتطفات البسيطة التي تتيح لك كتابة رموز JavaScript الشائعة بسرعة.

في ما يلي بعض الأمثلة على الرموز المختصرة والتعليمات البرمجية التي تنتجها:

ae (إضافة أداة معالجة الأحداث)

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

cel (إنشاء عنصر)

document.createElement(elem);

cdf (إنشاء جزء في المستند)

document.createDocumentFragment(elem);

pr (النموذج الأوّلي)

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

iife (تعبير دالة يتمّ استدعاؤها على الفور)

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

إليك مشاركة "بن ألمان" على iife، مخصّصة لـ "مات" فقط.

لدى Zeno قائمة كاملة بالأوامر التي يمكنك استخدامها على github repo (والحزمة ).

مجموعة أدوات ES2015

Sublime

ES2015 (المعروفة أيضًا باسم ES6) رائعة، وإليك مقتطفات رائعة تحتوي على أروعها حزمة لها.

لاستخدام هذه الحزمة ومقتطفاتها، احرص على تثبيت Babel من خلال NPM.

npm تثبيت -g babel

قم أيضًا بتدوين العاصمة في بداية بعض رموز الاختصارات.

وعد

Promise((resolve, reject) => {

});

صنف

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

  // methods
}

كائن

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

للحصول على قائمة كاملة بالمقتطفات المتوافقة، يُرجى الاطّلاع على صفحة التحكّم في حِزم Sublime.

هذه الحزمة غير متوفّرة لتنسيق Atom. أقرب مكافئ وكأنها هذه الحزمة بعنوان "es6-javascript".

حزمة مكونات الويب وPolymer

Sublime | Atom

يمكنك تقليل الجهد المبذول في كتابة النماذج الجاهزة لاستخدامها في Polymer باستخدام مقتطفات Mr Dodsons الرائعة لعناصر Polymer وWeb Component.

hi (استيراد HTML)

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

pe (عنصر بوليمر)

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

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

مقتطفات React

Sublime | Atom

أخيرًا، نقدّم لك حزمة مميّزة أيضًا بالنسبة إلى المعجبين في React. يمكنك استخدام هذه المقتطفات لإنشاء بنية أساسية للمكونات والرمز البرمجي المكتوب بشكل شائع.

rcc (هيكل عظمي لأجزاء الفئة)

var React = require('react');
var PropTypes = React.PropTypes;

var  = React.createClass({

  render: function() {
    return (
      <div />
    );
  }

});

module.exports = ;

scu (shouldComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

الأدوات

this.props.

الولاية

this.state.

حزم MOAR

هناك الكثير من الحِزم الأخرى التي تقدّم مقتطفات لإطارات عمل مختلفة، لذا إذا كنت تكتب أجزاء التعليمات البرمجية نفسها مراراً وتكرارًا، من المرجّح أن يكون أحد الأشخاص قد كتب حزمة للمساعدة في التوقف عن ذلك، ما عليك سوى إجراء بحث في أداة إدارة الحِزم الخاصة بالمحرِّر (Sublime | Atom).