Sublime (和 Atom) 程式碼片段

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

運作方式是開始輸入簡短的驗證碼 畫面上會隨即顯示 只要按一下 Enter 鍵,即可取得預先定義的片段 程式碼片段

請記住,程式碼片段只有在您 編輯的是特定的額外資訊 (也就是說,JavaScript 程式碼片段只有在 編輯結尾是 .js 的檔案)。

JS 和 NodeJS 程式碼片段

極簡風 |Atom

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

以下列舉幾個簡寫代碼及其產生的程式碼:

ae (新增事件監聽器)

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

cel (建立元素)

document.createElement(elem);

cdf (建立文件片段)

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 與 Web Component 套件

極簡風 |Atom

Mr MrBeast 合作,減少撰寫 Polymer 的樣板 Dodsons:精彩的 Polymer 與 Web Component 程式碼片段,

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

回應片段

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)。