קטעי טקסט עיליים (ו-Atom)

קטעי המידע הם מקטעי נתונים לשימוש חוזר את הקוד אפשר לשחרר במהירות ובקלות את עורך הטקסט שלכם.

בדרך כלל, מתחילים להקליד קוד קצר, מופיע חלון קופץ עליך פשוט להקיש על Enter עבור קטע הקוד הרצוי, ולקבל של מקטע הקוד.

הדבר היחיד שכדאי לזכור הוא שקטעי קוד יכולים לפעול רק כאשר הקובץ לעריכה יש תוסף ספציפי (כלומר, קטעי קוד של JavaScript יפעלו רק כשעורכים קובץ שמסתיים ב- .js).

קטעי קוד של JS ו-NodeJS

שממים | עדכון Atom

קטעי קוד של JavaScript ו-NodeJS חבילה מאת Zeno Rocha היא חבילה נהדרת של קטעי טקסט פשוטים שמאפשרים לכתוב במהירות קוד 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 מאגר (וחבילה ).

ערכת הכלים של ES2015

שממים

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'

חבילת פולימר ורכיבי אינטרנט

שממים | עדכון Atom

מפחיתים את המאמץ על הכנת תבניות בסיס לפולימר עם Mr Dodsons קטעי קוד מדהימים של פולימר ורכיבי אינטרנט.

היי (ייבוא 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>

קטעי תגובה

שקוף | עדכון Atom

לסיום, יש חבילה שמתאימה למעריצים של React. פיגום את הרכיבים וקוד שנכתב לעיתים קרובות באמצעות קטעי הקוד האלה.

rcc (שלד רכיב ברמה)

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

var  = React.createClass({

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

});

module.exports = ;

scu (EligibleComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

אביזרים

this.props.

הסמוי הסופי

this.state.

חבילות MOAR

יש המון חבילות אחרות שמציעות קטעי טקסט של כך שאם אתם כותבים את אותם קטעי קוד כנראה שמישהו כתב חבילה שעוזרת להפוך את זה קודם, פשוט מבצעים חיפוש במנהל החבילות. (Sublime | Atom).