Clever Geek Handbook

Unnötige Erweiterungen für VS Code

Ich habe mir kürzlich VS Code genauer angesehen und einige interessante Ergebnisse erzielt. Wie sich herausstellte, verfügt der Editor über zahlreiche Funktionen und Einstellungen, mit denen Sie dieselben Aufgaben wie bei vielen gängigen Erweiterungen perfekt lösen können. Hier werden sechs Anwendungsbereiche von Erweiterungen behandelt, in denen diese Erweiterungen durch die Standardmechanismen von VS Code ersetzt werden können.











1. Automatisches Umbenennen und Schließen von Tags



Wir sprechen über zwei Möglichkeiten. Die erste ist die Möglichkeit, die öffnenden und schließenden Tags gleichzeitig umzubenennen. Zweitens die Möglichkeit, Tags automatisch zu schließen.





Start- und End-Tags automatisch umbenennen



▍Erweiterungen



  • Tag automatisch umbenennen (3,3 Millionen Downloads): Benennt gepaarte HTML / XML-Tags automatisch um, genau wie die Visual Studio-IDE.
  • Tag zum automatischen Schließen (3,1 Millionen Downloads): Schließt HTML / XML-Tags automatisch, genau wie bei Visual Studio IDE oder Sublime Text.


▍VS-Code-Funktionen



Die entsprechende Einstellung in VS Code hat einen etwas vagen und unverständlichen Namen. Dies ist wahrscheinlich der Grund, warum viele Menschen es nicht finden können.



  • Editor: Rename on Type: Steuert die automatische Umbenennung gepaarter Tags bei der Eingabe eines Codes. Der Standardwert ist false.


Um diese Einstellung zu finden, können Sie das Editor-Einstellungsfenster ( File > Preferences > Settings) öffnen und Editor: Rename on TypeEinstellungen in die Suchleiste eingeben .



Fügen Sie Folgendes hinzu, um diese Funktion zu aktivieren settings.json: 



"editor.renameOnType": true


Bisher werden nur HTML-Dateien unterstützt, es gibt jedoch ein offenes Problem im Projekt-Tracker hinsichtlich der Unterstützung von JSX-Dateien.



Es ist unwahrscheinlich, dass VS Code selbst dies für Vue-Dateien unterstützt. Ein ähnlicher Mechanismus wird wahrscheinlich in der Vetur-Erweiterung implementiert. Eine entsprechende Aufgabe wurde bereits im Tracker dieses Projekts geöffnet .



2. Synchronisation der Einstellungen



VS Code unterstützt jetzt die Synchronisierung von Einstellungen zwischen verschiedenen Computern. Diese Funktion ist ab VS Code Preview 1.48 (Version Juli 2020) verfügbar .



Ich erlebe jetzt diese Gelegenheit und bin immer noch auf keine Probleme gestoßen.



▍Erweiterung



  • Einstellungen synchronisieren (1,8 Millionen Downloads): Synchronisiert Einstellungen, Tastaturkürzel, Snippets, Erweiterungen, launch.json-Dateien und mehr aus dem GitHub Gist.


▍VS-Code-Funktionen



Informationen zu diesen Möglichkeiten finden Sie in der Dokumentation zu VS Code . Die Seiten mit den entsprechenden Einstellungen werden unten angezeigt.





Synchronisierungseinstellungen



Für die Synchronisierung können Sie Microsoft- oder GitHub-Konten verwenden und angeben, was synchronisiert werden soll.





Auswählen der zu synchronisierenden Elemente



3. Steuern des Imports von Modulen



Das Verwalten des Imports von JavaScript- und TypeScript-Modulen kann eine entmutigende Aufgabe sein, insbesondere wenn Sie Ihr Projekt oder Ihren Code umgestalten müssen. Entwickler bemühen sich, dies nach Möglichkeit zu automatisieren.



▍Erweiterungen



  • Automatischer Import (1,1 Millionen Downloads): Findet Modulimportbefehle automatisch und analysiert sie, bietet Mechanismen zur Code-Vervollständigung und aktiviert Code-Aktionen. Unterstützt TypeScript und TSX.
  • TS verschieben (308K-Downloads): Überwacht die Bewegung von TypeScript-Dateien und hält die zugehörigen Importbefehle im Arbeitsbereich auf dem neuesten Stand.
  • Automatischer Import - ES6, TS, JSX, TSX ( 157.000 Downloads).


