WebStorm-IDE

WebStorm IDE ist, wie der Name schon sagt, ein Software-Editor-Tool für Entwickler von Jet Brains. Es ist der intelligenteste JavaScript-Editor für das Web, Mobilgeräte, Server und auch für die Entwicklung von Desktop-Anwendungen. Wir können sowohl clientseitige als auch serverseitige Anwendungen entwickeln. Es unterstützt Angular, React oder Vue.js für die Front-End-Entwicklung, Node.js und Meteor für die serverseitige oder Back-End-Entwicklung; Ionic, Cordova und React Native für die mobile Entwicklung und Electron für die Entwicklung von Desktop-Anwendungen. Die neueste Version der WebStorm-IDE ist WebStorm 2020.1 mit einem neuen, eleganten Erscheinungsbild. Es basiert auf der Open-Source-Plattform Intellij.

Starten Sie Ihren kostenlosen Softwareentwicklungskurs

Webentwicklung, Programmiersprachen, Softwaretests und andere

Wie funktioniert die WebStorm-IDE?

Wenn wir WebStorm nach der Erstkonfiguration zum ersten Mal öffnen, erhalten wir den folgenden Bildschirm:

Von hier aus können wir ein neues Projekt erstellen oder ein vorhandenes Projekt öffnen oder das Projekt aus der Versionskontrolle wie Github, SVN oder einem anderen VCS auschecken.

Lassen Sie uns ein leeres neues Projekt erstellen und dann werden Sie nach dem Projektspeicherort gefragt, übernehmen die Standardeinstellungen und klicken auf Erstellen: –

Wir erhalten den folgenden Bildschirm und beginnen mit der Arbeit an unserem Projekt:

Lassen Sie uns eine neue Datei im Projekt erstellen. Wählen Sie im Projekttoolfenster den Ordner aus, in dem wir eine neue Datei erstellen möchten, klicken Sie mit der rechten Maustaste und wählen Sie „Neu“ wie unten beschrieben aus oder drücken Sie Alt+Einfügen.

Erstellte eine Datei mit dem Namen timer.js, um weitere Funktionen wie die Code-Vervollständigung zu verstehen.

Erklärung: Im obigen Beispiel geben Sie einfach „cla“ ein und die Code-Vervollständigung erscheint. Sie können auch Strg+Leertaste drücken, um die Code-Vervollständigungsoptionen zu erhalten.

Lassen Sie uns die WebStorm-Benutzeroberfläche erkunden:

1. Herausgeber: Wo wir unseren Code schreiben. Wir können den ablenkungsfreien Modus verwenden, um alle Symbolleisten und Werkzeugfenster auszublenden, sodass wir uns nur auf das Schreiben unseres Codes konzentrieren können. Wir können auch die Tastenkombination Strg+Umschalt+F12 verwenden.
2. Projekt-Tool-Fenster: Es verfügt über mehrere Tool-Fenster wie das Projekt, die Versionskontrolle, das Debuggen usw. Wir können Verknüpfungen verwenden, um die Tool-Fenster ein- oder auszublenden.
3. Popup-Fenster: Wird verwendet, um die Suche zu beschleunigen oder zu einem bestimmten Element zu navigieren.
4. Kontextmenü: Es wird verwendet, um neue Dateien zu erstellen, den Code umzugestalten, den lokalen Verlauf zu überprüfen usw.
5. Navigationsleiste: Es ist eine Alternative zum Projekt-Toolfenster, um zwischen den Ordnern zu wechseln und deren Inhalte anzuzeigen.
6. Statusleiste: Sie zeigt den Status unseres Projekts, Codes usw. an, genau wie bei anderen Anwendungen.

WebStorm-IDE-Funktionen

Im Folgenden sind die Funktionen der WebStorm-IDE aufgeführt:

1. Intelligente Codierungsunterstützung

Während wir tippen, liefert es die besten Code-Vervollständigungsergebnisse für alle unterstützten Sprachen. Bei der Arbeit mit CSS erhalten wir eine Code-Vervollständigung für Eigenschaften und deren Wert. Es verfügt außerdem über zahlreiche integrierte Inspektionen, die alle Fehler und Warnungen melden, sobald wir etwas eingeben, und alle verfügbaren Schnellkorrekturoptionen vorschlagen. Wir können Fehler und Warnungen in einer Protokolldatei leicht anhand des rechten Randbereichs des Editors erkennen, wenn in einer Codezeile ein Problem vorliegt, da dies im rechten Randbereich des Editors markiert ist.

Alle modernen Frameworks wie Node.js, React, Angular, Vue.js, Meteor und mehr werden von der WebStorm-IDE unterstützt und bieten außerdem erweiterte Codierungsunterstützung für diese Frameworks.

Wir können unseren Codestil in der .editorconfig-Projektdatei erwähnen und WebStorm wendet den konfigurierten Codestil automatisch an, während wir Code eingeben oder ganze Dateien auf einmal neu formatieren, um einen konsistenten Codestil bereitzustellen.

