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

Đoạn mã là các đoạn mã 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 chúng là bạn bắt đầu nhập một đoạn mã 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ã mình muốn là sẽ nhận được một đoạn mã được xác định trước.

Lưu ý duy nhất 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 chỉ hoạt động khi chỉnh sửa tệp kết thúc bằng .js).

Đoạn mã JS và NodeJS

Sublime | 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 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ã này 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)

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

Đây là bài đăng của Ben Alman trên iife's, 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 kho lưu trữ github (và các trang gói).

Bộ công cụ ES2015

Thăng hoa

ES2015 (còn gọi là ES6) rất tuyệt vời và với những tính năng tuyệt vời nhất, có một gói đoạn mã đi kèm.

Để sử dụng gói này và các đoạn mã, hãy nhớ cài đặt Babel thông qua MAP.

npm cài đặt -g babel

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

Hứa hẹn

Promise((resolve, reject) => {

});

lớp

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

  // methods
}

đối tượng

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

Để biết danh sách đầy đủ các đoạn mã được hỗ trợ, hãy xem trang kiểm soát gói Sublime.

Rất tiếc, gói này chưa được cung cấp cho Atom. Gói tương đương gần nhất có vẻ là gói có tiêu đề "es6-javascript" này.

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

Sublime | Atom

Bạn có thể dễ dàng 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.

xin chào (Nhập HTML)

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

pe (Phần tử polymer)

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

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

Đoạn mã 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 các bạn. Tạo các thành phần và mã thường 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) {

},

props

this.props.

state

this.state.

Gói MOAR

Có rất nhiều gói khác cung cấp các đoạn mã cho nhiều khung khác nhau. Vì vậy, nếu bạn thấy mình viết nhiều đoạn mã giống nhau, có thể ai đó đã viết một gói để giúp việc đó trở thành chuyện trước đây, bạn chỉ cần thực hiện tìm kiếm trong trình quản lý gói cho trình chỉnh sửa của bạn (Sublime | Atom).