Sublime- und Atom-Snippets

Snippets sind wiederverwendbare Code, der die Sie einfach und schnell in Ihren Texteditor einfügen können.

Sie beginnen, einen kurzen Code einzugeben, ein Pop-up-Fenster erscheint und drücken Sie einfach die Eingabetaste für das gewünschte Snippet, um eine vordefinierte Code-Chunks.

Snippets funktionieren möglicherweise nur, wenn die Datei, eine bestimmte Erweiterung hat (d.h. JavaScript-Snippets funktionieren wenn Sie eine Datei mit der Endung .js bearbeiten.

JS- und NodeJS-Snippets

Erstklassig | Atom

Die JavaScript- und NodeJS-Snippets Paket von Zeno Rocha ist ein großartiges Paket mit einfachen Snippets. mit denen Sie schnell gängiges JavaScript schreiben können.

Im Folgenden finden Sie einige Beispiele für Kurzformen und den Code, den sie generieren:

ae (Ereignis-Listener hinzufügen)

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

cel (Element erstellen)

document.createElement(elem);

cdf (Dokumentfragment erstellen)

document.createDocumentFragment(elem);

pr (Prototyp)

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

iife (sofort aufgerufener Funktionsausdruck)

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

Hier ist der Beitrag von Ben Alman auf iife nur für Matt.

Zeno bietet eine vollständige Liste der Befehle, die Sie verwenden können, auf dem GitHub repo (und Paket) Seiten).

ES2015-Toolkit

Erstklassig

ES2015 (auch ES6 genannt) ist fantastisch. ein passendes Paket.

Um dieses Paket und seine Snippets zu verwenden, musst du Babel über NPM

npm install -g babel

Beachten Sie auch die Großschreibung am Anfang einiger der Kurzschriftcodes.

Versprechen

Promise((resolve, reject) => {

});

Klasse

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

  // methods
}

Objekt

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

Eine vollständige Liste der unterstützten Snippets finden Sie im Sublime-Paket Kontrollseite.

Leider ist dieses Paket für Atom nicht verfügbar. Das nächste Äquivalent scheint dieses Paket mit dem Titel „es6-javascript“

Polymer- und Webkomponentenpaket

Erstklassig | Atom

Reduziere den Aufwand beim Schreiben von Standardtext für Polymer mit Mr. Dodsons tolle Polymer- und Webkomponenten-Snippets.

hi (HTML-Import)

<link rel="import" href="bower_components//.html">

pe (Polymerelement)

<dom-module id="">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>

  </template>
  <script>
    Polymer({
      is: ''
    });
  </script>
</dom-module>

React-Snippets

Erstklassig | Atom

Für alle React-Fans gibt es schließlich auch ein Paket für dich. Gerüst Komponenten und häufig geschriebenen Code mit diesen Snippets ausgehen.

rcc (Klassenkomponente - Skeleton)

var React = require('react');
var PropTypes = React.PropTypes;

var  = React.createClass({

  render: function() {
    return (
      <div />
    );
  }

});

module.exports = ;

scu (shouldComponentUpdate)

shouldComponentUpdate: function(nextProps, nextState) {

},

Zubehör

this.props.

Bundesstaat

this.state.

MOAR-Pakete

Es gibt noch viele andere Pakete, die Snippets für verschiedene Konzepte. Wenn Sie also denselben Code immer wieder dass jemand ein Paket geschrieben hat, das dazu beiträgt, in der Vergangenheit – führen Sie einfach eine Suche in der Paketverwaltung für Ihren Editor durch. (Sublime | Atom)