Funktionsmerkmale von WebStorm

Relevante Schlüsselwort- und Symbolvorschläge während der Eingabe beschleunigen das Programmieren. Alle Vorschläge sind kontext- und typbezogen und berücksichtigen verschiedene Sprachen – so werden zum Beispiel CSS-Klassennamen in Ihren .js-Dateien mit Machine-Learning-Unterstützung vervollständigt.

Sie können auch Postfix-Completion, Live-Vorlagen und Emmet verwenden, um Ihre Produktivität weiter zu steigern.

Mit WebStorm finden Sie problemlos Programmier- und Tippfehler in Ihrem Code. Die IDE bietet Hunderte Inspektionen für alle unterstützten Sprachen sowie eine integrierte Rechtschreib- und Grammatikprüfung. Die Möglichkeit zur Integration von Stylelint und ESLint sorgt für zusätzliche Flexibilität. WebStorm führt sie während der Eingabe Ihres Codes aus und hebt alle Probleme direkt im Editor hervor.

Alle Fehler und Warnungen werden bereits während der Eingabe im Editor angezeigt, und zahlreiche Quick-Fix-Optionen unterstützen Sie bei der Behebung.

Eines kann WebStorm besonders gut – das sichere Refaktorieren von Code unter Berücksichtigung Ihres gesamten Codebestands. Sie können Dateien, Ordner und Symbole umbenennen oder Komponenten, Methoden und Variablen extrahieren, ohne sich um Fehler zu sorgen – WebStorm informiert Sie über mögliche Probleme.

Sie möchten ein Symbol in der Dokumentation nachschlagen? Kein Grund, Ihre IDE zu verlassen! Bewegen Sie den Mauszeiger einfach über ein Symbol oder legen Sie die Einfügemarke darauf und drücken Sie Strg+Q, um sich alle relevanten Informationen anzeigen zu lassen. Bei Methoden- und Funktionsaufrufen kann Ihnen WebStorm außerdem Parameterhinweise anzeigen.

Sie können sich eine Vorschau von statischen HTML-Dateien direkt in WebStorm anzeigen lassen. Die Änderungen, die Sie an einer HTML-Datei oder den verlinkten CSS- und JavaScript-Dateien vornehmen, werden gespeichert, und die Vorschau wird automatisch neu geladen, damit Sie die Änderungen sehen können.

Bei der Weiterentwicklung von WebStorm steht die Produktivität im Mittelpunkt – Sie können sich also auf viele weitere Funktionen freuen, die Ihnen helfen, beim Programmieren schneller voranzukommen. Mehrere Einfügemarken, Bearbeitungsaktionen für Zeilen und Erkennung von Codeduplikaten – das sind nur einige der zeitsparenden Funktionen, die Sie ausprobieren können.

Sie wissen nicht, wo Sie mit dem Suchen anfangen sollen? Mit dem Popup Search Everywhere (Umschalt+Umschalt) können Sie fast alles in WebStorm finden: IDE-Aktionen, Dateien, Klassen, Symbole oder auch Zeichenfolgen. Alle Übereinstimmungen werden übersichtlich an einem Ort angezeigt.

Mit WebStorm können Sie schnell die Deklaration eines Symbols finden und alle Verwendungen im gesamten Projekt auflisten. Setzen Sie die Einfügemarke einfach auf eine Variable, ein Feld, eine Methode oder ein anderes Symbol, und drücken Sie Strg+B.

Durchsuchen Sie alle Projektdateien oder springen Sie zwischen Ihren letzten Dateien oder geänderten Codeteilen hin und her – WebStorm merkt sich, woran Sie gearbeitet haben, und kann Sie schnell wieder dorthin zurückbringen. Sie können für die Navigation Tabs verwenden oder sie deaktivieren und stattdessen Tastenkürzel nutzen.

Für Textzeichenfolgen steht Ihnen eine spezielle Suche zur Verfügung. Damit können Sie sowohl innerhalb bestimmter Dateien als auch im gesamten Projekt Zeichenfolgen finden und ersetzen. Sie können verschiedene Suchbereiche und Filter innerhalb des Projekts verwenden, um die Suche auf einen ausgewählten Codeabschnitt in einer Datei zu begrenzen.

Sie haben Angst davor, bei einer komplexen Operation mit Git etwas zu beschädigen? Mit WebStorm können Sie tägliche Arbeitsabläufe – Branches vergleichen, Diffs anzeigen, Merge-Konflikte lösen und vieles mehr – direkt in der gewohnten Bedienoberfläche erledigen. Auch auf GitHub gehostete Projekte können Sie direkt in der IDE verwalten.

Was passiert, wenn Sie vergessen, eine Änderung in der Versionsverwaltung zu speichern, oder wenn Sie versehentlich eine Reihe von Dateien löschen? Auch dafür hat WebStorm eine Lösung: den integrierten lokalen Verlauf. Darin werden alle Änderungen festgehalten, die Sie an Ihren Projektdateien vornehmen, sodass sich Änderungen auch dann rückgängig machen lassen, wenn Sie keine Versionsverwaltung verwenden.

Sie können clientseitige und Node.js-Anwendungen direkt im Editor ausführen und debuggen, wo Sie auch Ihren Code bearbeiten. Fügen Sie Haltepunkte hinzu, führen Sie das Programm schrittweise aus, setzen Sie Überwachungen und vieles mehr – eine einheitliche Nutzungserfahrung erleichtert Ihnen dabei das Arbeiten mit unterschiedlichen Anwendungstypen.

