Dieser Artikel gibt Ihnen eine Zusammenfassung der Einführung in die Verwendung von WebStorm. Freunde in Not können einen Blick darauf werfen.
WebStorm basiert auf der Open-Source-IntelliJ-Plattform, die JetBrains seit über 15 Jahren entwickelt und verfeinert. Es bietet eine einheitliche Benutzeroberfläche, die mit vielen gängigen Versionskontrollsystemen funktioniert und eine konsistente Benutzererfahrung über Git, GitHub, SVN, Mercurial und Perforce hinweg gewährleistet. WebStorm bietet anpassbare Funktionen, die Sie perfekt an Ihren Codierungsstil anpassen können, von Verknüpfungen, Schriftarten und visuellen Themen bis hin zu Toolfenstern und Editor-Layouts.
Intelligente Codierungsunterstützung
WebStorm hilft Ihnen, großartigen Code zu schreiben. Sein intelligenter Editor bietet Code-Vervollständigung, dynamische Code-Analyse, Code-Formatierung und Refactoring, um Ihre Produktivität zu steigern und Ihr Entwicklungserlebnis auf ein ganz neues Niveau zu heben.
Unterstützte Sprachen und Frameworks
WebStorm bietet erstklassige Codierungshilfe für JavaScript, ECMAScript 6, TypeScript, CoffeeScript, Dart und Flow.
WebStorm kann Ihnen beim Schreiben von HTML-, CSS-, Less-, Sass- und Stylus-Code helfen.
Das Beste daran ist, dass Sie von der erweiterten Unterstützung für Node.js und beliebte Frameworks wie React, Angular, Vue.js, Meteor und mehr profitieren.
Intelligente Code-Unterstützung
WebStorm analysiert Ihr Projekt, um die besten Code-Vervollständigungsergebnisse für alle in Ihrer Anwendung definierten Methoden, Funktionen, Module, Variablen und Klassen zu liefern. Die Codierungsunterstützung ist kontextbewusst und kann auch Framework-spezifisch sein.
Genießen Sie die Codevervollständigung für Eigenschaften und deren Werte, wenn Sie mit CSS in WebStorm arbeiten. Holen Sie sich in Less and Sass Hilfe von Mixins. Natürlich erhalten Sie in HTML eine Code-Vervollständigung für alle Tags und Attribute.
Analyse und Erkennung der Codequalität
WebStorm verfügt über Hunderte von integrierten Prüfungen, die alle unterstützten Sprachen abdecken. Darüber hinaus können Sie auch ESLint, TSLint, Stylelint, JSCS, JSHint und JSLint verwenden.
WebStorm Editor meldet alle Fehler und Warnungen direkt während der Eingabe und bietet viele schnelle Korrekturoptionen.
Alle Codezeilen mit möglichen Problemen mit WebStorm werden im rechten Rand des Editors markiert, sodass Sie Fehler und Warnungen in langen Dateien leicht erkennen können.
Sie können WebStorm auch verwenden, um eine Codequalitätsanalyse für Ihr gesamtes Projekt durchzuführen und ausgewählte Schnellkorrekturen automatisch anzuwenden.
Tipps zur Verwendung von Webstorm
So ändern Sie das Design (Schriftart und Farbe) von WebStorm:
Datei -> Editor -> Farben> Schemaname.Theme-Download-Adresse
So verhindern Sie, dass Webstorm die Projektdatei beim Start öffnet:
Datei ->Allgemein entfernen Letztes Projekt erneut öffnen beim Start.
So zeigen Sie Chinesisch perfekt in WebStorm an:
Datei ->Einstellungen->Darstellung, aktivieren Sie Standardschriftarten überschreiben durch (nicht empfohlen), legen Sie den Namen fest: NSimSun , Größe: 12
-
So zeigen Sie Zeilennummern in WebStorm an:
Datei -> Einstellungen->Editor, aktivieren Sie „Zeilennummern anzeigen“, um Zeilennummern anzuzeigen
Wie WebStorm den Code automatisch umbricht:
Datei -> Einstellungen -> Editor „Soft Wraps im Editor verwenden“ ankreuzen, der Code wird automatisch umgebrochen
So klicken Sie auf den Cursor und zeigen WebStorm am Ende der Zeile an:
Datei -> Einstellungen->Editor Deaktivieren Sie einfach „Platzierung von Einfügemarke nach Zeilenende zulassen“.
So ändern Sie WebStorm-Tastenkombinationen:
Datei -> Einstellungen->Tastenbelegung, dann doppelklicken Sie auf die Funktion, für die Sie die Tastenkombination ändern möchten. Es erscheint ein Eingabeaufforderungsfeld , folgen Sie den Anweisungen
So ersetzen Sie WebStorm durch die Tastenkombinationen Ihres vertrauten Editors:
Datei ->Einstellungen->Keymap, das gängige IDEs wie Visual Studio unterstützt , Eclipse und NetBeans.
-
Eingabeaufforderung der Javascript-Bibliothek.
Datei -> Javascript -> Bibliotheken -> Wählen Sie dann die Javascript-Klassenbibliothek aus, die Sie häufig verwenden 🎜>Bei der Entwicklung von js in WebStorm habe ich festgestellt, dass Strg + Eingabetaste erforderlich ist, um die Kandidatenoption auszuwählen:
Datei -> Code-Vervollständigung -> stattdessen „Immer“
-
Die js-Eingabeaufforderung in WebStorm ist relativ langsam.
Datei -> Autopopup wird auf 0 geändert 🎜>
Git-Konfiguration in WebStorm:
Datei -> Editor -> Ich brauche es nicht.
WebStorm-Plug-in-Installation:
Datei ->Plugins, dann wählen Sie die leistungsstarken Plug-ins aus und installieren Sie sie (Das „css-X Das Plug-In „-fire“ wird zum Ändern des CSS im Editor verwendet, wenn Firebug zum Ändern von CSS-Attributen verwendet wird. Der Code ändert sich ebenfalls )
Erfahrung mit Webstorm
Favoritenfunktion von WebStorm:
Wenn das Projektverzeichnis sehr groß ist, werden häufig einige Unterverzeichnisse geöffnet, die Hierarchie jedoch Sehr tiefgreifend. Zu diesem Zeitpunkt können Sie das Verzeichnis zu Ihren Favoriten hinzufügen. Nachdem das Hinzufügen erfolgreich war, wird auf der linken Seite ein Menü „Favoriten“ angezeigt 🎜>Zusätzlich zur linken Seite gibt es auf der Projektseite zusätzlich zur Auswahl eines Verzeichnisses im oberen Menü ein Verzeichnis, das der Breadcrumb-Navigation einer Website ähnelt, um dieselbe Funktion zu erreichen. Wenn Sie auf jedes Verzeichnis klicken, wird ein Dropdown-Menü angezeigt, um die Unterverzeichnisse darunter anzuzeigen. Dies ist sehr praktisch.
WebStorms Konstruktoroberfläche:
Kommentare werden angezeigt, wenn sie mit dem übereinstimmen Format. Wenn es sich um eine JS-Datei handelt, handelt es sich um die Funktionen und Objekte der JS-Klasse. Wenn es sich um eine CSS-Datei handelt, handelt es sich um eine Zusammenfassung der CSS-Datei. Diese dienen lediglich der einfacheren Anzeige der Struktur des Codes
ToDo-Oberfläche von WebStorm:
Fügen Sie ToDo-Kommentare zum Code hinzu und diese Oberfläche wird angezeigt
WebStorms zweispaltige Codeoberfläche:
Klicken Sie mit der rechten Maustaste auf die Datei auf der Code-Registerkarte und dann mit der rechten Maustaste vertikal (zwei Bildschirme links und rechts) oder horizontal geteilt (zwei Bildschirme eingeschaltet). oben und unten)
WebStorms lokale Verlaufsfunktion:
Eine gute Möglichkeit, Code abzurufen
-
WebStorm integrierte Git-Nutzung
Nur Git ist in Webstorm integriert. Häufig verwendete Vorgänge können Befehlszeilentools nicht vollständig ersetzen. Sie können in der unteren rechten Ecke der Benutzeroberfläche überprüfen, in welchem Git-Zweig Sie sich befinden. Sie können auch darauf klicken, um zu wechseln oder einen neuen Zweig zu erstellen.
Sehen Sie sich die Unterschiede zwischen dem aktuellen Code und dem Repository-Code an:
Klicken Sie mit der rechten Maustaste auf einen beliebigen Bereich der Codeschnittstelle, wählen Sie git -> vergleichen mit und wählen Sie dann die aus Repository zum Vergleichen.
Strg + Leertaste:
Grundlegende Codevervollständigung ( der Name einer beliebigen Klasse, Methode oder Variablen) Grundlegende Codevervollständigung (der Name einer beliebigen Klasse, Funktion oder Variablen), ändern Sie zu Alt+S
Strg + Umschalt + Eingabetaste:
Anweisung vervollständigen Vervollständigen Sie die aktuelle Anweisung
Strg + P:
Parameterinformationen (innerhalb von Methodenaufrufargumenten) Parameterinformationen umfassen Methodenaufrufparameter
Strg + Maus über Code
Kurzinfo Einfache Informationen
Strg + F1
Beschreibung des Fehlers oder der Warnung an der Einfügemarke anzeigen. Beschreibung des Fehlers oder der Warnung an der Einfügemarke anzeigen. Fehler anzeigen oder Warninformationen an der Cursorposition
Alt + Einfügen
Code generieren... (Getter, Setter, Konstruktoren) Eine neue Datei erstellen oder Code generieren,... Konstruktor kann Erstellen Sie Getter- und Setter-Methoden für jedes Feld in der Klasse
Strg + O
Methoden überschreiben Methoden überschreiben
Strg + I
Implementierungsmethoden Implementierungsmethoden
Strg + Alt + T
Umgeben mit... (if, else, try, Catch, for usw.) Verwenden Sie *, um die ausgewählte Zeile zu umgeben des Codes (* einschließlich if, while, try Catch usw.)
Strg + /
Kommentieren/Kommentieren mit Zeilenkommentar aufheben >Kommentieren/Kommentieren mit Blockkommentar aufheben Blockkommentar/ Blockkommentar auskommentieren
Strg + W
Sukzessive zunehmende Codeblöcke auswählen Codeblöcke auswählen, normalerweise inkrementelle Auswahl
Strg + Umschalt + W
Aktuelle Auswahl auf vorherigen Status verkleinern. Das Zurücksetzen der vorherigen Tastenkombination, Auswahlcode verringern.
Alt + Q
Kontextinformationen, kontextbezogene Informationen
Alt + Eingabetaste
Absichtliche Aktionen und schnelle Lösungen anzeigen Absichtliche Aktionen, schnelle Ergebnisse
Strg + Alt + L
Code neu formatieren Formatieren Sie den Code entsprechend dem Vorlagenformat
Tab/Umschalt + Tab
Ausgewählte Zeilen einrücken/aufheben. Ausgewählte Zeilen einrücken/aufheben. Zeilenverarbeitung
Strg + X oder Umschalt + Löschen
Aktuelle Zeile oder ausgewählten Block in die Zwischenablage ausschneiden. Aktuelle Zeile oder ausgewählten Block in die Zwischenablage ausschneiden.
Strg + C oder Strg + Einfügen
Aktuelle Zeile oder ausgewählten Block in die Spanplatte kopieren Kopieren Sie die aktuelle Zeile oder den ausgewählten Block auf die Spanplatte
Strg + V oder Umschalt + Einfügen
Aus Zwischenablage einfügen Fügt den Inhalt in die Zwischenablage ein
Strg + Umschalt + V
Aus aktuellen Puffern einfügen Fügt den neuesten Inhalt in den Puffer ein
Strg + D
Aktuelle Zeile oder ausgewählten Block duplizieren
Strg + Y
Zeile an der Einfügemarke löschen Die Zeile an der Cursorposition löschen
Strg + Umschalt + J
Intelligente Zeilenverbindung (HTML und JavaScript). nur)Intelligente Zeile verbinden (HTML und JavaScript)
Strg + Eingabetaste
Intelligente Zeilenteilung (nur HTML und JavaScript)
Umschalttaste + Eingabetaste
Neue Zeile beginnen Eine neue Zeile beginnen
-
Strg + Umschalt + U
Groß-/Kleinschreibung für Wort am Caretzeichen oder ausgewählten Block umschalten. Groß-/Kleinschreibung an der Cursorposition umschalten
Strg + Umschalt + ]/[
Auswählen bis zum Ende/Anfang des Codeblocks. Auswählen bis zum Ende/Anfang des Codeblocks
Strg + Entf
Bis zum Wortende löschen Textende löschen
Strg + Rücktaste
Bis zum Wortanfang löschen Textanfang löschen
Strg + NumPad+/-
Codeblock erweitern/reduzieren Codeblock erweitern/reduzieren
Strg + Umschalt+Zifferblock+
Alles erweitern
Strg + Umschalt + Ziffernblock-
Einklappen Alles einklappen
-
Strg + F4
Aktive Editor-Registerkarte schließen Aktive Editor-Registerkarte schließen
WebStorms Tastenkombinationen zum Suchen/Ersetzen, Suchen/Ersetzen
-
Strg + F
Suchen Schnelles Finden von Code in der aktuellen Datei
Strg + Umschalt + F
Im Pfad suchen Den Pfad in der angegebenen Datei suchen
F3
Weiter suchen Nächstes suchen
Umschalt + F3
Vorheriges suchen Vorheriges suchen
Strg + R
Ersetzen Code in aktueller Datei ersetzen
Strg + Umschalt + R
Im Pfad ersetzen Stapelaustausch von Codes in bestimmten Dateien
WebStorms Verwendung Suche nach verwandten Tastenkombinationen
Alt + F7/Strg + F7
Verwendungen suchen/Verwendungen in Datei suchen Verwendung finden/Verwendung in Datei suchen
Strg + Umschalt + F7
Verwendungen in Datei hervorheben Datei
Strg + Alt + F7
Verwendungen anzeigen Verwendung anzeigen
Laufender Betrieb von WebStorm
Alt + Umschalt + F10
Konfiguration auswählen und ausführen. Konfiguration auswählen und ausführen
Alt + Umschalt + F9
Konfiguration auswählen und debuggen. Architektur auswählen, Schwachstelle patchen
Umschalt + F10
Ausführen
Umschalt + F9
Debug-Patch der Schwachstelle
Strg + Umschalt + F10
Kontextkonfiguration vom Editor aus ausführen
Strg + Umschalt + X
Befehlszeile ausführen
Debugging Zugehörige Tastenkombinationen für WebStorm
F8
Durch Schritt übergehen wird die Funktion nicht aufgerufen
F7
Schritt in Einzelschrittausführung
Umschalttaste + F7
Intelligenter Schritt in die intelligente Schrittausführung
Umschalttaste + F8
Ausstieg
Alt + F9
Zum Cursor ausführen
Alt+F8
Ausdruck auswerten, Ausdruck auswerten
F9
Programm fortsetzen, Programm neu starten
-
Strg + F8
Haltepunkt umschalten, Haltepunkt wechseln
Strg + Umschalt + F8
Haltepunkte anzeigen Haltepunkte anzeigen
Navigationspositionierungsbezogene Tastenkombinationen von WebStorm
-
Strg + N
Zur Klasse gehen Zur angegebenen Klasse springen
Strg + Umschalt + N
Gehe zu Datei. Suchen Sie schnell nach Dateien im Projekt anhand des Dateinamens
Strg + Alt +Umschalt + N
Gehe zum Symbol Funktionsposition nach einem Zeichen suchen
Alt + Rechts/Links
Gehe zur nächsten/vorherigen Editor-Registerkarte. Gehe zur nächsten/vorherigen Editor-Option
F12
Gehe zurück zum vorherigen Toolfenster. Gehe zurück zum vorherigen Toolfenster.
Esc
Gehe zum Editor (aus dem Toolfenster). ) Rufen Sie den Editor über das Werkzeugfenster auf
Umschalt + Esc
Aktives oder letztes aktives Fenster ausblenden Aktives Fenster ausblenden
Strg + Umschalt + F4
Aktiven Lauf/Nachricht/Suchen/…-Tab schließen Aktiven….Tab schließen
Strg + G
Zur Zeile gehen Zur Zeile springen
Strg + E
Popup „Zuletzt verwendete Dateien“ Popup der zuletzt geöffneten Dateien
Strg + Alt + Links/Rechts
Zurück/vorwärts navigieren Vorwärts navigieren /zurück
Strg + Umschalt + Rücktaste
Navigiere zum letzten Bearbeitungsort. Navigiere zum letzten Bearbeitungsort
Alt + F1
Wählen Sie die aktuelle Datei oder das aktuelle Symbol in einer beliebigen Ansicht aus. Suchen Sie den Speicherort des aktuell ausgewählten Codes oder der aktuell ausgewählten Datei in anderen Schnittstellenmodulen.
Strg + B oder Strg + Klicken
Gehe zur Deklaration. Springe zu die Definition
Strg + Alt + B
Gehe zu Implementierung(en) Zur Methodenimplementierung springen
Strg + Umschalt + B
Gehe zur Definition der Sprungmethode für Typdeklaration
Strg + Umschalt + I
Schnelldefinitionssuche öffnen. Definitionsschnellsuche öffnen
Strg + U
Gehe zur Supermethode/Superklasse-Sprungmethode/Superklasse
Alt + Auf/Ab
Gehe zur vorherigen/nächsten Methode Wechseln Sie schnell zwischen Methoden
Strg + ]/[
Zum Ende/Anfang des Codeblocks wechseln Zum Ende/Anfang des Codierungsblocks springen
Strg + F12
Popup zur Dateistruktur Popup zur Dateistruktur
Strg + H
Typ Hierarchie Typ Hierarchie
Strg + Alt + H
Aufrufhierarchie
F2/Umschalt + F2
Nächster/vorheriger markierter Fehler springt zum nächsten/vorherigen Fehler, hebt Fehler oder Warnungen hervor und findet sie schnell zwischen falschen Aussagen springen.
F4/Strg + Eingabetaste
Quelle bearbeiten/Quelle anzeigen Quellcode bearbeiten/Quellcode anzeigen
Alt + Home
Navigationsleiste anzeigen Navigationsleiste anzeigen
F11
Lesezeichen-Schaltermarkierung umschalten
Strg + F11
Lesezeichen mit Mnemonik mithilfe der Speicherschalter-Markierung umschalten
Strg + #[0-9]
Gehe zu nummeriertem Lesezeichen. Springe zu nummeriertem Lesezeichen.
Umschalt + F11
Lesezeichen anzeigen. Lesezeichen anzeigen
WebStorms Refactoring-Tastenkombinationen
F5
Kopieren kopieren
F6
Verschieben Verschieben
Alt + Entf
Sicheres Löschen Sicheres Löschen
Umschalt + F6
Umbenennen Umbenennen
Strg + Alt + N
Inline-Variable eingebettete Variable
Strg + Alt + M
Extrahierungsmethode (nur Javascript) Extraktionsfunktion
Strg + Alt + V
Variable einführen
Strg + Alt + F
Feld einführen
Strg + Alt + C
Konstante einführen Einführung von Konstanten
VCS/Lokaler Verlauf Versionskontrollsystem/lokaler Verlauf bezogene Verknüpfungen in WebStorm Key
Alt + BackQuote( )
'VCS'quick popup VCS
Strg + K
Projekt an VCS übergeben Projekt an VCS senden
Strg + T
Projekt aus VCS aktualisieren Projekt aus VCS aktualisieren
Alt + Umschalt + C
Letzte Änderungen anzeigen Die neuesten Änderungen anzeigen
Allgemeine, häufig verwendete Tastenkombinationen bei der Verwendung von WebStorm
Strg + Umschalt +A
Aktion suchen Suchen und rufen Sie die Funktion des Editors auf
Alt + #[0-9]
Entsprechendes Toolfenster öffnen. Schnell wechseln, um das Schnittstellenmodul zu öffnen
Strg + Alt + F11
Vollbild umschalten Modus Vollbildmodus wechseln
-
Strg + Umschalt + F12
Maximierungseditor umschalten Maximierungseditor umschalten
Alt + Umschalt + F
Zu Favoriten hinzufügen Aktuelle Datei zu Favoriten hinzufügen
Alt + Umschalt + I
Aktuelle Datei mit aktuellem Profil prüfen Überprüfen Sie die aktuelle Datei anhand der aktuellen Eigenschaften
Strg + BackQuote( )
Schnelles Umschalten des aktuellen Schemas. Schnelles Wechseln vorhandener Kombinationen
Strg + Alt + S
Einstellungsdialog öffnen Einstellungsdialog öffnen
Strg + Tab
Wechseln zwischen Registerkarten und Werkzeugfenster (mit Windows-Tastenkombinationskonflikt)
Das obige ist der detaillierte Inhalt vonZusammenfassung der einführenden Verwendung von WebStorm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
