스니펫은 텍스트 편집기에 쉽고 빠르게 배치할 수 있는 재사용 가능한 코드 청크입니다.
짧은 코드를 입력하기 시작하면 팝업이 표시됩니다. 그런 다음 원하는 스니펫에서 Enter 키를 누르기만 하면 사전 정의된 코드 청크가 생성됩니다.
한 가지 주의할 점은 스니펫은 수정 중인 파일에 특정 확장자가 있는 경우에만 작동할 수 있다는 것입니다 (자바스크립트 스니펫은 .js로 끝나는 파일을 수정할 때만 작동함).
JS 및 NodeJS 스니펫
Zeno Rocha의 자바스크립트 및 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);
벤 알만의 iife 게시물입니다. 맷을 위한 댓글입니다.
Zeno의 github 저장소 및 패키지 페이지에서 사용할 수 있는 명령어의 전체 목록을 확인할 수 있습니다.
ES2015 툴킷
ES2015 (ES6이라고도 함)는 굉장히 훌륭하며, 가장 멋진 기능들을 위해 스니펫 패키지가 있습니다.
이 패키지와 스니펫을 사용하려면 NPM을 통해 Babel을 설치해야 합니다.
npm 설치 -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'인 것으로 보입니다.
폴리머 및 웹 구성요소 패키지
Mr Dodsons의 멋진 Polymer 및 웹 구성요소 스니펫을 사용하면 Polymer용 상용구를 작성하는 데 드는 수고를 줄일 수 있습니다.
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>
리액션 스니펫
마지막으로 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) {
},
props
this.props.
state
this.state.
MOAR 패키지
서로 다른 프레임워크의 스니펫을 제공하는 수많은 패키지가 있으므로 동일한 코드를 반복해서 작성하는 경우 누군가가 과거의 내용으로 만드는 데 도움이 되는 패키지를 작성했을 수 있습니다. 편집기의 패키지 관리(Sublime | Atom)에서 검색하면 됩니다.