Zum Schreiben, Ausführen und Debuggen Ihrer Unit-Tests können Sie Jest, Mocha, Protractor und Vitest verwenden. Die Testergebnisse werden in einer übersichtlichen Baumstruktur angezeigt, von der aus Sie direkt zum Quellcode der Tests navigieren können. Bei Jest, Vitest und Mocha können Sie sich direkt in WebStorm auch einen Code-Coverage-Bericht anzeigen lassen.

Mit Prettier können Sie ausgewählte Codefragmente oder ganze Dateien und Verzeichnisse formatieren. Sie können WebStorm so konfigurieren, dass Prettier beim Speichern automatisch ausgeführt und als Standardformatierer verwendet wird.

Sie können Ihre Anwendungen in Docker-Containern ausführen und debuggen, Images herunterladen und erstellen, Multi-Container-Anwendungen mit Docker Compose ausführen und mehr – alles direkt über die IDE.

Sie bevorzugen für bestimmte Aufgaben die Befehlszeile? Mit dem integrierten Terminal von WebStorm können Sie die Befehlszeile verwenden, ohne die IDE zu verlassen. Sie können von dort zu Dateien navigieren und die gleichen Befehle wie im Betriebssystem-Terminal verwenden.

Testen Sie Ihre Web-Services mit dem integrierten HTTP-Client von WebStorm. Sie können HTTP-Anfragen direkt im Editor erstellen, bearbeiten und ausführen und mit Ihrem gesamten Team teilen.

WebStorm bietet eine Integration mit npm, Yarn und pnpm, sodass Sie mit Ihrem bevorzugten Paketmanager direkt in der IDE Pakete suchen, installieren, aktualisieren und entfernen können.

Datenbanktools und vollständige SQL-Unterstützung sind ohne zusätzliche Kosten in WebStorm integriert. Sie können direkt in der IDE Datenbanken abfragen, anlegen und verwalten. Weitere Informationen finden Sie in diesem Blogartikel.

Stellen Sie der KI Fragen zu Ihrem Projekt oder iterieren Sie Aufgaben, ohne die IDE zu verlassen oder Codefragmente hin und her kopieren zu müssen.

AI Assistant analysiert sowohl Ihren Code als auch Ihre Dokumentation, um Tests für Ihren Code zu generieren. Er kann auch die Dokumentation für eine Deklaration schreiben.

AI Assistant kann den Inhalt von Commit-Diffs in natürlicher Sprache zusammenfassen und erklären und Commit-Nachrichten zur Beschreibung Ihrer Änderungen generieren.

Spezielle KI-Prompts berücksichtigen die in Ihrem Projekt verwendeten Technologien und Programmiersprachen ebenso wie lokale Änderungen und Commits in Versionsverwaltungssystemen.

WebStorm enthält Code With Me, unseren neuen Service für kollaborative Entwicklung und Paarprogrammierung. Sie können diesen Service verwenden, um gemeinsam mit anderen in Echtzeit zu programmieren, Zugang zu Ports auf Ihrem lokalen System bereitzustellen und direkt in der IDE mit Ihrem Team zu sprechen.

Steigern Sie Ihre Produktivität mit der Remote-Entwicklungsfunktionalität. Sie können einen leichtgewichtigen lokalen Client verwenden, der Ihnen auf einem System Ihrer Wahl eine reaktionsschnelle IDE-Oberfläche bereitstellt, während ein Remote-Server alle rechenintensiven Arbeiten übernimmt.

WebStorm enthält von Haus aus einige Designs, aber es stehen darüber hinaus noch zahlreiche individuelle Optionen zur Auswahl. Sie können viele UI-Elemente ein- oder ausblenden und ihre Position ändern, und der Zen-Modus ermöglicht eine ablenkungsfreie Konzentration auf Ihren Code.

Um Ihnen zu maximaler Produktivität zu verhelfen, bietet WebStorm Tastenkombinationen für fast jede Aktion. Sie können eines der vordefinierten Tastaturlayouts nutzen oder Ihr eigenes Layout erstellen. Unter anderem stehen Ihnen an VS Code und Sublime Text angelehnte Tastenzuordnungen zur Verfügung.

Erweitern Sie die Kernfunktionalität Ihrer IDE und fügen Sie weitere Anpassungsoptionen hinzu. Besuchen Sie unseren JetBrains Marketplace, um alle verfügbaren WebStorm-Plugins zu entdecken.

Mit dem Plugin IdeaVim können Sie Ihre IDE um Vim-ähnliche Fähigkeiten erweitern. Der Funktionsumfang umfasst die Modi Normal, Einfügen und Visuell, Bewegungstasten, Löschen und Ändern, Markierungen und mehr. Lesen Sie zum Einstieg unseren Blog-Artikel.

WebStorm enthält Funktionsmerkmale, die Ihre Ansprüche an die Barrierefreiheit erfüllen. Sie können die Größe der Toolfenster und die Textgröße im Editor anpassen, Farben ändern, Tastenkürzel personalisieren und vieles mehr. Eine Unterstützung für Screenreader ist ebenfalls verfügbar.

Sie können in Ihren JetBrains-IDEs gemeinsame Einstellungen verwenden, um eine einheitliche und vertraute Arbeitsumgebung zu gewährleisten. Sie können frei festlegen, welche Einstellungen – Bedienoberfläche, Code- und Systemeinstellungen, Tastenzuordnungen, Plugins und Tools – synchronisiert werden sollen.