ตัวอย่าง Sublime (และ Atom)

ตัวอย่างคือส่วนของโค้ดที่ใช้ซ้ำได้ซึ่งคุณจะใส่ลงในเครื่องมือแก้ไขข้อความได้อย่างง่ายดายและรวดเร็ว

วิธีการทํางานคือคุณเริ่มพิมพ์โค้ดสั้นๆ ป๊อปอัปจะปรากฏขึ้นและคุณเพียงแค่กด Enter สําหรับข้อมูลโค้ดที่ต้องการ คุณก็จะเห็นชุดโค้ดที่กําหนดไว้ล่วงหน้า

ข้อเดียวที่จำได้ก็คือข้อมูลโค้ดจะทำงานได้เมื่อไฟล์ที่คุณกำลังแก้ไขมีส่วนขยายเฉพาะเท่านั้น (เช่น ข้อมูลโค้ด JavaScript จะทำงานเมื่อแก้ไขไฟล์ที่ลงท้ายด้วย .js เท่านั้น)

ข้อมูลโค้ด JS และ NodeJS

Sublime | Atom

แพ็กเกจข้อมูลโค้ด JavaScript และ NodeJS ของ Zeno Rocha เป็นแพ็กเกจข้อมูลโค้ดแบบง่ายที่ยอดเยี่ยม ซึ่งช่วยให้คุณเขียน JavaScript ทั่วไปได้อย่างรวดเร็ว

ด้านล่างนี้คือตัวอย่างบางส่วนของโค้ดชวเลขและโค้ดที่สร้างขึ้น

ae (เพิ่ม Listener เหตุการณ์)

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);

นี่คือโพสต์ของ Ben Alman ใน iife's สำหรับ Matt โดยเฉพาะ

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"

แพ็กเกจคอมโพเนนต์โพลิเมอร์และเว็บ

Sublime | Atom

ไม่ต้องเหนื่อยกับการเขียนต้นแบบสำหรับ Polymer ด้วยข้อมูลโค้ด Polymer และ Web Component สุดเจ๋งของ Mr 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 (instructionsComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

props

this.props.

state

this.state.

แพ็กเกจ MOAR

มีแพ็กเกจอื่นๆ มากมายที่เสนอตัวอย่างสำหรับเฟรมที่ต่างกัน ดังนั้นหากคุณพบว่าตัวเองเขียนโค้ดเดิมซ้ำๆ อาจมีคนเขียนแพ็กเกจที่เคยใช้ เพียงทำการค้นหาในโปรแกรมจัดการแพ็กเกจสำหรับเครื่องมือแก้ไขของคุณ (Sublime | Atom)