10 VSCode-Plug-Ins, die für eine effiziente Entwicklung unbedingt installiert werden müssen

In diesem Artikel werden 10 unbedingt zu installierende Entwicklungs-Plug-Ins für VSCode, das beliebteste Entwicklungstool für die Front-End-Entwicklung, vorgestellt, um die Effizienz der Softwareentwicklung erheblich zu verbessern.

VSCode (Visual Studio Code) ist ein kostenloser, plattformübergreifender Open-Source-Text(code)-Editor, der von Microsoft entwickelt wurde und als nahezu perfekte Softwareentwicklung angesehen werden kann für Frontend-Entwicklungstool.

Die offizielle Website ist: https://code.visualstudio.com/

10 Editor-Plug-ins müssen installiert werden

Äquivalent zu einem ergänzenden Update zum Video-Tutorial, hier sind 10 VSCode-Editor-Plug-Ins, die jeder installieren muss. Für die grundlegende Verwendung des Editors und die Installation von Plug-Ins können Sie sich direkt das Video-Tutorial oben ansehen.

1. Dateisymbole vscode-icons

Plug-in-Name: vscode-icons
Plug-in-Adresse: https://marketplace.visualstudio.com /items?itemName =robertohuertasm.vscode-icons

Damit wir beim Codieren eine effiziente und benutzerfreundliche Oberfläche haben, müssen wir zunächst einige unklare Komponenten verschönern.

Das vscode-icons-Plugin kann die Anzeige von Symbolen vor Dateien verschiedener Dateitypen optimieren, sodass wir beim Anzeigen einer langen Dateiliste schnell die Datei direkt über das Symbol erkennen können Geben Sie die Datei ein, anstatt auf das Dateisuffix zu achten.

2. Dunkles Thema One Dark Pro

Plug-in-Name: One Dark Pro
Plug-in-Adresse: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

Nach einer langen Zeit des Codierens ist es weniger wahrscheinlich, dass eine dunkle Codierungsumgebung zu einer Ermüdung der Augen führt, und das kann auch passieren machen Sie konzentrierter.

Nach der Installation des One Dark Pro-Plug-Ins können Sie die Farbe des VSCode-Editors mit einem Klick auf eine dunkle Farbe anpassen, um das Codieren komfortabler zu gestalten.

3. Code-Verschönerung Beautify

Plug-in-Name: Beautify
Plug-in-Adresse: https:// marketplace.visualstudio. com/items?itemName=HookyQR.beautify

Das Beautify-Plug-in kann Ihren Code schnell formatieren, sodass Ihre unordentliche Codestruktur beim Schreiben von Code sofort sehr regelmäßig wird, ein Muss für Code-Besessene -Zwangsstörung, besser Das Codeformat wird für die spätere Wartung und das Lesen durch andere viel praktischer sein.

Das Plug-in unterstützt viele Sprachen und deckt grundsätzlich alle aktuellen Sprachen ab. Außerdem können Sie die Struktur der Codeformatierung anpassen.

4. Code-Prüftool ESLint

Plug-in-Name: ESLint
Plug-in-Adresse: https:/ /marketplace.visualstudio .com/items?itemName=dbaeumer.vscode-eslint

ESLint ist ein Tool zur Überprüfung von Grammatikregeln und Codestilen, mit dem sichergestellt werden kann, dass Code mit korrekter Grammatik und einheitlichem Stil geschrieben wird.

Das ESLint-Plugin in VSCode integriert direkt die Funktionen von ESLint und kann nach der Installation verwendet werden. Die Details des Codeformats und der Spezifikationen können ebenfalls angepasst werden, und ein Team kann daher dieselbe Konfigurationsdatei teilen Der von jedem Teammitglied geschriebene Code kann dieselbe Codespezifikation verwenden, und jeder kann seine eigene Codespezifikationsprüfung durchführen, bevor der Code eingecheckt wird.

5. Wesentliches Debugger-Tool Debugger für Chrome

Plug-in-Name: Debugger für Chrome
Plug-in-Adresse : https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Dieses Tool ist einfach ein Muss für die Front-End-Entwicklung und wird Ihren Entwicklungs- und Debugging-Modus erheblich verändern .

In der Vergangenheit bestand das Front-End-Debugging hauptsächlich aus JavaScript-Debugging. Sie müssen den entsprechenden Codeteil in der Chrome-Konsole finden, einen Haltepunkt hinzufügen und dann das Debuggen in der Chrome-Konsole durchlaufen und den Wert anzeigen Änderungen.

Nachdem Sie Debugger für Chrome verwendet haben und der Code in Chrome ausgeführt wird, können Sie Haltepunkte direkt in VSCode hinzufügen. Nachdem Sie auf „Ausführen“ geklickt haben, wird die Seite in Chrome weiter ausgeführt, bis Sie sich in VSCode befinden. Sie können ein einstufiges Debugging direkt in VSCode durchführen.

Informationen zur Verwendung der Chrome-Debugging-Tools finden Sie im Original-Video-Tutorial „50 Essential Chrome Developer Tools Tips“, das ich auf unserem Knowledge Planet geteilt habe. Der Kurs vermittelt die wesentlichen Browser für die Front-End-Entwicklung. 50 grundlegende Nutzungs- und Debugging-Fähigkeiten bei der Verwendung des Debugging-Tools Chrome Developer Tools. Diese Kenntnisse sind wesentliche Fähigkeiten, um ein qualifizierter Front-End-Entwickler zu werden.

