Đ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 hoạt động của các đoạn mã này là bạn bắt đầu nhập mã viết tắt, 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, sau đó bạn sẽ nhận được một đoạn mã được xác định trước.

Đ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 | Atom

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

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

ae (Thêm trình nghe 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) rất tuyệt vời và với hầu hết các tính năng tuyệt vời, bạn sẽ có một gói đoạn mã đi kèm.

Để 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.

Promise

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 dùng được cho Atom. Gói tương đương gần nhất có vẻ là gói có tên là "es6-javascript".

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

Siêu việt | Atom

Giảm bớt công sức viết mã nguyên mẫu cho Polymer bằng các đoạn mã Polymer và Thành phần web tuyệt vời của Mr Dodsons.

hi (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

Sublime | Atom

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. Tạo khung cho các thành phần và mã thường được viết bằng các đoạn mã này.

rcc (Bộ xương 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).