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

ตัวอย่างคือชิ้นส่วนที่นำมาใช้ใหม่ได้ code ที่ ในเครื่องมือแก้ไขข้อความได้ง่ายๆ และรวดเร็ว

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

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

ตัวอย่างข้อมูล JS และ NodeJS

ซับไลม์ | 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 ไว้สำหรับ Matt โดยเฉพาะ

Zeno มีรายการคำสั่งทั้งหมดที่คุณใช้ได้ใน github repo (และแพ็กเกจ )

ชุดเครื่องมือ ES2015

Sublime

ES2015 (หรือที่เรียกว่า ES6) นั้นยอดเยี่ยม และสิ่งที่ยอดเยี่ยมที่สุดคือมีแพ็กเกจข้อมูลโค้ดที่ใช้ร่วมกันได้

หากต้องการใช้แพ็กเกจนี้และข้อมูลโค้ด คุณจะต้องติดตั้ง Babel ผ่าน NPM

npm ติดตั้ง -g babel

นอกจากนี้ ให้คำนึงถึงตัวพิมพ์ใหญ่ที่ขึ้นต้นรหัสชวเลขบางส่วนด้วย

Promise

Promise((resolve, reject) => {

});

คลาส

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

  // methods
}

ออบเจ็กต์

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

ดูรายการข้อมูลโค้ดที่รองรับทั้งหมดได้ที่หน้าควบคุมแพ็กเกจ Sublime

ขออภัย แพ็กเกจนี้ไม่มีให้บริการสำหรับ Atom ที่ใกล้เคียงที่สุด ดูเหมือนจะเป็นแพ็กเกจนี้ชื่อ 'es6-javascript'

แพ็กเกจ Polymer และ Web Component

ซับไลม์ | Atom

ประหยัดเวลาในการเขียนข้อมูลโค้ดสำหรับ Polymer ด้วยข้อมูลโค้ด Polymer และ Web Component ที่ยอดเยี่ยมของ 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>

ตัวอย่างรีแอ็กชัน

Sublime | Atom

สุดท้ายนี้ เรามีแพ็กเกจสำหรับแฟนๆ React ด้วย นั่งร้าน คอมโพเนนต์ต่างๆ และโค้ดที่เขียนโดยทั่วไปด้วยข้อมูลโค้ดเหล่านี้

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

},

พร็อพ

this.props.

รัฐ

this.state.

MOAR Packages

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