Đoạn trích tuyệt vời (và Atom)

Đoạn mã là các đoạn có thể sử dụng lại mã bạn có thể dễ dàng và nhanh chóng thả vào trình chỉnh sửa văn bản.

Cách thức hoạt động của tính năng này là bạn bắt đầu nhập một đoạn mã viết tay ngắn, một cửa sổ bật lên sẽ xuất hiện và bạn chỉ cần nhấn enter cho đoạn mã bạn muốn và bạn sẽ nhận được đoạn mã đó.

Điều duy nhất cần lưu ý là đoạn mã chỉ có thể hoạt động khi tệp bạn đang chỉnh sửa có phần mở rộng cụ thể (tức là đoạn mã JavaScript sẽ chỉ hoạt động khi chỉnh sửa tệp kết thúc bằng .js).

Đoạn mã JS và NodeJS

Siêu việt | Nguyên tử

Đoạn mã JavaScript và NodeJS gói của Zeno Rocha là một gói tuyệt vời gồm các đoạn trích đơn giản cho phép bạn nhanh chóng viết ra JavaScript thông dụng.

Dưới đây là một số ví dụ về mã viết tắt và mã tạo ra:

ae (Thêm trình xử lý sự kiện)

document.addEventListener('event', function(e) {  
 // body...  
});

cel (Tạo phần tử)

document.createElement(elem);

cdf (Tạo mảnh tài liệu)

document.createDocumentFragment(elem);

pr (Nguyên mẫu)

ClassName.prototype.methodName = function(arguments) {  
 // body...  
}

iife (Biểu thức hàm được gọi ngay lập tức)

(function(window, document, undefined) {  
 // body...  
})(window, document);

Đây là bài đăng của Ben Alman trên của iife, chỉ dành cho Matt.

Zeno có danh sách đầy đủ các lệnh mà bạn có thể sử dụng trên github repo (và gói) trang).

Bộ công cụ ES2015

Siêu việt

ES2015 (còn gọi là ES6) thật tuyệt vời và với hầu hết những điều tuyệt vời nhất, sẽ có một đoạn mã đi kèm với nó.

Để dùng gói này và các đoạn mã của gói này, hãy nhớ cài đặt Babel thông qua TLD.

npm install -g babel

Ngoài ra, hãy lưu ý đến chữ viết hoa ở đầu một số mã viết tắt.

Lời hứa

Promise((resolve, reject) => {

});

lớp

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

  // methods
}

đối tượng

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

Để xem danh sách đầy đủ các đoạn trích được hỗ trợ, hãy xem gói Sublime trang điều khiển.

Rất tiếc, gói này không có sẵn cho Atom. Kết quả tương đương gần nhất có vẻ như là gói có tiêu đề "es6-javascript".

Gói thành phần web và polymer

Siêu việt | Nguyên tử

Dễ dàng viết mã nguyên mẫu cho Polymer nhờ Mr Dodsons các đoạn mã Polymer và Thành phần web tuyệt vời.

xin chào (Nhập HTML)

<link rel="import" href="bower_components//.html">

pe (Nguyên tố polymer)

<dom-module id="">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>

  </template>
  <script>
    Polymer({
      is: ''
    });
  </script>
</dom-module>

Đoạn video thể hiện cảm xúc

Siêu việt | Nguyên tử

Cuối cùng, đối với những người hâm mộ React, cũng có một gói dành cho bạn. Giàn giáo các thành phần và mã thường được viết bằng các đoạn mã này.

rcc (Khung thành phần lớp)

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

var  = React.createClass({

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

});

module.exports = ;

scu (shouldComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

đồ hoá trang

this.props.

tiểu bang

this.state.

Gói MOAR

Có rất nhiều gói khác cung cấp các đoạn mã cho các khung, vì vậy, nếu bạn thấy mình đang viết cùng một đoạn mã rất có thể ai đó đã viết một gói để biến việc đó thành trước đây, bạn chỉ cần tìm kiếm trong gói quản lý gói cho trình chỉnh sửa của mình (Tuyệt vời | atom).