Sublime (и Atom) фрагменты

Фрагменты — это фрагменты кода, которые можно повторно использовать, и которые можно легко и быстро добавить в текстовый редактор.

Они работают следующим образом: вы начинаете вводить короткий код, появляется всплывающее окно и просто нажимаете Enter для нужного фрагмента кода, и вы получаете заранее определенный фрагмент кода.

Единственное, о чем следует помнить, это то, что фрагменты могут работать только в том случае, если файл, который вы редактируете, имеет определенное расширение (т. е. фрагменты JavaScript будут работать только при редактировании файла, заканчивающегося на .js).

Фрагменты JS и NodeJS

Возвышенное | Атом

Пакет JavaScript и NodeJS Snippets от Zeno Rocha — это отличный пакет простых фрагментов, которые позволяют быстро писать обычный JavaScript.

Ниже приведены несколько примеров сокращенных кодов и кода, который они создают:

ae (добавить прослушиватель событий)

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

cel (Создать элемент)

document.createElement(elem);

cdf (создать фрагмент документа)

document.createDocumentFragment(elem);

пр (Прототип)

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

iife (выражение функции, вызываемое немедленно)

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

Вот сообщение Бена Алмана на сайте iife , специально для Мэтта.

У Zeno есть полный список команд, которые вы можете использовать в репозитории github (и на страницах пакетов).

Инструментарий ES2015

возвышенный

ES2015 (он же ES6) великолепен, и для большинства замечательных вещей к нему есть пакет фрагментов.

Чтобы использовать этот пакет и его фрагменты, обязательно установите Babel через NPM.

npm установить -g бабель

Также обратите внимание на заглавную букву в начале некоторых сокращенных кодов.

Обещать

Promise((resolve, reject) => {

});

сорт

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

  // methods
}

объект

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

Полный список поддерживаемых фрагментов см. на странице управления пакетами Sublime .

К сожалению, этот пакет недоступен для Atom. Ближайшим эквивалентом является пакет под названием «es6-javascript» .

Пакет полимеров и веб-компонентов

Возвышенное | Атом

Сократите свои усилия по написанию шаблона для Polymer с помощью замечательных фрагментов кода 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>

Реагировать на фрагменты

Возвышенное | Атом

Наконец, для поклонников React есть пакет и для вас. С помощью этих фрагментов создавайте компоненты и обычно написанный код.

rcc (скелет компонентов класса)

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

var  = React.createClass({

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

});

module.exports = ;

scu (следует ComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

реквизит

this.props.

состояние

this.state.

Пакеты МОАР

Существует множество других пакетов, которые предлагают фрагменты кода для разных фреймворков, поэтому, если вы обнаружите, что пишете одни и те же фрагменты кода снова и снова, скорее всего, кто-то написал пакет, который поможет оставить это в прошлом, просто выполните поиск. в пакете управляйте вашим редактором ( Sublime | Atom ).