Webstorm verfügt über leistungsstarke Navigations- und Suchfunktionen. Mit der Strukturansicht des Editors können wir ganz einfach durch die geöffneten Dateien navigieren, was bei der Arbeit an großen Projekten viel Zeit spart. Mithilfe des Dialogfelds „Überall suchen“ können wir im gesamten Projekt nach Dateien, Klassennamen oder Symbolen suchen. Wir können Strg+Klick verwenden, um mehr über die Definition einer beliebigen Methode, Funktion oder Variable in unserem Code zu erfahren.

2. Debuggen, Nachverfolgen und Testen

WebStorm verfügt über einen in die IDE selbst integrierten erweiterten Debugger für clientseitigen Code, der mit Google Chrome funktioniert und das Debuggen des Codes in der IDE erleichtert, ohne zum Debuggen zwischen Editor und Browser hin und her wechseln zu müssen. Es spart auch unsere Zeit. Wir können auch den integrierten Debugger mit vollem Funktionsumfang für Node.js verwenden, um Apps zu debuggen, die lokal oder auf einem Remote-Computer ausgeführt werden.

Wir können das integrierte Tool spy-js verwenden, um sowohl clientseitigen JavaScript- als auch Node.js-Code zu verfolgen und mögliche Probleme zu identifizieren. Es stellt auch eine schöne Visualisierung oder ein Diagramm der Projektstruktur dar, mit dem wir visualisieren können, wie Projektdateien mit Funktionsaufrufen verbunden sind.

WebStorm lässt sich in JavaScript-Test-Frameworks integrieren, die die einfache Durchführung von Unit-Tests erleichtern. Wir können Karma oder Jest zum Testen unseres clientseitigen JavaScript-Codes oder Mocha zum Testen von Node.js auswählen. Profilierungsdaten werden auf die am besten zugängliche Weise dargestellt, die uns hilft, mögliche Speicherlecks oder Hotspots in unserer Anwendung leicht zu identifizieren.

3. Nahtlose Tool-Integration

WebStorm kann über die einheitliche Benutzeroberfläche in bekannte Task-Runner, Test-Frameworks und Paketmanager für die Webentwicklung integriert werden. Über die Einstellungen können wir auf die vollständige Liste der installierten lokalen NPM- und Browserabhängigkeiten zugreifen oder NPM-Module und Browserabhängigkeiten installieren und aktualisieren. Wir können WebStorm in PhoneGap-, Cordova- und Ionic-Frameworks integrieren und mit der Erstellung, Emulation und Bereitstellung mobiler Apps über die IDE selbst beginnen. WebStorm verfügt über einen integrierten Compiler, der dabei hilft, unseren TypeScript-Code schnell und einfach in JavaScript zu kompilieren.

4. Anpassung

Wir können die WebStorm-IDE nach unseren Wünschen anpassen oder sie so anpassen, dass sie perfekt zu unserem Codierungsstil passt. Es verfügt über einen Hell- und Dunkelmodus und wir können auch das Farbschema ändern oder nach verfügbaren Themen suchen, die wir verwenden können. Wir können Werkzeugfenster, Editor-Stil, Verknüpfungen, visuelle Themen usw. anpassen. Es verfolgt die an unseren Quelldateien vorgenommenen Änderungen, auch wenn die Änderungen von einer anderen Anwendung vorgenommen wurden, was uns vor versehentlichen Verlusten oder Änderungen schützt.

Vorteile der WebStorm-IDE

1. Wir müssen nicht unsere Zeit damit verschwenden, mehrere Plugins zu suchen und zu installieren, da es mit einer Vielzahl integrierter Entwicklertools und sofort einsatzbereiter Sprach- und Framework-Unterstützung ausgestattet ist.
2. Dank der einheitlichen Benutzeroberfläche können wir unsere Produktivität steigern, da wir nicht zwischen Terminal und Texteditor wechseln müssen.
3. Es kann in fast alle verfügbaren VCS integriert werden, zum Beispiel Git, Github, Mercurial usw. Mit einem in der IDE verfügbaren visuellen Vergleichs-/Zusammenführungstool können wir Dateien festschreiben, Änderungen überprüfen und Konflikte lösen.
4. Wir können einfach JSCS aktivieren, einen Codestilprüfer für JavaScript, um die Einhaltung des Projektcodes wie Einrückungen, Leerzeichen nach Schlüsselwörtern usw. zu überprüfen.
5. Es verfügt außerdem über eine Live-Bearbeitungsfunktion, die den Browserinhalt sofort aktualisiert, ohne ihn neu laden zu müssen, unabhängig davon, welche Änderungen wir an unserer HTML- und CSS-Datei vornehmen. Es wird derzeit nur in Google Chrome unterstützt.

Fazit

WebStorm IDE bietet viele coole Funktionen mit großartiger Benutzererfahrung. Es verfügt über eine einheitliche Benutzeroberfläche, sodass wir fast alle unsere Codierungs-, Debugging- und Ausführungsaufgaben in einem Fenster erledigen können. Es bietet eine schnelle Navigation. Wir können eine 30-tägige Testversion kostenlos herunterladen und genießen. Du wirst ein Fan davon werden.

Das obige ist der detaillierte Inhalt vonWebStorm-IDE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!