Zusammenfassung der einführenden Verwendung von WebStorm

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.

• Beschreibung der Webstorm-Tastenkombinationen
  

  WebStorm-Bearbeitung verwandter Tastenkombinationen

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!