![\"released_blog_pic\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/Release_Blog_image_1280x720_-WebStorm.png\")
<\/p>\n
Wenn Sie nur ein paar Minuten Zeit haben, um die Neuerungen in WebStorm 2021.3 kennenzulernen, sehen Sie sich dieses Video<\/a> an, in dem unser Developer Advocate Paul Everitt<\/a> Ihnen die wichtigsten \u00c4nderungen vorstellt. Wenn Sie auch an den Details interessiert sind, lesen Sie einfach weiter!<\/p>\n Die neuen Funktionen und Verbesserungen fallen in diese Kategorien:<\/p>\n Wir haben eine Reihe von Verbesserungen f\u00fcr die Arbeit mit Monorepos eingef\u00fchrt. Die wichtigste \u00c4nderung: Automatisch hinzugef\u00fcgte Importe respektieren nun die Projektstruktur, indem sie jeden Ordner im Projekt mit einer package.json<\/em>-Datei als separates Paket behandeln.<\/p>\n Uns ist bewusst, dass die Performance von WebStorm in einigen Situationen nicht optimal ist, und wir arbeiten kontinuierlich daran, dies zu verbessern. Leistungsbezogene \u00c4nderungen fallen ja oft kaum auf, wenn Sie nicht gerade einen Timer oder CPU-Profiler mitlaufen lassen. In dieser Version hingegen ist es uns gelungen, deutlichere Ergebnisse zu erzielen und die Indizierungszeiten von JavaScript-Dateien um 20% zu verk\u00fcrzen.<\/p>\n Dadurch sollten Sie beim \u00d6ffnen eines neuen Projekts oder nach einem gr\u00f6\u00dferen Git-Update schneller mit der Arbeit beginnen k\u00f6nnen. Bitte beachten Sie, dass die \u00c4nderung weniger ins Gewicht f\u00e4llt, wenn Ihr Projekt haupts\u00e4chlich aus TypeScript-Dateien oder anderen Dateitypen besteht.<\/p>\n Um Remote-ES6-Module herunterzuladen, k\u00f6nnen Sie ab v2021.3 in ES6-Dateien einen Quick-Fix auf den Importpfad anwenden. Das Modul wird mit allen Abh\u00e4ngigkeiten heruntergeladen und als Projektbibliothek verkn\u00fcpft. Dies funktioniert genauso wie im Browser. Um die Funktion auszuprobieren, legen Sie die Einf\u00fcgemarke auf den Importpfad, dr\u00fccken Sie \u2325\u23ce \/ Alt+Enter<\/em> und w\u00e4hlen Sie Download module<\/em>.<\/p>\n WebStorm unterst\u00fctzt private Felder bereits seit 2018. Diese Unterst\u00fctzung basierte jedoch auf dem alten TC39-Proposal, von dem der Standard seitdem abgewichen ist. Um dem Standard zu entsprechen, haben wir die bestehende Unterst\u00fctzung von Grund auf \u00fcberarbeitet, und WebStorm 2021.3 unterst\u00fctzt jetzt private Klassenmember gem\u00e4\u00df ES2022. Wenn Sie Feldern, Eigenschaftszugriffen oder Methoden private Namen geben, die mit #<\/em> beginnen, sollte alles wie erwartet funktionieren. So funktioniert beispielsweise das Rename-Refactoring in v2021.3:<\/p>\n Zwei neue Intentions helfen Ihnen beim Strukturieren Ihres Codes in WebStorm 2021.3.<\/p>\n Sie k\u00f6nnen jetzt mit minimalem Aufwand eine kommagetrennte Liste von Elementen auf mehrere Zeilen aufteilen oder in eine Zeile bringen. Die neue Intention funktioniert f\u00fcr Array- und Objektliterale, Parameter- und Argumentlisten, XML-, HTML- und JSX-Attribute und weitere \u00e4hnliche Elemente.<\/p>\n Um die Intention auszuprobieren, legen Sie die Einf\u00fcgemarke auf die Liste, die Sie neu strukturieren m\u00f6chten und dr\u00fccken Sie \u2325\u23ce \/ Alt+Enter<\/em>. W\u00e4hlen Sie dann Put comma-separated elements on one line<\/em> bzw. Put comma-separated elements on multiple lines<\/em> aus. Bei XML, HTML und JSX sind diese Aktionen etwas anders formuliert: Put attributes on separate lines<\/em> bzw. Put attributes on one line<\/em>.<\/p>\n Die zweite neue Intention bezieht sich auf JSDoc-Kommentare. WebStorm hilft Ihnen jetzt, ein- oder mehrzeilige Kommentare mit einem Klick durch JSDoc-Kommentare zu ersetzen. Auf die verf\u00fcgbaren Kontextaktionen k\u00f6nnen Sie wie gewohnt mit \u2325\u23ce \/ Alt+Enter<\/em> zugreifen.<\/p>\n Eine weitere Verbesserung in dieser Version betrifft .js<\/em>– und .d.ts<\/em>-Dateien. Wir haben die Zuordnung zwischen diesen beiden Dateitypen verbessert und durch Randleistensymbole die Navigation zwischen ihnen vereinfacht. Weitere Details zu den \u00c4nderungen finden Sie in diesem Blogbeitrag<\/a>.<\/p>\n Im Lauf der Jahre haben wir verschiedene Funktionen<\/a> hinzugef\u00fcgt, um Ihnen zu helfen, Pakete aus der package.json<\/em>-Datei hinzuzuf\u00fcgen und zu aktualisieren und relevante Informationen zu diesen Paketen abzurufen. In dieser Version haben wir einige \u00c4nderungen vorgenommen, die Ihnen die Verwaltung von Projektabh\u00e4ngigkeiten weiter erleichtern.<\/p>\n Sie k\u00f6nnen jetzt npm-Pakete direkt im Editor auf die neueste Version aktualisieren. \u00d6ffnen Sie die Datei package.json<\/em>, legen Sie die Einf\u00fcgemarke auf die Paketversion, die Sie aktualisieren m\u00f6chten, dr\u00fccken Sie \u2325\u23ce \/ Alt+Enter<\/em> und w\u00e4hlen Sie dann Update \u2018Paketname\u2019 to the latest version<\/em>. Wenn Sie mit der Maus \u00fcber die Paketversion fahren, wird au\u00dferdem ein Quick-Fix angezeigt.<\/p>\n Standardm\u00e4\u00dfig bietet die neue Inspektion nur einen Quick-Fix, ohne veraltete Pakete in irgendeiner Weise hervorzuheben. Wenn Sie sich deutliche Hinweise w\u00fcnschen, k\u00f6nnen Sie die Severity-Stufe der Inspektion unter Preferences \/ Settings | Editor | Inspections<\/em> \u00e4ndern \u2013 suchen Sie nach dem Eintrag Update package.json dependencies<\/em>.<\/p>\n Bisher konnten Sie in WebStorm Ihre Pakete im entsprechenden Abschnitt unter Preferences \/ Settings | Languages und Frameworks | Node.js and NPM<\/em> verwalten. Da diese Art der Paketverwaltung kaum genutzt wurde, haben wir uns entschieden, diesen Abschnitt zu entfernen und mit der oben beschriebenen neuen Inspektion eine einfachere Methode f\u00fcr diese Aufgabe einzuf\u00fchren.<\/p>\n Zu guter Letzt haben wir unter Preferences \/ Settings<\/em> den Abschnitt Node.js and NPM<\/em> in Node.js<\/em> umbenannt, um Verwirrung zu vermeiden. Wie zuvor k\u00f6nnen Sie dort einen Node-Interpreter und den Paketmanager Ihrer Wahl ausw\u00e4hlen: npm, pnpm oder Yarn.<\/p>\n Letztes Jahr haben wir Unterst\u00fctzung f\u00fcr Deno in WebStorm eingef\u00fchrt. Diese Unterst\u00fctzung basierte auf der Integration von WebStorm mit dem TypeScript-Service sowie auf dem Plugin typescript-deno<\/a>. Diese Implementierung hatte mehrere Nachteile und funktionierte in letzter Zeit nicht zuverl\u00e4ssig. Aus diesem Grund haben wir die Unterst\u00fctzung komplett \u00fcberarbeitet und auf Deno LSP umgestellt. Wir haben auch eine Reihe bekannter Probleme behoben. Mehr zu den wichtigsten diesbez\u00fcglichen \u00c4nderungen erfahren Sie hier<\/a>.<\/p>\n Weitere Informationen zum Arbeiten mit Deno finden Sie in diesem Blogbeitrag<\/a>. Dieser enth\u00e4lt bereits Informationen zu den j\u00fcngsten \u00c4nderungen.<\/p>\n Eine der dringendsten Herausforderungen, die wir in dieser Version gel\u00f6st haben, ist die Unterst\u00fctzung f\u00fcr Angular\u00a013. \u00c4nderungen am Angular Package Format hatten dazu gef\u00fchrt, dass die Unterst\u00fctzung nicht funktionierte. WebStorm 2021.3 ber\u00fccksichtigt diese \u00c4nderungen und unterst\u00fctzt die neue Angular-Version.<\/p>\n Wir haben die Funktionsweise der HTML-Completion verbessert. Wenn Sie jetzt im Editor einen Tag-Namen oder eine Abk\u00fcrzung eingeben oder die Code-Completion explizit aufrufen, zeigt WebStorm sofort relevante Vorschl\u00e4ge an. Bisher wurden die Vorschl\u00e4ge nur angezeigt, nachdem Sie das <<\/em>-Zeichen eingegeben haben. Wir haben erkannt, dass dies f\u00fcr diejenigen unter Ihnen, die nicht an die Eingabe von <<\/em> und ><\/em> gew\u00f6hnt sind oder Emmet nicht kennen, nicht sehr angenehm war.<\/p>\n Au\u00dferdem sollte die Code-Completion f\u00fcr Zeichenentit\u00e4ten jetzt besser funktionieren.<\/p>\n Zwischen den Releases 2021.2 und 2021.3 haben wir eine Reihe lang erwarteter Fixes f\u00fcr Vue umgesetzt, darunter die Unterst\u00fctzung f\u00fcr script setup<\/em><\/a>. In dieser Version haben wir eine weitere n\u00fctzliche Verbesserung eingef\u00fchrt: WebStorm 2021.3 unterst\u00fctzt die TypeScript-Typpr\u00fcfung in Vue-Vorlagen. Die IDE warnt Sie, wenn in einem Ausdruck, der an eine Eigenschaft gebunden ist, der falsche Typ verwendet wird.<\/p>\n Dies funktioniert auch bei React-Attributen.<\/p>\n In dieser Version haben wir den integrierten HTTP-Client von WebStorm erheblich verbessert. Wir haben viele neue Funktionen hinzugef\u00fcgt: Der Client unterst\u00fctzt jetzt bin\u00e4re Antworten, die Ausgabeumleitung in eine benutzerdefinierte Datei oder ein benutzerdefiniertes Verzeichnis, Text- und JSON-Streams sowie HTTP-Anfrage-IDs.<\/p>\n Lesen Sie diesen Blogbeitrag<\/a>, um einen genaueren \u00dcberblick \u00fcber die Neuerungen zu erhalten.<\/p>\n Dies ist eines der gr\u00f6\u00dften und am sehnlichsten erwarteten Updates in dieser Version: WebStorm unterst\u00fctzt jetzt Remote-Entwicklungsworkflows<\/a>! Sie k\u00f6nnen eine Verbindung zu einem Remote-Rechner herstellen, auf dem ein IDE-Backend ausgef\u00fchrt wird. Das Projekt auf dem Remote-System kann genauso einfach bearbeitet werden, als w\u00fcrde es sich auf Ihrem lokalen System befinden. Wir hoffen, Ihnen mit dieser Neuerung noch mehr Produktivit\u00e4t und Flexibilit\u00e4t zu bieten und gleichzeitig ein sicheres Arbeiten zu erm\u00f6glichen, ganz unabh\u00e4ngig davon, wo Sie sich gerade befinden.<\/p>\n Die Unterst\u00fctzung f\u00fcr Remote-Entwicklungsworkflows wird durch unsere neue Anwendung JetBrains Gateway bereitgestellt. Diese erm\u00f6glicht den Zugriff auf alle Ihre Remote-Backends, ohne dass Sie eine IDE auf Ihrem lokalen Computer installieren m\u00fcssen. Sie k\u00f6nnen die neueste Version von JetBrains Gateway von unserer Website<\/a> herunterladen. Danach werden Sie von diesem Bildschirm begr\u00fc\u00dft:<\/p>\n Weitere Informationen zum Einstieg finden Sie in der Dokumentation<\/a>.<\/p>\n Bitte beachten Sie, dass sich die Remote-Entwicklung noch in der Betaphase befindet<\/strong> und weiterhin aktiv verbessert wird. Bitte probieren Sie die neue Funktionalit\u00e4t aus und teilen Sie uns Ihre Meinung mit. Sie k\u00f6nnen uns Ihr Feedback oder Ihre Fehlermeldungen hier<\/a> zukommen lassen.<\/p>\n In dieser Version haben wir einige wichtige Verbesserungen eingef\u00fchrt, um eine Docker-Installation von Node.js zu unterst\u00fctzen, die von den WebStorm-Integrationen mit JavaScript-Tools verwendet wird. Sie k\u00f6nnen jetzt Remote-Node.js-Interpreter mit ESLint, Mocha, Jest, npm, pnpm und yarn verwenden.<\/p>\n Die Unterst\u00fctzung von Remote-Node.js-Interpretern war f\u00fcr ESLint bereits seit v2021.2 als experimentelle Funktion verf\u00fcgbar. Ab sofort ist sie standardm\u00e4\u00dfig aktiviert.<\/p>\n Um die neue Funktion auszuprobieren, f\u00fcgen Sie zun\u00e4chst einen Remote-Node.js-Interpreter hinzu: \u00d6ffnen Sie unter Preferences \/ Settings | Languages & Frameworks | Node.js<\/em> die Dropdown-Liste des Feldes Node interpreter<\/em> und klicken Sie auf Add<\/em>. W\u00e4hlen Sie dann Add Remote\u2026<\/em> und geben Sie im angezeigten Dialogfeld eines der vorhandenen Docker-Images an.<\/p>\n Gehen Sie dann zu Preferences \/ Settings<\/em> zur\u00fcck und stellen Sie sicher, dass im Feld Package manager<\/em> der richtige Pfad zum Installationsordner eines Paketmanagers in Ihrem Docker-Image angegeben ist.<\/p>\n Anschlie\u00dfend k\u00f6nnen Sie zum Editor zur\u00fcckkehren und mit Node.js und Ihrem Paketmanager die Projektabh\u00e4ngigkeiten in Docker installieren. Ab diesem Punkt sollten Sie genauso weiterarbeiten k\u00f6nnen, als ob Node.js lokal installiert w\u00e4re. Wenn Sie beispielsweise eine JavaScript-Datei mit ESLint analysieren m\u00f6chten, \u00f6ffnen Sie diese Datei im Editor. Die Fehler sollten automatisch hervorgehoben werden.<\/p>\n Wir haben au\u00dferdem die Unterst\u00fctzung von Remote-Node.js-Interpretern auf Mocha-, Jest-, npm-, pnpm- und yarn-Skripte erweitert. Unter den folgenden Links finden Sie Anweisungen f\u00fcr jede der unterst\u00fctzten Technologien:<\/p>\n Sie k\u00f6nnen jetzt in Preferences \/ Settings | Tools | SSH Configurations<\/em> unter SSH configuration<\/a> einen HTTP- oder SOCKS-Proxyserver angeben.<\/p>\n Im neuen Abschnitt HTTP\/SOCKS Proxy<\/em> k\u00f6nnen Sie den Proxy-Typ ausw\u00e4hlen, einen Hostnamen und einen Port festlegen und bei Bedarf Anmeldenamen und Passwort f\u00fcr die Authentifizierung angeben.<\/p>\n Sie haben auch die M\u00f6glichkeit, Ihre SSH-Proxy-Einstellungen mit den globalen IDE-Einstellungen zu synchronisieren. Aktivieren Sie dazu das Kontrollk\u00e4stchen Use global IDE proxy settings<\/em>.<\/p>\n Sie k\u00f6nnen jetzt einfacher eine Verbindung zu Docker herstellen. Klicken Sie einfach auf den entsprechenden Knoten oder verwenden Sie die neue Tastenkombination \u2318\u23ce<\/em> auf macOS bzw. Strg+Enter<\/em> auf Windows und Linux. Auch Aktion Start container<\/em> ist \u00fcber dieses Tastenk\u00fcrzel zug\u00e4nglich.<\/p>\n Die neue Aktion Clean up<\/em> hat die gleiche Wirkung wie der Terminalbefehl prune<\/em><\/a>. Wenn Sie auf die Knoten Networks<\/em>, Volumes<\/em>, Containers<\/em> oder Images<\/em> rechtsklicken und Clean up<\/em> ausw\u00e4hlen, l\u00f6scht die IDE nicht verwendete Objekte. Sie k\u00f6nnen diese Aktion auch auf den Docker-Stammknoten anwenden, um alle nicht ben\u00f6tigten Objekte mit einem Klick zu entfernen.<\/p>\n Sie k\u00f6nnen jetzt ganz einfach aus Minikube eine Verbindung zu einem Docker-Daemon herstellen. Aktivieren Sie dazu unter Preferences \/ Settings | Build, Execution, Deployment<\/em> die Optionsschaltfl\u00e4che Minikube<\/em>. Im Feld daneben zeigt die IDE automatisch die docker-daemon-Umgebungen des erkannten Minikube an, zu denen Sie eine Verbindung herstellen k\u00f6nnen.<\/p>\n WebStorm unterst\u00fctzt Compose V2<\/a>. Dadurch k\u00f6nnen Sie Docker-Compose-Befehle als docker compose<\/em> statt docker-compose<\/em> (mit Bindestrich) ausf\u00fchren.<\/p>\n Um diese Option einzuschalten, aktivieren Sie unter Preferences \/ Settings | Build, Execution, Deployment | Docker | Tools<\/em> das Kontrollk\u00e4stchen Use Compose V2<\/em>.<\/p>\n Image-Ebenen erm\u00f6glichen die Nachverfolgung aller Befehle, die auf Images angewendet werden<\/a>. Um auf sie zuzugreifen, w\u00e4hlen Sie ein Image aus und gehen Sie zum Tab Layers<\/em>. Wenn Sie dort einen Befehl ausw\u00e4hlen, k\u00f6nnen Sie rechts auf den Link Analyze image for more information<\/em> klicken, um detaillierte Informationen zu den \u00c4nderungen zu erhalten, die auf die einzelnen Ebenen angewendet wurden.<\/p>\n Wenn Sie einen vorkonfigurierten Container sp\u00e4ter verwenden m\u00f6chten, k\u00f6nnen Sie ihn als Image speichern. Klicken Sie dazu im Services<\/em>-Toolfenster mit der rechten Maustaste auf den Container und w\u00e4hlen Sie Image | Save as a new Image<\/em>.<\/p>\n WebStorm unterst\u00fctzt jetzt Podman<\/a> als alternative Verwaltungsmethode f\u00fcr Pods, Container und Images. Bevor Sie Podman in der IDE verwenden, sollten Sie eine Verbindung konfigurieren<\/a>.<\/p>\n Sobald Podman in Ihrem Betriebssystem installiert und konfiguriert wurde, k\u00f6nnen Sie \u00fcber Preferences \/ Settings | Build, Execution, Deployment | Docker<\/em> eine Verbindung herstellen, indem Sie die Optionsschaltfl\u00e4che TCP socket<\/em> ausw\u00e4hlen und die erforderlichen Felder ausf\u00fcllen.<\/p>\n Sie f\u00fchren mehrere Konfigurationen parallel aus und m\u00f6chten die Ergebnisse gleichzeitig sehen? Teilen Sie das Run<\/em>-Toolfenster horizontal oder vertikal! Ziehen Sie dazu den gew\u00fcnschten Tab in den markierten Bereich und legen Sie ihn dort ab. Um die Teilung aufzuheben, ziehen Sie den Tab auf die Tableiste zur\u00fcck oder klicken mit der rechten Maustaste auf den oberen Fensterbereich und w\u00e4hlen im Kontextmen\u00fc den Eintrag Unsplit<\/em> aus.<\/p>\n Bisher hatten wir in WebStorm zwei sehr \u00e4hnliche Fenster \u2013 Favorites<\/em> und Bookmarks<\/em>. Da der Unterschied zwischen den beiden manchmal nicht ganz klar war, haben wir uns entschieden, nur eines zu behalten: Bookmarks<\/em>. Wir haben den Workflow f\u00fcr diese Funktionalit\u00e4t \u00fcberarbeitet und ein neues Toolfenster daf\u00fcr erstellt.<\/p>\n Von nun an werden alle Dateien, Ordner und Klassen, die Sie mit F3<\/em> (macOS) oder F11<\/em> (Windows\/Linux) als wichtig markieren, im neuen Bookmarks<\/em>-Toolfenster angezeigt.<\/p>\n Wenn Sie ein Lesezeichen hinzuf\u00fcgen, sortiert WebStorm es unter dem Knoten ein, der den Namen Ihres Projekts tr\u00e4gt. Die IDE erstellt diesen Knoten vorher automatisch und speichert dort standardm\u00e4\u00dfig alle Ihre als wichtig markierten Elemente. Neue Lesezeichen werden am Anfang der Liste unter diesem Knoten hinzugef\u00fcgt. Sie k\u00f6nnen sie jedoch manuell anordnen, indem Sie sie in neue Listen ziehen, die Sie frei benennen k\u00f6nnen.<\/p>\n Die Funktion Show Usages<\/em><\/a> hat in dieser Version eine kleine, aber praktische Verbesserung erfahren. Wenn Sie die Verwendungen eines Symbols aufgerufen haben, indem Sie \u2325\u2318F7 \/ Strg+Alt+F7<\/em> gedr\u00fcckt oder mit gedr\u00fcckter \u2318\/Strg<\/em>-Taste auf die Definition geklickt haben, k\u00f6nnen Sie jetzt die Quellcode-Vorschau f\u00fcr eine Verwendung aktivieren, indem Sie auf das quadratische Symbol klicken.<\/p>\n Bei der Suche nach Aktionen in Search Everywhere<\/em><\/a> wird WebStorm jetzt standardm\u00e4\u00dfig durch Machine Learning unterst\u00fctzt. Wir haben eine ML-basierte Formel trainiert, die Folgendes ber\u00fccksichtigt:<\/p>\n Wir hoffen, dass Sie durch die ML-basierten Modelle bessere Suchergebnisse erhalten, die auf Ihre individuellen Bed\u00fcrfnisse abgestimmt sind.<\/p>\n Das WebStorm-Terminal unterst\u00fctzt jetzt die neue ConPTY-API<\/a> unter Windows. Durch dieses neue Terminal-Backend l\u00f6sen wir mehrere Probleme, die von der alten, auf winpty<\/a> basierenden Implementierung verursacht wurden. Au\u00dferdem werden jetzt 24-Bit-Farben unterst\u00fctzt.<\/p>\n Au\u00dferdem nimmt die neue Type-Ahead-Unterst\u00fctzung Text\u00e4nderungen vorweg und zeigt sie sofort hellgrau an. Dadurch k\u00f6nnen Sie im Terminal ohne Verz\u00f6gerung tippen, egal ob es sich um ein lokales oder entferntes System handelt.<\/p>\n In dieser Version haben wir die Auffindbarkeit der Funktion Evaluate Expression<\/em> verbessert, denn fr\u00fcher wurden oft \u00dcberwachungen verwendet, wo es auch die einfachere Evaluate<\/em>-Funktion getan h\u00e4tte.<\/p>\n Das Evaluate<\/em>-Feld ist jetzt direkt im Debug<\/em>-Toolfenster zug\u00e4nglich, um die praktischste Methode zum Auswerten von Ausdr\u00fccken st\u00e4rker ins Blickfeld zu r\u00fccken.<\/p>\n WebStorm 2021.3 bietet eine neue, schnellere M\u00f6glichkeit zur Diagnose und Behebung von Problemen, die die Funktionsf\u00e4higkeit Ihrer IDE beeintr\u00e4chtigen. Wenn Sie Probleme mit WebStorm haben, rufen Sie im File<\/em>-Men\u00fc die neue Aktion Repair IDE…<\/em> auf. Diese f\u00fchrt Sie durch eine Reihe von Schritten, die verschiedene h\u00e4ufige Probleme beheben.<\/p>\n Wir haben einige Probleme mit der Barrierefreiheit behoben, um die Arbeit im Bildschirmleser-Modus komfortabler zu gestalten. Das Toolfenster-Widget-Popup und das Kurzdoku-Popup, die bisher beim \u00dcberfahren mit dem Mauszeiger erschienen, wurden deaktiviert.<\/p>\n Wir haben auch ein Problem beim Aufrufen des Popups Go to Declaration or Usages<\/em> behoben.<\/p>\n Auch unter macOS wurde die Barrierefreiheit verbessert. Wir haben mehrere Probleme mit dem Voiceover-Fokus gel\u00f6st, und Projekte k\u00f6nnen jetzt mithilfe eines Screenreaders erstellt werden. Um Ablenkungen beim Programmieren zu minimieren, haben wir die Anzahl der Hilfe-Tooltips verringert, auf die mit einem Ton hingewiesen wird.<\/p>\n Wussten Sie, dass Sie die Schriftgr\u00f6\u00dfe im Editor mit dem Mausrad \u00e4ndern k\u00f6nnen? Bisher wirkte sich diese Funktion nur auf die aktuelle Datei aus. Jetzt k\u00f6nnen Sie die Schriftgr\u00f6\u00dfe f\u00fcr alle ge\u00f6ffneten Dateien \u00e4ndern. \u00d6ffnen Sie Preferences \/ Settings | Editor | General<\/em>, aktivieren Sie Change font size with Command \/ Ctrl + Mouse Wheel in<\/em> und w\u00e4hlen Sie die Option All editors<\/em>.<\/p>\n Damit Sie Ihre Versionsverwaltung schneller konfigurieren k\u00f6nnen, haben wir die VCS-Einstellungen besser auffindbar und \u00fcbersichtlicher gestaltet. Hier sind einige der \u00c4nderungen, die Sie unter Preferences \/ Settings | Version Control<\/em> finden k\u00f6nnen.<\/p>\n Der Knoten Version Control<\/em> enth\u00e4lt jetzt alle verf\u00fcgbaren Einstellungen. Klicken Sie auf die Einstellungen, um zu ihnen zu navigieren.<\/p>\n Wir haben das Layout des Git<\/em>-Knotens verbessert. Die Einstellungen wurden in Abschnitte unterteilt, die den wichtigsten Abl\u00e4ufen entsprechen: Commit<\/em>, Push<\/em> und Update<\/em>. Au\u00dferdem sind die Parameter in diesen Abschnitten jetzt sinnvoller strukturiert.<\/p>\n Wir haben au\u00dferdem mit Directory mappings<\/em> einen separaten Knoten f\u00fcr Verzeichniszuordnungen hinzugef\u00fcgt, und die Hintergrundoperationen sind jetzt standardm\u00e4\u00dfig aktiviert. Der Knoten Background<\/em> ist nicht mehr vorhanden.<\/p>\n Manchmal kann es passieren, dass Sie mehrere ver\u00f6ffentlichungsreife Commits haben, w\u00e4hrend andere noch in Bearbeitung sind. In solchen F\u00e4llen m\u00f6chten Sie vielleicht nur Commits pushen, von deren Qualit\u00e4t Sie \u00fcberzeugt sind. Ab dieser Version von WebStorm haben Sie die M\u00f6glichkeit, einen Commit im Log<\/em>-Tab des Git<\/em>-Toolfensters auszuw\u00e4hlen und nur die Commits bis zu diesem ausgew\u00e4hlten Commit zu pushen. Um diese Funktion zu verwenden, w\u00e4hlen Sie den ben\u00f6tigten Commit aus, \u00f6ffnen Sie mit einem Rechtsklick das Kontextmen\u00fc und w\u00e4hlen Sie die Aktion Push All up to Here<\/em> aus.<\/p>\n Mit der Aktion Checkout und Rebase onto Current<\/em> k\u00f6nnen Sie den ausgew\u00e4hlten Branch auschecken und ein Rebasing auf dem aktuell ausgecheckten Branch durchf\u00fchren. Bisher war diese Aktion nur f\u00fcr lokale Branches verf\u00fcgbar. Ab v2021.3 k\u00f6nnen Sie diese Aktion auch auf Remote-Branches anwenden.<\/p>\n Bisher zeigte WebStorm den Unterschied zwischen Commits in einem separaten Dialog an. Ab dieser Version zeigt die IDE diese Informationen in einem neuen Changes<\/em>-Toolfenster an. Um das neue Toolfenster zu \u00f6ffnen, klicken Sie auf dem Log<\/em>-Tab Ihrer Versionsverwaltung mit der rechten Maustaste auf eine Revision und w\u00e4hlen Sie im Kontextmen\u00fc den Eintrag Compare with Local<\/em> aus.<\/p>\n In den Einstellungen der Diff<\/em>-Anzeige, die \u00fcber das Zahnradsymbol zug\u00e4nglich sind, haben wir die neue Option Align Changes Highlighting<\/em> hinzugef\u00fcgt. Diese Funktion verbessert die Lesbarkeit des Diffs insbesondere bei komplexen \u00c4nderungen, da die unver\u00e4nderten Zeilen so ausgerichtet werden, dass sie nebeneinander angezeigt werden. Auf diese Weise lassen sich hinzugef\u00fcgte oder entfernte Codeabschnitte klarer erkennen.<\/p>\n Dies waren nur die wichtigsten Highlights! Die vollst\u00e4ndige Liste der neuen Funktionen und Verbesserungen in WebStorm 2021.3<\/a> finden Sie in den Versionshinweisen<\/a>. Bitte teilen Sie uns Ihr Feedback mit und melden Sie eventuelle Probleme in unserem Issue-Tracker<\/a>.<\/p>\n Ihr WebStorm-Team<\/em><\/p>\n\n\n\n Autorin des Original-Blogposts:<\/p>\n\n\n \n
JavaScript und TypeScript<\/h2>\n
Verbesserte Unterst\u00fctzung f\u00fcr Monorepos<\/h3>\n
Schnellere Indizierung von JavaScript-Dateien<\/h3>\n
URL-Unterst\u00fctzung in Importanweisungen<\/h3>\n
![\"URL-Unterst\u00fctzung](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/support-for-urls-in-import-statements.png\")
<\/p>\nRefactoring-Unterst\u00fctzung f\u00fcr private Klassenmember nach ES2022<\/h3>\n
![\"Rename-Refactoring](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/rename-refactoring-private-class-members.png\")
<\/p>\nNeue Intentions f\u00fcr die Codestrukturierung<\/h3>\n
![\"Intention](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/intention-for-putting-elements-on-separate-lines-and-back-webstorm.png\")
<\/p>\n![\"Ersetzen](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/replace-with-jsdoc-comment.png\")
<\/p>\nBessere Zuordnung zwischen .js- und .d.ts-Dateien<\/h3>\n
![\"Bessere](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/mapping-between-js-and-dts-files.png\")
<\/p>\nFrameworks und Technologien<\/h2>\n
Neue Inspektion zum Aktualisieren von Abh\u00e4ngigkeiten<\/h3>\n
![\"Quick-Fix](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/update-package-in-package-json-quick-fix.png\")
<\/p>\n![\"\u00c4ndern](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/update-inspection-severity-level-package-json.png\")
<\/p>\n![\"Node.js-Abschnitt](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/node-js-section-in-preferences.png\")
<\/p>\n\u00dcberarbeitete Deno-Integration<\/h3>\n
Unterst\u00fctzung f\u00fcr Angular\u00a013<\/h3>\n
Verbesserte HTML-Completion<\/h3>\n
![\"Completion](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/html-tag-completion-webstorm.png\")
<\/p>\nTyppr\u00fcfung f\u00fcr Vue- und React-Eigenschaften<\/h3>\n
![\"TypeScript-Typpr\u00fcfung](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/vue-typescript-type-checking.png\")
<\/p>\nNeue Funktionen im HTTP-Client<\/h3>\n
![\"Bildinhalt](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/image-in-response-webstorm.png\")
<\/p>\nRemote-Entwicklung<\/h2>\n
Remote-Ausf\u00fchrung von WebStorm<\/h3>\n
![\"JetBrains](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/jetbrains-gateway-webstorm-blog.png\")
<\/p>\nEntwicklung mit einem remote installierten Node.js<\/h3>\n
![\"Einstellungen](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/node-remote-interpreter-settings.png\")
<\/p>\n\n
Proxy-Unterst\u00fctzung f\u00fcr SSH-Verbindungen<\/h3>\n
![\"HTTP\/SOCKS-Proxyeinstellungen](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/http-socks-proxy-settings-webstorm.png\")
<\/p>\nDocker<\/h2>\n
Einfacherer Verbindungsaufbau<\/h3>\n
![\"Docker-Verbindung\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/docker-connection.png\")
<\/p>\nNeue Aktion Clean up<\/em><\/h3>\n
![\"Docker-Bereinigung\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/docker-clean-up.png\")
<\/p>\nDocker-Verbindung aus Minikube<\/h3>\n
![\"docker-minikube\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/docker-minicube.png\")
<\/p>\nUnterst\u00fctzung f\u00fcr Compose V2<\/h3>\n
![\"Compose](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/compose-v2.png\")
<\/p>\nImage-Ebenen<\/h3>\n
![\"Image-Ebenen\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/image-layers.png\")
<\/p>\nContainer als Image speichern<\/h3>\n
![\"Container-Image\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/container-image.png\")
<\/p>\nPodman-Unterst\u00fctzung<\/h3>\n
Benutzererfahrung<\/h2>\n
Teilbares Run<\/em>-Toolfenster<\/h3>\n
![\"Teilbares](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/split-run-tool-window.png\")
<\/p>\nNeues Bookmarks<\/em>-Toolfenster<\/h3>\n
![\"Bookmarks-Toolfenster](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/09\/bookmarks-tool-window-webstorm.png\")
<\/p>\nQuellcode-Vorschau f\u00fcr Verwendungen<\/em><\/h3>\n
![\"Vorschau](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/preview-in-show-usages-webstorm.png\")
<\/p>\nML-basierte Suche nach Aktionen in Search Everywhere<\/em><\/h3>\n
\n
![\"ML-Aktionen](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/ml-actions-2021.3.png\")
<\/p>\n![\"ML-Aktionen](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/ml-actions-2021.2.png\")
<\/p>\nTerminal-Verbesserungen<\/h3>\n
![\"conPTY-Unterst\u00fctzung\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/conpty-support.png\")
<\/p>\nAuswertung von Ausdr\u00fccken im Debugger<\/h3>\n
![\"Auswertung](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/evaluate-expression-in-webstorm-2021-3.png\")
<\/p>\nIntegriertes Tool f\u00fcr die Fehlerbehebung<\/h3>\n
![\"Repair](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/repair_ide.png\")
<\/p>\nUpdates f\u00fcr die Barrierefreiheit<\/h3>\n
Schriftgr\u00f6\u00dfenanpassung f\u00fcr alle Tabs<\/h3>\n
![\"\u00c4ndern](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/change-font-size.png\")
<\/p>\nVersionsverwaltung<\/h2>\n
VCS-Einstellungen mit neuer Struktur<\/h3>\n
![\"VCS-Einstellungen](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/09\/webstorm-vcs-settings-2021-3.png\")
<\/p>\n![\"Git-Knoten](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/09\/git-node-in-webstorm-2021-3.png\")
<\/p>\nNeue Aktion Push All up to Here<\/em><\/h3>\n
![\"Aktion](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/10\/push-all-up-to-here-in-webstorm.png\")
<\/p>\nCheckout and Rebase onto Current<\/em> f\u00fcr Remote-Branches<\/h3>\n
![\"Checkout](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/09\/checkout-and-rebase-onto-current-for-remote-branches-webstorm.png\")
<\/p>\nNeues Changes<\/em>-Toolfenster<\/h3>\n
![\"Changes-Toolfenster\"](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/changes-window-compare.png\")
<\/p>\nHervorgehobene \u00c4nderungen ausrichten<\/h3>\n
![\"Ausrichten](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/11\/align-changes-highlighting.png\")
<\/p>\n![\"\"](\"https:\/\/secure.gravatar.com\/avatar\/?s=200&r=g\")