▍VS-Code-Funktionen



  • JavaScript > Suggest: Auto Imports: Ermöglicht das Aktivieren oder Deaktivieren von Vorschlägen für den automatischen Import. Erfordert die Verwendung in einem TypeScript-Arbeitsbereich seit 2.6.1. Der Standardwert ist true.
  • TypeScript > Suggest: Auto Imports: Ermöglicht das Aktivieren oder Deaktivieren von Vorschlägen für den automatischen Import. Erfordert die Verwendung in einem TypeScript-Arbeitsbereich seit 2.6.1. Der Standardwert ist true.
  • JavaScript > Update Imports on File Move: Enabled: Hier können Sie auswählen, wie Modulimportpfade automatisch aktualisiert werden sollen, wenn Sie Dateien in VS Code umbenennen oder verschieben. Erfordert die Verwendung im TypeScript-Arbeitsbereich seit Version 2.9. Der Standardwert ist prompt.
  • TypeScript > Update Imports on File Move: Enabled: Hier können Sie auswählen, wie Modulimportpfade automatisch aktualisiert werden sollen, wenn Sie Dateien in VS Code umbenennen oder verschieben. Erfordert die Verwendung im TypeScript-Arbeitsbereich seit Version 2.9. Der Standardwert ist prompt.


So sehen diese Einstellungen in der Datei aus settings.json: 



"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",


Wenn Sie Ihre Importbefehle beim Speichern von Dateien organisieren möchten, benötigen Sie außerdem das folgende Setup: 



"editor.codeActionsOnSave": {
    "source.organizeImports": true
}


Seine Verwendung führt zum Entfernen nicht verwendeter Importanweisungen und zum Platzieren von Importbefehlen, sodass Befehle, die absolute Pfade verwenden, an erster Stelle stehen. Ich bin ein großer Fan solcher Mechanismen, die Sie einfach vergessen können, wenn Sie sie eingerichtet haben.



4. HTML- und CSS-Snippets



Sie könnten entscheiden, dass Folgendes für Sie nützlich wäre:



  • Verwenden Sie HTML-Vorlagen, um schnell Standardseitenbeschreibungselemente zu erstellen.
  • Erstellen Sie ein Repository mit häufig verwendeten Codefragmenten, mit denen Sie Zeit sparen können.
  • Abgekürzte Möglichkeiten zur Beschreibung großer Codeblöcke.


All dies sind ähnliche, aber leicht unterschiedliche Funktionen, die wir in diesem Abschnitt behandeln werden.



▍Erweiterungen





▍VS-Code-Funktionen



In VS Code ist die Emmet- Toolbox integriert . Diese Tools bieten Abkürzungen und Snippets für HTML und CSS. Emmet ist standardmäßig für die folgenden Dateien aktiviert: html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, lessund stylus. Weitere Informationen finden Sie in der VS-Code- Dokumentation .



Um beispielsweise einer Datei ein HTML-Markup für Vorlagen hinzuzufügen, müssen Sie nur ein Ausrufezeichen ( !) eingeben und die Taste drücken Tab.





Hinzufügen von HTML-Vorlagen zu einer Datei



Emmet unterstützt auch Verknüpfungen, mit denen Sie Gruppen von Elementen in Dokumente einfügen können. Ihre Struktur ähnelt CSS-Selektoren.



Geben Sie beispielsweise die folgende Konstruktion in die HTML-Datei ein: 



ul>li*5


Lassen Sie uns die Taste drücken Tab. Dieses Konstrukt wird in den folgenden Code konvertiert: 



<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


Wenn Sie in den Editor eingeben aund auf klicken Tab, wird die Konstruktion in den Code eingefügt <a href="">und der Cursor in die Anführungszeichen gesetzt, sodass Sie den Attributwert sofort eingeben können href.



Dies ist nur eine sehr kurze Einführung in die HTML-Funktionen von Emmet. VS Code bietet ähnliche Funktionen auch für CSS. Unter diesen Funktionen ist mein Favorit das automatische Präfix von Browser-Anbietern. Details zu Emmet finden Sie in der Dokumentation zu diesem Toolkit. Möglicherweise ist dieser Emmet-Spickzettel auch hilfreich .



Sie können vorhandene Snippets anpassen und eigene erstellen, indem Sie die Datei bearbeiten snippets.json.



