Hinweis: PhpStorm umfasst alle Funktionen von WebStorm mit Bezug auf HTML, CSS und JavaScript.
Die JavaScript-, HTML- und CSS-Codevervollständigung für Tags, Schlüsselwörter, Labels, Variablen, Parameter und Funktionen ist DOM-basiert und unterstützt die Besonderheiten beliebter Browser wie Firefox und Chrome.
Vervollständigung ist verfügbar für Standardfunktionen und benutzerdefinierte Funktionen in *.js-Dateien, HTML-Ereignis-Handlern und in anderen relevanten Kontexten.
Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, Dart und andere innovative Technologien der Webentwicklung werden unterstützt.
Die Live-Edit-Vorschau spart Ihnen Zeit und Klicks. Öffnen Sie eine Seite im Editor und im Browser und aktivieren Sie die Live-Edit-Funktion während der Debug-Sitzung in JavaScript. Während Sie den Code bearbeiten, werden die Änderungen sofort im Browser angezeigt – selbst bei geöffnetem Pop-up mit Vervollständigungsvorschlägen.
PhpStorm speichert Ihre Änderungen automatisch, während der Browser die Seite in Echtzeit aktualisiert, um die Änderungen anzuzeigen.
Profitieren Sie von der automatischen Kompilierung/Transpilierung moderner Websprachen nach JavaScript (von CoffeeScript, TypeScript, Dart usw.) oder CSS (von Sass, SCSS, Less, Stylus, Compass usw.) mit File Watchers.
Der Editor ermöglicht die optimale Nutzung von Emmet (ehemals Zen Coding). Definieren Sie Ihre eigenen Abkürzungen (Snippets) mit Live-Templates oder verwenden Sie bereits definierte Abkürzungen für PHP, HTML, CSS, JS und andere Sprachen.
PhpStorm erkennt eine Vielzahl an Fehlern und schlägt automatische Korrekturen vor: fehlende erforderliche Attribute, ungültige Attribute oder unzulässige Werte, falsche Verweise auf Dateien in Links, doppelte Attribute, ungültiges Format eines CSS-Selektors, ungültige CSS-Eigenschaften, nicht verwendete CSS-Klassendefinitionen, ungültige lokale Anker und mehr.
Mit den Refaktorierungen für JavaScript können Sie die Codestruktur mühelos bearbeiten. Alle Änderungen lassen sich problemlos rückgängig machen. Einige der verfügbaren Refaktorierungen sind: „Rename“, „Extract Variable/Function“, „Inline Variable/Function“, „Move/Copy“, „Safe Delete“, „Extract embedded script into file“.
Tools zur Qualitätsprüfung von JavaScript-Code sind bereits in den JavaScript-Editor integriert und prüfen Ihren Code während der Bearbeitung. Öffnen Sie die Einstellungen unter „Settings“, geben Sie JSLint/JSHint ein und aktivieren Sie eine Inspektion: Ab jetzt wird Ihr Code mithilfe dieser Inspektion während der Eingabe geprüft.
PhpStorm bietet vollständige Node.js-Unterstützung über ein kostenloses Plugin, das Sie aus dem Repository laden können. Das Plugin ermöglicht Codevervollständigung, Hervorhebung, Navigation, Fehlersuche, Debugging, Verwaltung von Paketen mit npm und vieles mehr.
Diejenigen, die immer einen Schritt voraus sein wollen, werden die Unterstützung für ECMAScript Harmony in PhpStorm zu schätzen wissen. Wenn Sie die neuen Features testen möchten, geben Sie in den IDE-Einstellungen ECMAScript Harmony als JavaScript-Sprachversion an.
PhpStorm unterstützt die Template-Engine EJS (Syntaxhervorhebung, Eingabeunterstützung, Formatierung usw.) und bietet Formatierung und Syntaxhervorhebung für Handlebars- und Mustache-Templates sowie automatisches Schließen von Tags.
Die IDE bietet außerdem Erstunterstützung für Web Components.
Die Angular-Unterstützung in PhpStorm umfasst Codevervollständigung und Navigation für Direktiven und Bindungen sowie das Erkennen neuer Ereignisattribute für TypeScript oder ECMAScript 2015.
Flow ergänzt JavaScript um Typannotationen, die Sie bei Bedarf verwenden können. Bei annotierten Funktionen und Methoden werden die Informationen zu Parametern bei der Codevervollständigung angezeigt.
TSLint, ein Linter für TypeScript-Code, ist in PhpStorm integriert. Aktivieren Sie ihn, um Warnungen und Fehler von TSLint noch während der Eingabe direkt im Editor anzuzeigen.
Der Editor bietet Programmierunterstützung für die Template-Sprache Vue oder für eine Sprache Ihrer Wahl in den Blöcken „script“ und „style“ von .vue-Dateien. Die IDE vervollständigt automatisch Vue-Komponenten und fügt alle erforderlichen Importe hinzu.