Fassen Sie einige wissenswerte Front-End-VSCode-Automatisierungs-Plug-Ins zusammen und teilen Sie sie

Dieser Artikel fasst einige VSCode-Automatisierungs-Plugins für Front-End-Entwickler zusammen, die die Entwicklungseffizienz für Front-End-Entwickler verbessern können. Ich hoffe, dass er für alle hilfreich ist!

Programmieren ist kompliziert. Es gibt viele Best Practices zu beachten, viele Richtlinien zu befolgen und viele „bekannte Probleme“ zu vermeiden und gleichzeitig eine hohe Produktivität und Codequalität aufrechtzuerhalten.

Der moderne Entwicklungsprozess ist immer noch relativ schwierig, wenn es keine automatisierte Arbeit gibt. In diesem Artikel stelle ich Ihnen einige VSCode-Automatisierungstechniken vor, die die Entwicklungseffizienz für Front-End-Entwickler verbessern können. [Empfohlenes Lernen: „Vscode-Einführungs-Tutorial“]

Live-Server

Wenn Sie den Code in VSCode ändern, müssen Sie im Allgemeinen den Browser manuell aktualisieren, um den Effekt zu sehen. Mit anderen Worten: Wenn Sie den Code 100 Mal aktualisieren, müssen Sie den Browser 100 Mal aktualisieren, was eine ermüdende und zeitaufwändige Aufgabe ist.

Live Server ist ein cooles Plug-in in VSCode. Es kann die oben genannten Arbeiten automatisch für Sie erledigen, sodass Sie den Browser nicht jedes Mal manuell öffnen und aktualisieren müssen. Dies erfolgt durch Live Reload Mit dieser Live Provided by Server-Funktionalität stellt diese Funktion sicher, dass Ihr Code unmittelbar nach dem Speichern gerendert werden kann. Wenn Sie außerdem die automatische Speicherfunktion von VSCode aktivieren, wird Live Reload cooler und bequemer.

Turbo Console Log

Turbo Console Log ist ein Tool, mit dem Sie automatisch Protokollinformationen schreiben können.

• Integrieren Sie automatisch aussagekräftige Protokollinformationen.
• Kommentieren und kommentieren Sie alle von Plugins im aktuellen Dokument eingebetteten Protokollmeldungen.
• Entfernen Sie alle von Plugins eingebetteten Protokollmeldungen aus dem aktuellen Dokument.

Live SASS Compiler

Kompilieren Sie Ihre SASS- oder SCSS-Dateien ganz einfach und automatisch in CSS über den Live SASS Compiler, im Handumdrehen, direkt im Code-Editor selbst und automatisch im Browser, wenn Sie eine Live-Vorschau bereitstellen Ihrer Anwendung oder kompilierter Stile wie diesen.

Live SASS Compiler ist eine praktische Erweiterung für VSCode mit vielen coolen Funktionen, darunter:

• Live SASS- und SCSS-Kompilierung.
• Schnelle Statusleistensteuerung
• Anpassbare Erweiterung (.css oder .min.css)
• Benutzerdefinierter exportierter CSS-Stil (erweitert, komprimiert, komprimiert, verschachtelt)
• Benutzerdefinierter Speicherort der exportierten CSS-Datei

Tags automatisch umbenennen

In Haben Sie bei einer Anwendung, die Hunderte oder Tausende von Codezeilen enthält, jemals ein HTML-Tag geändert und das Paar eines anderen Tags vergessen oder versehentlich geändert? Diese Art von Arbeit kann verwirrend und ineffizient sein.

Sie haben jetzt zwei Möglichkeiten: Eine besteht darin, gepaarte Tags manuell zu verwalten oder das Plug-in „Tag automatisch umbenennen“ direkt zu installieren und diese Aufgaben automatisch für Sie erledigen zu lassen.

Auto Rename Tag ist ein sehr hilfreiches Plug-in für Entwickler. Wie der Name schon sagt, aktualisiert es automatisch ein anderes Tag, wenn eines der Akzeptanz-Tags aktualisiert wird.

ESLint

Die Codeerkennung wird verwendet, um Syntaxfehler in einem Programm oder Code zu überprüfen, der nicht bestimmten Stilrichtlinien entspricht.

