Wie erstelle ich eine fertige ready made Komponentenvorlage/snippet/LiveTemplate in WebStorm?

Question

WebStorm out-of-the-Box kommt nicht mit einer fertigen Vorlage für React.js-Komponenten mit den Anforderungen und exportiert alle bereit, es würde das Leben erleichtern, wenn Sie beginnen, viele Komponenten zu entwerfen, eine neue Datei React Component zu haben Vorlage bereit.

Die Frage ist also: Wie erstelle ich eine WebStorm React-Komponente?

Answer 1

1.) Gehen Sie in die Einstellungen (Alt + Strg + s)

2.) Starten Sie "Datei und Code-Vorlagen"

3.) Drücken Sie die grüne Taste + auf der oberen linken Seite eingeben

4.) im Feld Name, nur schreiben „Reagieren Component“ und Erweiterung JS (jeder hat seine eigenen Vorlieben gibt, so fühlen sich frei zu ändern ...)

5.) Best Practice diktiert Dateibenennung als Ich tat, was ist: FileName in Camel Case und ComponentName mit dem ersten Kapital und dann Kamelgehäuse. Wiederum können Sie tun, was Ihnen am besten passt. Also ging ich mit diesem Code:

"use strict"; 

var React = require('react'); 
var ${NAME} = React.createClass({ 
    render: function(){ 
     return (

     ); 
    } 

}); 
#set($upper = $NAME.toString().substring(0,1).toUpperCase()) 
#set($rest = $NAME.toString().substring(1)) 
#set($capped = "$upper$rest") 
module.exports = $upper$rest; 

Kopieren Fügen Sie den obigen Code ein und drücken Sie OK.

Jetzt, wenn Sie mit der rechten Maustaste auf eine neue Datei klicken, haben Sie "React Component" mit allen anfänglichen Best Practice-Code-Verwendung, alle warm und bereit für Sie, nur zusätzlichen Code hinzuzufügen.

Hoffe, dass dies hilft.