程式碼片段是可重複使用的程式碼區塊，您可以輕鬆快速地推送至文字編輯器中。
這些方法的運作方式，是您開始輸入一小段程式碼，畫面上會出現彈出式視窗，您只要針對所需的程式碼片段按下 Enter 鍵，就能取得預先定義的程式碼區塊。
唯一需要特別留意的是，只有在您正在編輯的檔案具有特定副檔名時，程式碼片段才能正常運作 (也就是說，JavaScript 程式碼片段只有在編輯結尾是 .js 的檔案時才能運作)。
JS 和 NodeJS 程式碼片段
Zeno Rocha 的 JavaScript 和 NodeJS 程式碼片段套件是相當優秀的程式碼片段套件，可讓您快速編寫常見的 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);
Zeno 提供您可以在 GitHub 存放區 (和套件頁面) 上使用的指令完整清單。
ES2015 工具包
ES2015 (又稱 ES6) 非常出色，絕大多數令人驚豔，現在提供程式碼片段套件。
如要使用這個套件及其程式碼片段，請務必透過 NPM 安裝 Babel。
npm install -g babel
此外，請留意某些簡寫代碼開頭的大寫字母。
承諾
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 元件套件
有了 Dodsons 驚人的 Polymer 和網頁元件程式碼片段，您就能輕鬆為 Polymer 撰寫樣板。
嗨 (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 粉絲，這裡也提供豐富的套裝方案。Scaffold 輸出元件，以及通常透過這些程式碼片段編寫程式碼。
rcc (類別元件骨架)
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.
MOAR 套件
還有很多其他套件提供了不同架構的程式碼片段，因此如果您發現自己重複編寫了相同的程式碼，或許有人已編寫套件來協助您達成這一目的，只要在編輯器管理的套件中執行搜尋 (Sublime | Atom)。