Ich habe einen Artikel gesehen, in dem Webstrom im Internet eingeführt wurde, und war der Meinung, dass die Funktion wirklich leistungsfähig ist. Ich weiß auch, warum die an GitHub über Alibabas Front-End übertragenen Dateien eine .idea-Datei haben. (Es wird gesagt, dass Taobao empfiehlt, JS zu schreiben, um Webstrom darin zu verwenden.)
Wir können verstehen, dass IDE viele Funktionen oder Funktionen integriert, die Sie nicht möchten. Mit anderen Worten, Redakteure mit vielen Plug-Ins werden installiert, so dass ich also immer noch das Gefühl habe, dass Plug-Ins keine Plug-Ins dafür installieren müssen.
Dann beginnen wir mit der Einführung der besonderen Funktionen von Webstrom :
Webstorm ist ein kommerzielles JavaScript -Entwicklungstool, das von JetBrains gestartet wurde
Jeder Editor muss gespeichert werden (Strg + S), was die Funktion der Bearbeitung von Software auf allen Win -Plattformen ist, aber die obere rechte Ecke der Webstorm -Bearbeitungsdatei hat nicht dieses Vertraute*.
Vorteile: Nachdem Sie Strg + S beseitigt haben, können Sie die Ergebnisseite sehen, ohne die Maus zu verschieben.
Nachteil: Ohne das vorherige * Logo wird es sofort gespeichert, wenn die Tastatur falsch betrieben wird.
Solange die Datei geschlossen ist, gibt es für einen Editor keinen Geschichte, aber Webstorm hat sie. VCS-> LOCAL HISTORY -> HISTORY Zeigen (Verknüpfungsschlüssel: Alt+~ -> 7)
Vorteil: Solange Webstorm nicht geschlossen ist, kann Ihre Datei jederzeit an den vorherigen Vorgang zurückgegeben werden (aus diesem Grund ist Strg+y der Grund, warum im Webstorm eine Linie gelöscht wird).
Nachteile: Diese historischen Aufzeichnungen sind verschwunden, nachdem das Webstorm geschlossen und neu gestartet wurde. Ein weiterer Nachteil ist, dass der durch diese verursachte Speicherverbrauch unweigerlich relativ groß ist.
Jeder Editor hat keine lokale Version außer Server SVN, aber Webstorm bietet einen lokalen Dateimodifikationsverlauf (Abkürzungstaste: Alt+Shift+C). Sie können auch die kürzlich eröffnete Datei aufbrechen.
Vorteile: entspricht der lokalen SVN.
Nachteil: Der Speicherverbrauch muss relativ groß sein.
Integriert Zencoding, HTML5, FTP, Instant Editing (Chrome), automatische Fertigstellung, Mozilla-basierte JavaScript-Debugger, JSLINT, Weniger Support, CoffeeScript-Unterstützung, Node.js, Unit-Tests, integrierte GIT- und SVN-Versionskontrolle und andere Funktionen.
Beim Schreiben von CSS fordern Sie verschiedene Dateien und Bilder intelligent auf, sodass Sie nicht mehr bestätigen müssen, ob diese Datei vorliegt.
Andere Funktionen werden eingeführt. Wenn Sie mehr wissen möchten, können Sie auf die offizielle Website des Webstroms gehen, um weiter zu suchen. Werden Sie nach dem Lesen dieser Einführung und so vielen mächtigen Merkmalen aufgefordert, dieses legendäre Front-End-Artefakt sofort auszuprobieren? Äh.
Nachdem Sie Webstrom auf der offiziellen Download -Seite heruntergeladen haben, klicken Sie zuerst auf Installation und dann mit dem nächsten Schritt fort. Schließlich erscheint die Registrierungscodeschnittstelle, da Webstrom eine kommerzielle IDE ist und natürlich das Seiden -Frontend des Tianchao nicht über dieses Geld verfügt, um ein so teures Artefakt zu kaufen. Keine Sorge, wir können den Webstorm-Schlüssel verwenden, um dieses Front-End-Artefakt zu verwenden. Hehe ~~~~
Nachdem die Installation erfolgreich ist, werde ich mich definitiv ein wenig unangenehm fühlen, genau wie ich denke, dass dieses Farbschema wirklich zu vernünftig ist. Es gibt auch einige Einstellungen, die ich nicht will. Im Folgenden werde ich die Einstellungen auflisten, an die ich gewohnt bin.
Einige Setup -Tipps nach der Installation von Webstorming :
So ändern Sie das Thema (Schriftarten & Farbschema):
Datei -> Einstellungen -> Editor -> Farben & Schriftarten -> Schema -Name. Themen -Download -Adresse
So verhindern Sie, dass Webstorming Projektdateien beim Starten öffnet:
Datei -> Einstellungen-> Allgemeines Wiedereröffnen des letzten Projekts beim Start.
Wie man chinesisch perfekt zeigt:
Überprüfen Sie die Standardschriften für Override nach (nicht empfohlen) in Datei -> Einstellungen-> Aussehen, Name des Namens: NSIMSun, Größe: 12
So zeigen Sie Zeilennummern an:
Datei -> Einstellungen-> Editor, "Zeilennummern anzeigen" überprüfen und die Zeilennummer wird angezeigt.
So wickeln Sie den Code automatisch ein:
Datei -> Einstellungen -> Editor "Verwenden von Soft Wraps im Editor" ist begeistert und der Code wird die Zeile automatisch umwickeln
So klicken Sie auf den Cursor, es wird am Ende dieser Zeile angezeigt:
Datei -> Einstellungen-> Editor "Ermöglichen Sie die Platzierung von Pflege nach dem Ende der Zeile" Entfernen Sie einfach den Haken.
So ändern Sie den schnellen Schlüssel:
Datei-> Einstellungen-> Keymap und doppelklicken Sie dann auf die Funktion, die Sie schnell ändern möchten. Es wird eine schnelle Schachtel geben. Befolgen Sie die Eingabeaufforderungen.
Wechseln Sie zu den schnellen Schlüssel, die Sie mit dem Editor vertraut sind:
Datei -> Einstellungen-> Keymap unterstützt Mainstream -IDEs wie Visual Studio, Eclipse und NetBeans.
JavaScript -Klassenbibliothek Eingabeaufforderungen.
Datei -> Einstellungen -> JavaScript -> Bibliotheken -> Dann wählen Sie die JavaScript -Klassenbibliothek, die Sie häufig in der Liste verwenden, und download und die Installation ist in Ordnung.
Bei der Entwicklung von JS wird festgestellt, dass die Auswahl von Kandidaten eine Strg + -Rendite benötigt:
Datei -> Einstellung -> Editor -> Code -Abschluss -> Vorauswahl den ersten Vorschlag: "Smart" zu "Immer"
JS -Eingabeaufforderung ist langsam
Datei -> Code -Abschluss -> Autopopup in 1000 bis 0
GIT -Konfiguration:
Datei -> Einstellungen -> Editor -> GitHub, gehen Sie ein und ändern Sie das GitHub -Konto. Wenn es keinen Git gibt, brauchen Sie es nicht.
Plugin -Installation:
Datei -> Plugins, dann die leistungsstarken Plugins und installieren Sie sie. (Das "CSS-X-Fire" -Plugin wird verwendet, um die CSS-Attribute mit Firebug zu ändern. Der CSS-Code im Editor ändert sich ebenfalls.)
Aktualisieren Sie später
Webstorm -Nutzungserfahrung
Favoritenfunktion:
Wenn das Projektverzeichnis riesig ist, sind einige Unterverzeichnisse sehr oft geöffnet, aber die Ebenen sind sehr tief. Zu diesem Zeitpunkt können Sie das Verzeichnis zu Ihren Favoriten hinzufügen. Nach erfolgreicher Hinzufügung befindet sich links ein "Favoriten" -Menü.
Breadcrumb Navigation:
Zusätzlich zur Projektseite links können Sie im oberen Menü ein Verzeichnis auswählen, ein Verzeichnis, das der Website der Website -Breadcrumb Navigation ähnelt. Wenn Sie auf jedes Verzeichnis klicken, wird ein Dropdown-Menü zur Anzeige der darunter liegenden Unterverzeichnisse angezeigt, was sehr praktisch ist.
Konstruktorschnittstelle:
Wenn die Kommentare mit dem Format übereinstimmen, wird es angezeigt. Wenn es sich um eine JS -Datei handelt, handelt es sich um eine Funktion und ein Objekt der JS -Klasse. Wenn es sich um eine CSS -Datei handelt, handelt es sich um eine Zusammenfassung der CSS -Datei. Wenn es sich um eine HTML -Datei handelt, handelt es sich um ein Knotenstrukturdiagramm. Übrigens dienen diese dazu, die Struktur des Codes zu betrachten.
TODO -Schnittstelle:
Diese Schnittstelle wird angezeigt, wenn Sie dem Code Todo -Kommentare hinzufügen
Doppelspaltencodeschnittstelle:
Klicken Sie mit der rechten Maustaste auf die Registerkarte Code und klicken Sie mit der rechten Maustaste-> vertikal verschüttet (zwei Bildschirme links und rechts) oder horizontal verschüttet (zwei Bildschirme am oberen und unteren).
Lokale Historienmerkmale:
Ein guter Weg, um den Code abzurufen
Verwenden Sie Git
Webstorm integriert nur gängige Operationen von Git und kann die Befehlszeilen-Tools nicht vollständig ersetzen. In der unteren rechten Ecke der Schnittstelle können Sie überprüfen, in welchem Git -Zweig Sie sich befinden. Sie können auch klicken, um einen neuen Zweig oben zu wechseln oder zu erstellen.
Überprüfen Sie den Unterschied zwischen dem aktuellen Code und dem Repository -Code:
Klicken Sie mit der rechten Maustaste auf jeden Bereich der Codeschnittstelle, wählen Sie GIT -> Vergleichen Sie mit und wählen Sie die Versionsbibliothek, die Sie vergleichen möchten.
WEBSTORM -Kurzschlussschlüsselbeschreibung:
Bearbeitung bearbeiten bearbeitungsbezogener Verknüpfungsschlüssel
Strg + Raum:
Basic -Code -Vervollständigung (der Name einer Klasse, Methode oder Variable) grundlegender Codeabschluss (beliebige Klasse, Funktion oder Variablenname), geändert in Alt+S geändert
Strg + Verschiebung + Eingeben:
Vervollständigen Sie die Anweisung aus, die aktuelle Anweisung abgeschlossen werden
Strg + P:
Parameterinformationen (innerhalb von Methodenaufrufargumenten) Parameterinformationen enthält Methodenaufrufparameter
Strg + Maus über Code
Kurze Informationen einfache Informationen
Strg + F1
Zeigen Sie die Beschreibung des Fehlers oder der Warnung bei der Pflegeanzeige oder Warnung bei der Pflege an
Alt + Einfügung
Generieren Sie Code… (Getters, Setzer, Konstrukteure) Erstellen Sie eine neue Datei oder generieren Sie Code,… Konstruktoren, Sie können Getter und Setter -Methoden für jedes Feld in der Klasse erstellen
Strg + o
Überlastungsmethode überschreiben Methoden
Strg + i
Implementierung der Methoden Implementierungsmethode
Strg + Alt + t
Umgeben mit… (wenn sonst, versuche, fangen, für usw.), um die ausgewählte Codezeile zu umgeben, ( * beinhaltet, wenn, während, während, versuche fangen usw.)
Strg + / /
Kommentar/Unterkennungsbekämpfung mit Zeilenkommentar Zeile Kommentar/Untersuchung
Strg + Verschiebung + / /
Kommentar/Unterbringung mit Blockkommentar Block Kommentar/Untersuchung
Strg + w
Wählen Sie erfolgreich zunehmende Codeblöcke aus
Strg + Verschiebung + w
Verringern Sie die Stromauswahl auf früher
Alt + q
Kontextinformationen Kontextinformationen
ALT + ENTER
Zeigen Sie Absichten und Schnellfixes
Strg + Alt + l
Reformat -Code -Formatcode gemäß dem Vorlagenformat
Registerkarte/ Verschiebung + Registerkarte
Eindrückung/uneingeschränkt ausgewählte Linien Eingeordnete/uneingeschränkt ausgewählte Linien Eindrückung/uneingeschränkter Eindrückung
Strg + x oder Verschiebung + löschen
Schneiden Sie die aktuelle Linie oder den ausgewählten Block in die Zwischenablage aus
Strg + C oder Strg + Insert
Kopieren
Strg + V oder Verschiebung + Einfügen
Einfügen aus der Zwischenablage
Strg + Verschiebung + V
Fügen Sie aus den letzten Puffern ein, fügen Sie den neuesten Inhalt im Puffer ein.
Strg + d
DOPPIRIERT Die aktuelle Zeile oder ausgewählte Block
Strg + y
Löschen Sie die Zeile bei Care Löschen am Cursor
Strg + Verschiebung + J.
Smart Line Join (nur HTML und JavaScript)
Strg + Eingabe
Smart Line Split (nur HTML und JavaScript)
Verschiebung + Eintritt
Neue Linie starten
Strg + Verschiebung + U.
Schalten Sie den Fall für Word bei Pflege oder ausgewählter Block -Fall -Konvertierung um
Strg + Verschiebung +]/[
Wählen Sie bis zum Ende des Codeblocks aus, bis zum Ende/Start des Codeblocks ausgewählt werden.
Strg + löschen
Löschen Sie das Word -End -Löschen des Textendes
Strg + Rückspace
Löschen Sie zu Wort Start Löschen Sie den Text Start
Strg + Numpad +/--
CODE -BLOCK EXPENT/COLLPAPSE CODE BLOCK EXPET/COLLPAPSE
Strg + Verschiebung + Numpad +
Alle erweitern
Strg + Verschiebung + Numpad-
Alle zusammenbrechen
Strg + F4
Active Editor Registerkarte Schließen Sie das aktive Bearbeitungs -Tag schließen
Suchen/Ersetzen Sie die zugehörigen Verknüpfungsschlüsseln von Such-/Ersetzen
Strg + f
Suchen Sie den Schnellsuchcode in der aktuellen Datei
Strg + Verschiebung + f
Suchen Sie im Pfad, geben Sie den Pfad an, um in der Datei zu finden
F3
Weitere finden
Verschiebung + F3
Vorher finden
Strg + r
Ersetzen Sie den Code -Austausch in der aktuellen Datei
Strg + Verschiebung + r
Ersetzen Sie im Pfad an, die Code -Substitution in der Datei anzugeben
Verwandte Verknüpfungen der Verwendung von Nutzungssuche für die Verwendung von Nutzungssuche
ALT + F7/CTRL + F7
Nutzungen finden/Nutzungen in der Datei finden Sie Nutzung/Nutzung finden
Strg + Verschiebung + F7
Markieren Sie die Verwendungen in der Datei
Strg + Alt + F7
Nutzung zeigen
Läuft
ALT + Shift + F10
Konfiguration auswählen und ausführen
Alt + Verschiebung + F9
Wählen Sie Konfiguration aus und debuggen Sie die Architektur aus, um Schwachstellen zu beheben
Verschiebung + F10
Laufen
Verschiebung + F9
Debugg Patch -Schwachstellen
Strg + Verschiebung + F10
Führen Sie die Kontextkonfiguration aus der Editor -Inhaltsarchitektur vom Editor aus
Strg + Verschiebung + x
Befehlszeile ausführen
Debugging Debugging Related Shortcutschlüssel
F8
Der Schritt umgeht die Funktion nicht
F7
Schritt für Schritt in Schritt für Schritt einsteigen
Verschiebung + F7
Smart Schritt in den Smart -Schritt in
Verschiebung + F8
Aussteigen
Alt + F9
Rennen Sie zum Cursor -Lauf zum Cursor
Alt+ F8
Ausdruck bewerten
F9
Lebenslaufprogramm startet das Programm neu
Strg + F8
Breakpoint Switch Breakpoint umschalten
Strg + Verschiebung + F8
Breakpoints anzeigen
Navigationspositionierungsverknüpfungsschlüssel
Strg + n
Gehen Sie zum Klassensprung in die angegebene Klasse
Strg + Verschiebung + n
Gehen Sie in Dateien, um Dateien schnell in einem Projekt über Dateinamen zu finden
Strg + Alt + Shift + n
Gehen Sie zur Symbol -Funktionsposition durch ein Zeichen
Alt + rechts/ links
Gehen Sie zur Registerkarte Weiter/ vorheriger Editor Gehen
F12
Gehen Sie zurück zum vorherigen Werkzeugfenster
Esc
Gehen Sie zum Editor (aus dem Werkzeugfenster) Geben Sie den Editor aus dem Werkzeugfenster ein
Schicht + Esc
Active oder Last aktives Fenster verbergen
Strg + Verschiebung + F4
Active Run/Meldung schließen/find/… Registerkarte Schließen Sie Aktivität….
Strg + g
Gehen Sie zur Linie, die zur Linie springt
Strg + e
Letzte Dateien popup popup Die kürzlich eröffnete Datei
Strg + Alt + links/rechts
Navigieren Sie zurück/vorwärts navigieren Sie vorwärts/zurück
STRG + SHIFT + Rückenraum
Navigieren Sie zum letzten Bearbeitungsort Navigieren Sie zum letzten Bearbeitungsort
Alt + F1
Wählen Sie die aktuelle Datei oder Symbol in einer beliebigen Ansicht aus. Suchen Sie den Speicherort des aktuell ausgewählten Code oder der Datei in anderen Schnittstellenmodulen
Strg + B oder Strg + klicken
Gehen Sie zur Definition zur Definition
Strg + Alt + B
Gehen Sie zum Implementierungsport der Implementierung (en) Sprungmethode
Strg + Verschiebung + B
Gehen Sie zur Definition der Deklaration der Deklaration Jump -Methode
Strg + Verschiebung + i
Öffnen Sie die schnelle Definition nach, um Definition zu finden, Schnellsuche
Strg + u
Gehen Sie mit der Sprungmethode/Super-Klasse der Super-Methode/Super-Klasse
ALT + Up/Down
Gehen Sie zur vorherigen/nächsten Methode, um die Positionierung zwischen den Methoden schnell zu verschieben
Strg +]/[
Verschieben
Strg + F12
Dateistruktur Popup -Dateistruktur Popup
Strg + h
Geben Sie Hierarchie Typhierarchie ein
Strg + Alt + H
Rufen Sie die Hierarchie an, die Hierarchie aufrufen
F2/ Shift + F2
Als nächstes/vorheriger hervorgehobener Fehler zum nächsten/vorherigen Fehler, Markierfehler oder Warnung, um schnell zu lokalisieren, verwenden Sie diese Abkürzungstaste, um schnell zwischen den falschen Aussagen zu springen.
F4/STRG + ENTER
Quelle/Quelle bearbeiten Quelle bearbeiten Quelle/Ansicht Quelle
Alt + Zuhause
Navigationsleiste anzeigen
F11
Wechseln Sie ein Lesezeichen umschalten
Strg + F11
Wechseln Sie Lesezeichen mit Mnemonik
Strg + #[0-9]
Gehen Sie zum nummerierten Lesezeichen Sprung zu nummerierten Mark
Verschiebung + F11
Showmarke Show
Refactoring Refactoring verwandte Verknüpfungsschlüsseln
F5
Kopie
F6
Bewegen
Alt + Löschen
Safer Löschen sicher löschen
Verschiebung + F6
Umbenennen umbenennen
Strg + Alt + n
Inline -Variable -Einbetten -Variablen
Strg + Alt + m
Methode extrahieren (nur JavaScript) Funktion extrahieren
Strg + Alt + V
Einführungsvariable
Strg + Alt + F.
Einführung Feld
Strg + Alt + C.
Einführung konstant
VCS/Local History Version Control System/Local History Related Shortcut Keys
Alt + Backquote ()
'Vcs'Quick Popup VCS schnell
Strg + k
Projekt für VCs eingeben, das Projekt an VCs einreichen
Strg + t
Aktualisieren Sie das Projekt aus dem VCS -Update -Projekt aus VCS
ALT + Shift + C.
Sehen Sie sich aktuelle Änderungen an. Zeigen Sie die neuesten Änderungen an.
Häufig verwendete verwandte Verknüpfungsschlüsseln für allgemeine
Strg + Verschiebung + a
Suchen Sie Aktion Die Funktion des Suchens und Aufrufens des Editors
Alt + #[0-9]
Öffnen Sie das entsprechende Werkzeugfenster schnell, um das Schnittstellenmodul zu öffnen
Strg + Alt + F11
Umschalten
Strg + Verschiebung + F12
Maximierung des Editors umschalten
ALT + Shift + F.
Fügen Sie den Favoriten hinzu, fügen Sie die aktuelle Datei Ihren Favoriten hinzu
Alt + Verschiebung + i
Überprüfen Sie die aktuelle Datei mit dem aktuellen Profil. Überprüfen Sie die aktuelle Datei mit dem aktuellen Profil
Strg + Backquote ()
Schnellschalter Stromschema Schnellschalter Stromschema
Strg + Alt + s
Öffnen Sie das Dialogfeld "Einstellungen" Öffnen Sie das Dialogfeld Einstellungen
Strg + Registerkarte
Wechseln Sie zwischen den Registerkarten und dem Werkzeugfensterumwandlung (Konflikte mit Windows -Verknüpfungsschlüssel)
Haben Sie dieses JavaScript -Entwicklungstool Webstrom bereits gewusst? Ich kann es kaum erwarten, es auszuprobieren, und ich garantiere, dass Sie es lieben werden, nachdem Sie es benutzt haben.