المقتطفات الفرعية (و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's، فقط لمات.

لدى 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".

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

Sublime | خلاصة Atom

قلل من جهدك في كتابة النص النموذجي للبوليمر مع السيد مقتطفات رائعة من البوليمر ومكوّنات الويب من Dodsons

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>

مقتطفات التفاعل

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)