Sublime (和 Atom) 程式碼片段

程式碼片段是可重複使用的 程式碼 可以輕鬆快速地嵌入文字編輯器

運作方式是您開始輸入簡短程式碼，系統就會顯示彈出式視窗，只要按下所需程式碼片段的 Enter 鍵，即可取得預先定義的程式碼片段。

唯一要注意的是，程式碼片段可能只會在您編輯的檔案具有特定副檔名時才會運作 (也就是說，JavaScript 程式碼片段只會在編輯以 .js 結尾的檔案時運作)。

JS 和 NodeJS 程式碼片段

極簡風 |Atom

JavaScript 和 NodeJS 程式碼片段 套件 由 Zeno Rocha 製作，整個過程相當簡單 可讓您快速撰寫常見的 JavaScript。

以下是一些簡寫代碼和產生的程式碼範例：

ae (新增事件監聽器)

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

cel (Create Element)

document.createElement(elem);

cdf (Create Document Fragment)

document.createDocumentFragment(elem);

pr (原型設計)

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

iife (立即叫用函式運算式)

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

這是 Ben Alman 撰寫的貼文 iife's 我們專為 Matt 設計了

Zeno 提供可在 GitHub 存放區 (和套件頁面) 使用的完整指令清單。

ES2015 工具包

極簡風

ES2015 (亦稱為 ES6) 令人驚豔，它提供許多卓越的功能 與它搭配使用

如要使用這個套件和程式碼片段，請務必安裝 Babel 至 NPM。

npm install -g babel

另請注意部分簡寫代碼開頭的首字母大寫。

Promise

Promise((resolve, reject) => {

});

類別

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

  // methods
}

物件

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

如需支援的程式碼片段完整清單，請參閱 Sublime 套件控制頁面。

很抱歉，這個套件不適用於 Atom。最接近的等效項目似乎是這個名為「es6-javascript」的套件。

Polymer 和網路元件套件

極簡風 |Atom

使用 Mr. Dodsons 的優異 Polymer 和 Web 元件程式碼片段，減少為 Polymer 編寫固定程式碼的負擔。

hi (HTML Import)

<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

最後，我們也為 React 粉絲準備了套件。鷹架型 透過這些程式碼片段，列出元件和一般編寫程式碼

rcc (類別元件骨架)

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 套件

這裡有許多其他的套裝方案，每一種都提供不同的 因此如果您發現自己編寫相同的程式碼 也許有人寫了整套服務檔案 在套件管理套件中，在編輯器中進行搜尋即可 (Sublime | Atom)。