6. Universelle Sprachlaufzeitumgebung Code Runner

Plug-in-Name: Code Runner
Plug-in-Adresse: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Wenn Sie lernen oder sein müssen Wenn Sie verschiedenen Entwicklungssprachen ausgesetzt sind, können Sie mit dem Code Runner-Plug-in den Code der entsprechenden Sprache direkt über dieses Plug-in ausführen, ohne eine Entwicklungsumgebung für verschiedene Sprachen einzurichten. Es eignet sich sehr gut zum Erlernen oder Testen verschiedener Entwicklungssprachen .

Unterstützte Sprachen sind: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C#-Skript, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective - C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D und einige benutzerdefinierte Befehle.

Funktionen

● Codedateien über den aktuell aktiven Texteditor ausführen

● Codedateien über das Kontextmenü des Datei-Explorers ausführen

● Ausgewähltes Code-Snippet im Texteditor ausführen

● Code pro Shebang ausführen

● Code pro Dateinamen-Glob ausführen

● Einen benutzerdefinierten Befehl ausführen

● Stoppen Sie die Ausführung des Codes

● Sehen Sie sich die Ausgabe im Ausgabefenster an

● Legen Sie die Standardsprache für die Ausführung fest

● Wählen Sie die Ausführungssprache aus

● Unterstützen Sie REPL durch Ausführen von Code im integrierten Terminal

7. Kurzanmerkung Document This

Plug-in-Name: Document This
Plug-in Adresse: https://marketplace.visualstudio.com/items?itemName=joelday.docthis

Neben hervorragender Leistung und standardisiertem Format ist auch exzellenter Code unverzichtbar, und Kommentare sind ebenfalls unverzichtbar Standardsatz von Annotationsmethoden, insbesondere für Sprachen wie JavaScript.

Dokument Dies kann Ihnen schnell beim Generieren von Kommentaren helfen. Kommentare zu einigen Funktionen können Ihnen beispielsweise auch dabei helfen, die Definition von Parametern usw. zu extrahieren. Es ist ein wichtiges Werkzeug für Sie, um standardisierten Code zu schreiben.

8. IntelliSense für CSS-Klassennamen in HTML

Plug-in-Name: IntelliSense für CSS-Klassennamen in HTML
Plug-in-Adresse: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Beim Aufruf des definierten Stilnamens in HTML ist manchmal ein Wechsel erforderlich zwischen HTML- und CSS-Dateien Wechseln Sie hin und her, um die von Ihnen definierten CSS-Klassennamen anzuzeigen.

Mit dem Plug-in „IntelliSense für CSS-Klassennamen in HTML“ können Sie überall in HTML CSS-Klassennamen aufrufen, und dieses Plug-in fordert Sie auf intelligente Weise auf, definierte CSS-Klassennamen einzugeben.

Funktionen

● Ermöglicht die automatische Vervollständigung von CSS-Klassendefinitionen, die im Arbeitsbereich gefunden werden können (definiert in einer CSS-Datei oder im Abschnitt „Unterstützt“) Definiert in den Dateitypen, die im Abschnitt „Sprachmodus“ aufgeführt sind)

● Unterstützung für externe Stylesheets, auf die durch Elemente in linkHTML-Dateien verwiesen wird

● Für die manuelle erneute Zwischenspeicherung von Klassen, die in Autovervollständigungs-Definitionsbefehlen verwendet werden

● Benutzereinstellungen überschreiben, welche Ordner und Dateien vom Cache-Prozess berücksichtigt oder ausgeschlossen werden sollen

9. Code-Rechtschreibprüfung Code-Rechtschreibprüfung

Plug-in-Name: Code-Rechtschreibprüfung
Plug-in-Adresse: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Machen Sie sich nach der Installation dieses Plug-ins einfach keine Sorgen mehr. Wenn Ihr Code nun falsch geschriebene Wörter enthält, werden Sie die Vorteile erkennen, denn schließlich schreiben wir Code mit einer großen Anzahl englischer Wortvariablendefinitionen und das Plug-in kann auch Vorschläge für falsch geschriebene Wörter machen.

10. Memo-Plug-in TODO Highlight

Plug-in-Name: TODO Highlight
Plug-in-Adresse: https://marketplace .visualstudio.com/items?itemName=wayou.vscode-todo-highlight

Viele andere Code-Editoren verfügen über TODO-Annotationsfunktionen, wenn Sie beispielsweise einen bestimmten Teil des Codes schreiben Davon Die Funktion muss später implementiert werden. Auf diese Weise können Sie dem entsprechenden Code einen Kommentar vom Typ TODO hinzufügen und dann schnell zu diesem Teil springen, um später mit dem Schreiben fortzufahren. Und wenn das Projekt groß ist, wird TODO wichtiger . Nützlich, da es manchmal Dutzende von TODOs gibt, die Ihnen dabei helfen, die Funktionen zu markieren, die implementiert oder optimiert werden müssen.

Zusammenfassung

Natürlich sind die hier vorgestellten Plug-ins nur 10 der Must- Abhängig von der Sprache, die Sie entwickeln, müssen viele Tools installiert werden, die die Entwicklungseffizienz erheblich verbessern können. Sie können sie im Plug-In-Center von VSCode überprüfen, herunterladen und installieren.

Empfohlenes Tutorial: Vscode-Tutorial

Das obige ist der detaillierte Inhalt von10 VSCode-Plug-Ins, die für eine effiziente Entwicklung unbedingt installiert werden müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!