ตัวอย่าง 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

ซับไลม์

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

ลดความพยายามในการเขียนต้นแบบสำหรับ Polymer ไปกับ Mr Dodsons ตัวอย่าง Polymer และ Web Component ที่ยอดเยี่ยม

หวัดดี (นำเข้า 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

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

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

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