Sublime (및 Atom) 스니펫

스니펫은 코드가 텍스트 편집기에 쉽고 빠르게 드롭할 수 있습니다.

짧은 코드를 입력하기 시작하면 팝업이 나타나 원하는 스니펫에 대해 Enter를 누르기만 하면 코드 청크에 불과합니다

한 가지 알아두어야 할 점은 스니펫이 특정 확장자가 있는 경우 (예: 자바스크립트 스니펫은 .js로 끝나는 파일을 수정할 때).

JS 및 NodeJS 스니펫

서브라임 | Atom

JavaScript 및 NodeJS 스니펫 패키지 Zeno Rocha의 간단한 스니펫 패키지는 를 사용하면 일반적인 자바스크립트를 빠르게 작성할 수 있습니다.

다음은 약식 코드와 생성되는 코드의 몇 가지 예입니다.

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's, Matt에게만 표시됩니다.

Zeno에 github repo (및 package) 페이지 참조).

ES2015 툴킷

서브라임

ES2015 (즉, ES6)는 그냥 설치할 것입니다.

이 패키지와 패키지의 스니펫을 사용하려면 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').

폴리머 및 웹 구성요소 패키지

서브라임 | Atom

Dodsons에서 멋진 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 스니펫

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