Visual Studio Code (auch als VS Code und VSCode bekannt) ist ein kostengünstiger, aber leistungsstarker plattformübergreifender Code-Editor, der als Desktop-Anwendung entwickelt wurde. Laut dem Autor des Materials, dessen Übersetzung wir heute veröffentlichen, unterstützt VS Code viele Entwicklungstools - wie
TypeScript und
den Chrome-
Debugger . Dies und die Tatsache, dass eine unglaubliche Anzahl von Open Source-Erweiterungen geschrieben wurde, machen VS Code zu einem sehr beliebten und beliebten Editor für viele.
Wenn Sie Ihrem Arsenal an JavaScript-Programmierern etwas Neues hinzufügen möchten, hofft der Autor des Materials, dass Sie hier etwas finden, das für Sie nützlich ist. Nicht alle der hier getesteten 27 Tools sind ausschließlich für die JS-Entwicklung vorgesehen. Aber alle können erfolgreich von denen angewendet werden, die in JavaScript schreiben.
1. Projektausschnitte
Die
Project Snippets-Erweiterung , mein Favorit aller Zeiten, basiert auf dem in VS Code integrierten
User Snippets- Tool.
Wenn Sie mit dieser Standard-VS-Code-Funktion nicht vertraut sind, wissen Sie, dass der Benutzer damit seine eigenen Codefragmente in Form von sogenannten Snippets entwerfen kann. Dies geschieht, um sie in ihren Projekten wiederzuverwenden. Was bedeutet Wiederverwendung?
Betrachten Sie ein Beispiel. Angenommen, Sie müssen häufig denselben Code für das Boilerplate schreiben. Zum Beispiel - dies:
import { useReducer } from 'react' const initialState = {
Ein ähnlicher Code kann in Form eines Snippets ausgegeben werden. Anstatt alles über die Tastatur einzugeben (oder von irgendwoher zu kopieren), müssen Sie daher nur das sogenannte Präfix eingeben. Danach wird im Editor ein Code angezeigt, der diesem Präfix entspricht.
Wenn Sie in VS Code zu
File > Preferences > User Snippets , können Sie optional eine neue globale
New Global Snippets File indem Sie den
New Global Snippets File Neue globale
New Global Snippets File auswählen.
Um beispielsweise eine neue Snippet-Datei für
React- Projekte zu erstellen, die TypeScript verwenden, können Sie den
New Global Snippets File auswählen und den Dateinamen als
New Global Snippets File festlegen. Die neu erstellte
.json Datei wird im Editor geöffnet, in dem Snippets beschrieben werden können.
Erstellen Sie ein Snippet basierend auf einem Fragment des obigen Codes. Dazu muss die Datei typescriptreact.json in Folgendes konvertiert werden:
{ "const initialState = {}; const reducer = (state, action)": { "prefix": "rsr", "body": [ "const initialState = {", " //$1", "}", "", "const reducer = (state, action) => {", " switch (action.type) {", " default:", " return state", " }", "}" ] } }
Nachdem die Datei eine solche Beschreibung des Snippets enthält, können Sie eine neue TypeScript-Datei mit der Erweiterung
.tsx und das Präfix
.tsx eingeben. Dies führt zu einem Popup mit einer Beschreibung des Snippets. Durch Drücken der
Tab der Vorgang zum Einfügen eines Snippets in eine Datei abgeschlossen. Es wird durch den folgenden Code dargestellt:
const initialState = {
Einige Unannehmlichkeiten bei der Verwendung globaler Snippets bestehen darin, dass sie für alle von Ihnen entwickelten Projekte verfügbar sind (in einigen Fällen ist dies jedoch für allgemeine Snippets praktisch, im Gegenteil). Einige Projekte können jedoch auf spezielle Weise konfiguriert werden. Wenn das, was in solchen Projekten verwendet wird, nicht in allen Projekten benötigt wird, ist die globale Snippet-Datei möglicherweise nicht die beste Lösung für das Problem der Verarbeitung von Fragmenten wiederverwendbaren Codes.
Angenommen, ein Projekt verwendet eine spezielle Ordnerstruktur. Um die Arbeit an diesem Projekt zu vereinfachen, kann in der Datei
typescriptreact.json etwas Ähnliches wie der folgende Code vorbereitet werden:
{ "import Link from components/common/Link": { "prefix": "gcl", "body": "import Link from 'components/common/Link'" }, "border test": { "prefix": "b1", "body": "border: '1px solid red'," }, "border test2": { "prefix": "b2", "body": "border: '1px solid green'," }, "border test3": { "prefix": "b3", "body": "border: '1px solid magenta'," } }
Achten Sie auf den ersten Ausschnitt. Es kann durchaus für ein Projekt mit einer bestimmten Ordner- und Dateistruktur geeignet sein. Was aber, wenn wir an einem anderen Projekt arbeiten, in dem sich die
Link Komponente entlang eines Pfades wie
components/Link ?
Schauen Sie sich jetzt andere Schnipsel an. Sie verwenden einfache Anführungszeichen. Ihre Verwendung führt zum Auftreten von Strukturen wie
border: '1px solid red' im Code.
Solche Konstrukte können perfekt in JavaScript verwendet werden. Was aber, wenn wir die
Styled-Components- Bibliothek als Werkzeug für die Gestaltung eines Projekts verwenden? In diesem Fall passt eine solche Syntax nicht zu uns. In der Tat verwenden gestaltete Komponenten reguläre CSS-Konstrukte!
Tatsächlich
hilft uns hier die Erweiterung
Project Snippets .
Mit dieser Erweiterung können Sie Snippets erstellen, die auf Projekt- oder Arbeitsbereichsebene ausgeführt werden. Solche Snippets stehen nicht in Konflikt mit Snippets, die für andere Projekte erstellt wurden, und beeinträchtigen die Arbeit mit ihnen nicht. Es ist sehr bequem.
2. Bessere Kommentare
Wenn Sie Kommentare in Ihren Code schreiben möchten, werden Sie wahrscheinlich mit der Tatsache konfrontiert, dass es manchmal nicht einfach ist, einen Kommentar zu finden, der vor langer Zeit einmal geschrieben wurde. Der Grund dafür kann sein, dass der Code etwas wachsen kann.
Mit der Erweiterung "
Bessere Kommentare" können Sie Kommentare in verschiedenen Farben hervorheben.
Verwenden der Erweiterung für bessere KommentareWenn Sie jetzt unter anderem in einem Team an Code arbeiten, können Sie die Aufmerksamkeit anderer Entwickler leichter auf wichtige Kommentare lenken, beginnend mit
! oder
? .
3. Bracket Pair Colorizer
Als ich zum ersten Mal Screenshots mit den Ergebnissen der
Bracket Pair Colorizer- Erweiterung sah, wurde mir klar, dass diese Erweiterung einfach in meiner Toolbox erscheinen musste.
Das Programmieren ist meine Leidenschaft, und das Hervorheben von Klammern hilft mir definitiv dabei, diese Aktivität besser zu genießen.
Verwenden der Bracket Pair Colorizer-Erweiterung4. Materialthema
Das Material-Thema, das durch die Erweiterung Material-Thema eingeführt wurde, ist ein grandioses Phänomen, das jetzt Fans von VS Code zur Verfügung steht. Durch seine Verwendung können Sie den Code in das folgende Formular bringen.
Erstellen von Code mithilfe des Material-ThemasDies muss eines der besten existierenden Themen sein.
5. @ typescript-eslint / parser
Wenn Sie in TypeScript schreiben, sollten Sie wahrscheinlich in Betracht ziehen, Ihre TSLint-Konfigurationen auf Typoskript-Eslint umzustellen. Tatsache ist, dass
laut einigen Berichten die TSLint-Unterstützung von Palantir nach einiger Zeit eingestellt wird. Anstelle von TSLint wird dort Typoskript-Eslint verwendet.
Die Projekte wechseln allmählich zur Verwendung des Pakets @ typescript-eslint / parser und der zugehörigen Pakete. Dies geschieht, um sich auf zukünftige Veränderungen im TS-Entwicklungsökosystem vorzubereiten. Wenn Sie
Prettier mögen, können Sie dieses Tool mit den meisten ESLint-Regeln verwenden.
6. Stylelint
Stylelint ist das Werkzeug, das in meinen Projekten immer verwendet wird. Dies gilt aus mehreren Gründen:
- Es hilft, Fehler zu vermeiden.
- Es fördert Styling-Konventionen beim Schreiben von CSS.
- Es funktioniert gut mit Prettier.
- Es unterstützt CSS / SCSS / Sass / Less.
- Es unterstützt Plugins, die von der Entwickler-Community erstellt wurden.
7. Markdownlint + docsify
Ich weiß nicht, wie andere Entwickler während der Brainstorming-Sitzungen Notizen machen, aber ich mache gerne Notizen im
Markdown- Format. Dies ist ein einfaches und bequemes Format. Es stehen viele Tools zur Verfügung, mit denen Sie Markdown-Texte schreiben können. Unter diesen Werkzeugen kann
Markdownlint festgestellt werden.
Dies ist die VS-Code-Erweiterung, bei der es sich um einen Linter handelt, mit dem Stile in
.md Dateien überprüft werden können. Es unterstützt auch die Textformatierung mit Prettier.
Außerdem verwende ich normalerweise
docsify in allen meinen Projekten. Dieses Tool unterstützt das Markdown-Format und andere nützliche Funktionen.
8. TODO Highlight
Ich habe die Angewohnheit, direkt im Code Notizen darüber zu schreiben, was im Projekt getan werden muss. Aus diesem Grund interessiere ich mich für Erweiterungen wie
TODO Highlight . Diese Erweiterung hilft Ihnen beim Arbeiten mit TODO-Notizen.
9. Importkosten
Die Erweiterung
Importkosten gehört zur Kategorie der Werkzeuge, deren Nützlichkeit bei der ersten Verwendung spürbar ist. Nach längerer Verwendung eines ähnlichen Tools kann sich jedoch herausstellen, dass es nicht mehr benötigt wird. Tatsache ist, dass der Entwickler im Laufe der Zeit bereits genau weiß, welche Informationen ein solches Tool liefern. Ich empfehle jedoch weiterhin, diese Erweiterung für eine Weile zu verwenden. Es kann gut sein, dass es Ihnen zugute kommt.
10. Markieren Sie Matching Tag
Manchmal kann die Suche nach dem schließenden Teil eines bestimmten Tags zu einer schwierigen Aufgabe werden. In solchen Fällen kann die Erweiterung
Highlight Matching Tag hilfreich sein.
Verwenden der Highlight Matching Tag Extension11. vscode-spotify
Manchmal langweilt mich die Tatsache, dass ich während der Arbeit in VS Code ständig zum Musik-Player wechseln muss, um den Titel zu wechseln, und dann wieder zu meinem Geschäft zurückkehren muss.
Die
vscode-spotify-Erweiterung , mit der Sie den Spotify-Player direkt über VS Code steuern können, hilft mir, dieses Problem zu lösen.
Dank dieser Erweiterung können Sie Informationen zum abgespielten Titel in der Statusleiste des Editors anzeigen. Sie können Hotkeys verwenden, um Aufnahmen zu wechseln. Spotify kann auch über Schaltflächen über VS-Code gesteuert werden.
12. GraphQL für VSCode
Die GraphQL-Technologie erfreut sich wachsender Beliebtheit. Beispiele für ihre Anwendung finden sich in fast allen Bereichen der JavaScript-Entwicklung. Daher ist es für viele am wahrscheinlichsten,
dass die Erweiterung
GraphQL für VSCode nützlich ist.
Diese Erweiterung unterstützt das Hervorheben, Flusen und Vervollständigen von GraphQL-Syntax.
Ich benutze Gatsby oft, deshalb muss ich jeden Tag GraphQL-Code lesen. Die GraphQL for VSCode-Erweiterung hilft mir dabei.
13. Einzug-Regenbogen
Die
Indent-Rainbow- Erweiterung ähnelt der oben beschriebenen Highlight Matching Tag-Erweiterung. Wenn es Ihnen manchmal nicht leicht fällt, den Einzug zu verstehen, hilft Ihnen diese Erweiterung, das Problem zu lösen, indem sie die Lesbarkeit des Codes verbessert. Hier ist ein Beispiel für seine Verwendung.
Verwenden der Indent-Rainbow-Erweiterung14. Farbmarkierung
Color Highlight ist eine der Erweiterungen, nach denen ich gefragt werde: „Wo haben Sie sie gefunden?“. Diese Erweiterung hilft beim Arbeiten mit Farbe. Es sieht aus wie unten.
Verwenden der Farbrichterweiterung15. Farbwähler
Color Picker ist eine Erweiterung für VS Code, die dem Benutzer eine grafische Oberfläche bietet, mit der Sie Farben für die Verwendung in CSS auswählen können.
16. REST-Client
Als ich die Gelegenheit hatte, die
REST-Client- Erweiterung zum ersten Mal zu testen, schien sie mir nicht besonders nützlich zu sein. Es konnte keinen Vergleich mit so etwas wie
Postman ertragen.
Aber nach und nach stellte sich heraus, dass diese Erweiterung einen enormen positiven Einfluss auf meine Arbeit hat. Besonders wenn ich bestimmte APIs testen musste.
Wenn Sie damit arbeiten, reicht es beispielsweise aus, eine neue Datei zu erstellen, in der nur eine Zeile enthalten ist:
https:
Um die HTTP-GET-Anforderung an dieser Adresse auszuführen, wählen Sie sie einfach aus, gehen Sie zur Befehlsleiste (
CTRL + SHIFT + P ) und wählen Sie den Befehl
Rest Client: Send Request . Danach wird eine neue Registerkarte geöffnet, in der sehr bald Informationen über die Anfrage und Antwort erscheinen. Das ist sehr hilfreich.
Verwenden der REST-Client-ErweiterungMit dieser Erweiterung können Sie auch Parameter oder Daten für POST-Anforderungen konfigurieren. Dies geschieht mit nur wenigen Codezeilen:
POST https:
Eine solche Konstruktion führt zu einer POST-Anfrage mit den Parametern
{ "email": "someemail@gmail.com", "password": 1 } .
Und dies ist in der Tat nur eine äußerst präzise Beschreibung der Möglichkeiten dieser Erweiterung.
17. Einstellungen synchronisieren
Ich mochte es wirklich nicht, beim Einrichten eines neuen Arbeitsplatzes Listen der von mir verwendeten Erweiterungen zu
erstellen , sie dann in
Evernote zu speichern und dann alles manuell wiederherzustellen.
Ich konnte diesen Prozess mithilfe der Erweiterung "
Einstellungen synchronisieren" automatisieren.
Um es zu verwenden, benötigen Sie lediglich ein
Gist / GitHub- Konto. Wenn die Einstellungen gespeichert werden müssen (einschließlich Tastaturbindungen, Snippets und Erweiterungen und vielem mehr), verwenden Sie einfach die Tastenkombination
SHIFT + ALT + U Dadurch werden alle diese Einstellungen in das Hauptkonto geladen. Sie stehen jedoch nur dem Kontoinhaber zur Verfügung. Um die Einstellungen herunterzuladen, beispielsweise beim Wechsel zu einem neuen Computer, installieren Sie einfach diese Erweiterung, geben Sie die wichtigsten Kontoinformationen ein und verwenden Sie die Tastenkombination UMSCHALT
SHIFT + ALT + D18. Todo Tree
Mit der
Todo Tree- Erweiterung können Sie TODO-Kommentare in Ihrem Projektcode finden. Diese Kommentare werden im Format des Baums vorbereitet, der auf der linken Seite des Bildschirms angezeigt wird.
Verwenden der Todo Tree-Erweiterung19. Zitate umschalten
Anführungszeichen umschalten ist eine interessante Erweiterung, mit der Sie das Erscheinungsbild der im Code verwendeten Anführungszeichen ändern können. Dies erweist sich beispielsweise in Fällen als sehr nützlich, in denen Sie reguläre Anführungszeichen in Backticks (Backticks) ändern müssen. Dies kann beim Interpolieren von Zeichenfolgen erforderlich sein, und es kann besonders nützlich sein, wenn Zeichenfolgen im hübscheren Stil mit regulären einfachen Anführungszeichen verwendet werden.
Verwenden der Toggle Quotes-Erweiterung20. Besser ausrichten
Mit der Erweiterung "
Besser ausrichten" können Sie Code ausrichten, ohne ihn zuvor hervorzuheben.
Um diese Erweiterung zu verwenden, müssen Sie den Cursor in den auszurichtenden Code setzen, die Befehlsleiste öffnen (mit
CTRL + SHIFT + P oder der Tastenkombination, die Sie für diese Aufgabe zugewiesen haben) und den Befehl
Align aufrufen.
21. Tag automatisch schließen
Die
Auto Close Tag- Erweiterung hilft mir seit dem Tag, an dem ich bei VS Code angefangen habe. Sie können so etwas wie
<div> und dann das Symbol
/ eingeben und das Tag dann automatisch schließen.
Diese einfache und bequeme Funktion ist nicht in den Standardfunktionen von VS Code enthalten, daher finde ich diese Erweiterung sehr nützlich.
22. Zeilen sortieren
Ich mag keine Arrays, deren Elemente nicht in alphabetischer Reihenfolge sind. Die
Sort Lines- Erweiterung hilft mir, dieses Problem schnell zu lösen. Wenn Sie solche Arrays auch nicht mögen, kann dies für Sie nützlich sein.
23. VSCode Google Translate
Vielleicht bin ich die einzige Person, die die
VSCode Google Translate- Erweiterung nützlich findet. Aber es hilft mir, da ich an Projekten teilnehmen muss, bei denen Leute, die verschiedene Sprachen sprechen, mit mir zusammenarbeiten. Diese Erweiterung kann für diejenigen nützlich sein, die zum Übersetzen von etwas VS-Code nicht reduzieren möchten.
24. Schöner
Prettier ist eine Erweiterung für VS-Code, mit der automatisch in JavaScript, TypeScript und anderen Sprachen geschriebener Code formatiert werden kann.
25. Material Icon Theme
Ich mag die Symbole aus dem
Material Icon Theme- Paket mehr als andere. Ihre Verwendung ist viel einfacher zwischen Dateitypen zu unterscheiden. Dies gilt insbesondere für Fälle, in denen in VS Code ein dunkles Thema verwendet wird.
26. IntelliSense für CSS-Klassennamen in HTML
Mit der
Langnamenerweiterung IntelliSense für CSS-Klassennamen in HTML können Sie VS Code mit der Möglichkeit ausstatten,
CSS-Klassennamen im Klassen- HTML-Attribut automatisch zu vervollständigen. Seine Arbeit basiert auf Klassendefinitionen in Ihrem Arbeitsbereich.
27. Pfad Intellisense
Die
Path Intellisense- Erweiterung hilft dabei, die Eingabe von Dateinamen automatisch abzuschließen.
Zusammenfassung
Wir hoffen, dass es unter den Erweiterungen für VS Code, über die Sie gerade gelesen haben, etwas gibt, das für Sie nützlich ist.
Liebe Leser! Welche Erweiterungen für VS-Code würden Sie zu den in diesem Artikel beschriebenen hinzufügen?