Und Codeerkennungstools wie ESLint ermöglichen es Entwicklern, JavaScript-Code zu erkennen, ohne ihn auszuführen Codeproblem. ESLint ist mit fast 13 Millionen Downloads eine der am häufigsten heruntergeladenen Erweiterungen für VS Code und stellt sicher, dass Sie Standard-Codierungsrichtlinien wie Positionierung, Einrückung usw. einhalten. Für diese Erweiterung müssen Sie ESLint lokal oder global auf Ihrem Computer installieren. Führen Sie einfach npm install eslint aus.

Das Folgende ist eine Demonstration von ESLint

Wenn Ihre Codegröße klein ist, ist der obige Fehler immer noch offensichtlich. Aber wenn Ihr Code mehr als hundert Zeilen umfasst. Durch die Ausführung von ESLint können Sie Probleme in Ihrem Code schnell erkennen und so die Integrität und Qualität Ihres Codes verbessern.

Prettier

Prettier, eine beliebte VSCode-Erweiterung unter Front-End-Entwicklern, hat 11 Millionen Downloads und wächst immer noch. Sie kann Ihnen dabei helfen, Ihren Code schnell zu formatieren. Drücken Sie einfach eine Taste, und die Formatierung ist abgeschlossen.

• Wenn Styleguide-Änderungen vorgenommen werden, kann Prettier automatisch auf die gesamte Codebasis angewendet werden.
• Sie müssen sich nicht die Mühe machen, die Formatierung zu korrigieren.
• Sie müssen keine Zeit damit verschwenden, Stile in Pull-Anfragen zu besprechen.
• Sie müssen die Regeln nicht im Styleguide nachschlagen.

Prettier unterstützt nicht nur JavaScript, sondern auch viele verschiedene Syntaxen, darunter TypeScript, CSS, JSON, JSX, GraphQL und mehr.

Es gibt weitere ähnliche Erweiterungen, die beliebteste davon ist Beautify! Mit ein paar Einstellungen und Konfigurationen müssen Sie sich keine Sorgen mehr über das Schreiben von hässlichem Code machen. Beautify verwandelt Ihren Code in schönen und konsistenten Code.

Pre-Commit Hooks

Bisher habe ich verschiedene Erweiterungen in VSCode besprochen, mit denen Sie Ihre Produktivität steigern können. Als letzten Teil dieses Artikels werde ich Pre-Commit-Hooks besprechen. Was sind also eigentlich Pre-Commit-Hooks? Einige von Ihnen haben vielleicht schon einmal davon gehört, andere vielleicht nicht.

Wollten Sie schon immer jedes Mal einen Befehl ausführen, wenn Sie Code festschreiben oder übertragen? Dann sind Git-Hooks genau das Richtige für Sie.

Ein Git-Hook ist ein benutzerdefiniertes Skript, das vor oder nach einem Git-Befehl ausgeführt werden kann, um manuelle Aufgaben zu automatisieren. Es gibt mehrere Git-Hooks, aber der Pre-Commit-Hook ist einer meiner Favoriten.

Hier ist eine Einführung in eine seiner großartigen Funktionen:

• Sie werden automatisch ausgeführt, bevor Sie Ihre Einreichungsinformationen eingeben.
• Das Beenden mit anderen Daten als Null führt zum Abbruch der Übermittlung.
• Pre-Commit-Hook wird verwendet, um den Snapshot zu überprüfen, der gerade festgeschrieben wird.

Durch die Verwendung von Pre-Commit-Hooks können Sie den Codestil, zusätzliche Leerzeichen am Ende und unerwünschte Importe überprüfen oder die ordnungsgemäße Dokumentation neuer Methoden prüfen.

Zusammenfassung

Ausgezeichnete Tools können Entwicklern helfen, schnelleren, saubereren und konsistenteren Code zu schreiben. Der von Microsoft eingeführte Visual Studio Code (VS Code) hat seit seiner Einführung nach und nach die Gunst vieler Menschen gewonnen.

In diesem Artikel habe ich nur einige der verschiedenen Erweiterungen und Methoden aufgelistet, die Sie in VSCode verwenden können, um Ihre Produktivität zu steigern und den Entwicklungsprozess zu automatisieren. Wenn Sie andere Erweiterungen finden, die es wert sind, geteilt zu werden, erwähnen Sie sie bitte in den Kommentaren unten.

Originalreferenz: https://blog.bitsrc.io/vscode-automations-for-frontend-developers-6c66a6f36bc6

Weitere Informationen zu VSCode finden Sie unter: vscode-Tutorial! !

Das obige ist der detaillierte Inhalt vonFassen Sie einige wissenswerte Front-End-VSCode-Automatisierungs-Plug-Ins zusammen und teilen Sie sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!