WebStorm hat spezifische JSX-Codeautovervollständigung für React.js. Es geht so:Ändern der Codeautovervollständigung in WebStorm
div. + Tab => <div className=""></div>
Aber ich bin mit SCSS, also muss ich die automatische Vervollständigung ändern className-styleName:
div. + Tab => <div styleName=""></div>
Sie können dieses Standardverhalten außer Kraft setzen, indem was Jetbrains ruft ein " Live-Vorlage "(diese Funktion gibt es auch in anderen Jetbrains-Produkten).
Navigieren Sie zuerst zu den Webstorm-Einstellungen. Auf der linken Seite sehen Sie eine Baumstruktur, die die nach Kategorie aufgelisteten Präferenzen anzeigt. Erweitern Sie "Editor", um "Live Templates" zu finden.
Sobald Sie Live Templates ausgewählt haben, sehen Sie auf der rechten Seite eine Baumstruktur, die die aktuell aktivierten Live Templates anzeigt. Auf der rechten Seite dieser Tabelle finden Sie eine kleine + Schaltfläche, mit der Sie Ihre eigene Live-Vorlage erstellen können.
Nachdem Sie + -> Live-Vorlage ausgewählt haben, müssen Sie den Text für Abkürzung, Beschreibung und Vorlage unten ausfüllen.
Die Abkürzung ist die Zeichen, die Sie eingeben, um diese Vorlage zu aktivieren. In diesem Fall geben Sie div ein. Die Beschreibung Feld kann sein, was auch immer Sie diese Vorlage beschreiben möchten, hat keine funktionale Auswirkungen.
Die Vorlage Textabschnitt ist der Ersetzungstext. In diesem Fall würde ich
< div Stylename = "$ END $" verwenden > </div>
Beachten Sie, dass $ END $ ist eine Variable, die den Cursor an dieser Stelle nach der Live-Vorlage aktiviert setzt.
Schließlich müssen Sie angeben, für welche Dateitypen die Live-Vorlage arbeiten soll. Beachten Sie den Ausdruck "Keine Anwendungskontexte noch. Definieren" am unteren Rand der Seite. Klicken Sie auf das Wort Definieren Sie, im Popup-Menü, das angezeigt wird, erweitern Sie Javascript, um die Option für JSX HTML zu finden, und überprüfen Sie es. Wenn Sie möchten, dass die Live-Vorlage in anderen Fällen funktioniert, können Sie weitere Dateitypen auswählen.