Emmet unterstütztnicht nur einfaches HTML und CSS. Fügen Sie beispielsweise settings.jsonFolgendes hinzu , um Emmet beim Erstellen von Vue-Anwendungen und beim Schreiben von JavaScript-Code zu verwenden: 



"emmet.includeLanguages": {
  "vue-html": "html",
  "javascript":"javascriptreact"
}


Wenn Sie die Emmet-Unterstützung für Markdown aktivieren möchten, sollten Sie sich einer Besonderheit (oder vielmehr eines Fehlers ) bewusst sein . Es liegt in der Tatsache, dass Sie dafür emmet.excludeLanguagesein leeres Array benötigen, in das geschrieben werden soll: 



"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
  "markdown": "html"
}


Eine Diskussion dazu finden Sie hier .



5. Vorlagentext



Möglicherweise müssen Sie Platzhaltertext eingeben, während Sie an der Seite arbeiten. Dies geschieht normalerweise, um das Erscheinungsbild einer Seite zu bewerten, auf der sich Inhalte befinden. Das berühmte "Lorem ipsum" wird oft als solcher Text verwendet. Es gibt Erweiterungen, mit denen Sie diese Art von Text generieren können, aber VS Code hat sie auch.



▍Erweiterung





▍VS-Code-Funktionen



Wir haben oben erwähnt, dass VS Code über eine integrierte Emmet-Toolbox verfügt. Emmet hat eine Abkürzung zum Generieren von Platzhaltertext. Um es zu benutzen, geben Sie einfach ein loremund drücken Sie die Taste Tab. Dadurch wird automatisch ein Absatz mit 30 Wörtern generiert.





Eingabe der Abkürzung lorem



Diese Abkürzung kann nicht nur beim Erstellen eines Textabsatzes verwendet werden, sondern auch zum Generieren mehrerer Blöcke einiger Elemente. Angenommen, ein Konstruktp*2>loremwürde zu zwei Elementen führen,<p>die mit Platzhaltertext gefüllt sind: 



<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
  molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias
  officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
  Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
  recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at
  neque quos facere sequi unde optio aliquam!
</p>


6. Automatisches Entfernen von nachgestellten Leerzeichen



Normalerweise entfernen die entsprechenden Erweiterungen unnötige Leerzeichen am Zeilenende, entweder während der Codebearbeitung oder auf Befehl. Und die VS-Code-Einstellungen, die ich anstelle solcher Erweiterungen vorschlage, sollen beim Speichern von Dateien Leerzeichen entfernen.



▍Erweiterungen



  • Nachgestellte Leerzeichen (447K-Downloads): Ermöglicht das Hervorheben und Entfernen von nachgestellten Leerzeichen.
  • Autotrim ( 15.000 Downloads): In der Beschreibung für diese Erweiterung heißt es: „Nach dem Bearbeiten von Code, nach dem Entfernen von Konstrukten am Zeilenende und nach dem Ausführen anderer ähnlicher Aktionen werden häufig nachgestellte Leerzeichen angezeigt . Diese Erweiterung überwacht den Code-Bearbeitungsprozess und speichert die Zeilennummer, in der sich der aktive Cursor befindet. Nachdem sich in dieser Zeile kein aktiver Cursor mehr befindet, werden nachfolgende Tabulatoren und Leerzeichen entfernt. "


▍VS-Code-Funktionen



  • Files : Trim Trailing Whitespace: Wenn diese Funktion aktiviert ist, werden beim Speichern von Dateien nachgestellte Leerzeichen entfernt. Der Standardwert ist false.


Um diese Funktion zu aktivieren, settings.jsonkönnen Sie Folgendes hinzufügen: 



"files.trimTrailingWhitespace": true


Ergebnis



Bevor Sie ein Problem in VS Code lösen müssen, suchen Sie nach einer geeigneten Erweiterung und finden Sie heraus, ob es unter den Standardfunktionen von VS Code ein Tool zur Lösung Ihres Problems gibt. Es scheint ziemlich offensichtlich, aber wir haben wahrscheinlich alle manchmal genau das Gegenteil getan. In VS Code werden regelmäßig neue Funktionen angezeigt. Daher empfiehlt es sich, von Zeit zu Zeit das Änderungsprotokoll für diesen Editor zu überprüfen.



Versuchen Sie, wann immer möglich, die Standardfunktionen von VS Code anstelle von Erweiterungen zu verwenden?





More articles:


All Articles