Visual Studio-Code-Erweiterungen. Nützliche Plugins für Visual Studio Code. Die Fortsetzung steht nur Mitgliedern zur Verfügung
Visual Studio-Code Ist ein kostenloser plattformübergreifender Texteditor, der von entwickelt wurde Microsoft... Aufgrund seiner hervorragenden Leistung und der Vielzahl an Funktionen wird es schnell zum Liebling aller.
Wie die meisten IDEs verfügt VSCode über einen eigenen Erweiterungsspeicher, der Tausende von Plugins unterschiedlicher Qualität enthält. Um Ihnen bei der Auswahl der herunterzuladenden Dateien zu helfen, haben wir diese Sammlung von Erweiterungen erstellt, die wir am nützlichsten und interessantesten fanden.
VSCode bietet keine integrierte Schnittstelle zum Öffnen von Dateien direkt im Browser. Diese Erweiterung fügt dem Kontextmenü den Kontextmenüpunkt "Im Browser öffnen" sowie Befehle zum Öffnen im ausgewählten Client (Firefox, Chrome, IE) hinzu.
Quokka ist ein Debugging-Tool, mit dem Sie direktes Feedback zu dem von Ihnen geschriebenen Code erhalten. Es zeigt eine Vorschau der Ergebnisse von Funktionen und berechneten Werten für Variablen. Die Erweiterung ist hochgradig anpassbar und funktioniert sofort mit JSX- oder TypeScript-Projekten.
Fügen Sie mit der beliebten JavaScript Faker-Bibliothek schnell Platzhalterdaten ein. Sie können zufällige Namen, Adressen, Bilder, Telefonnummern oder nur Absätze des klassischen Lorem Ipsum erstellen. Jede Kategorie hat unterschiedliche Unterkategorien, sodass Sie die Daten an Ihre Bedürfnisse anpassen können.
Mit dieser Erweiterung können Sie die Definitionen von CSS-Klassen und -IDs in Ihren Stylesheets verfolgen. Wenn Sie mit der rechten Maustaste auf den Selektor in Ihren HTML-Dateien klicken, wählen Sie die Optionen Gehe zu Definition. Die Peek-Definition sendet Ihnen das CSS, in dem Sie sie erstellt haben.
Durch das Erweitern der HTML-Vorlage ersparen Sie sich das mühsame manuelle Schreiben der Kopf- und Körper-Tags eines neuen HTML-Dokuments. Geben Sie einfach HTML in eine leere Datei ein, drücken Sie die Tabulatortaste und eine saubere Dokumentstruktur wird erstellt.
Schöner ist das beliebteste Codeformat unter Webentwicklern. Dadurch kann Ihr Teamcode unabhängig von der Person, die ihn geschrieben hat, gleich aussehen. Mit dieser Erweiterung können Sie sich automatisch bewerben Schöner und schnell alle Dokumente formatieren Js und CSS... Wenn Sie auch verwenden möchten ESLint, es gibt Schöner - Eslint.
Ein kleines Plugin, das Ihnen verschiedene Informationen zu den Farben gibt, die Sie in Ihrem CSS verwendet haben. Bewegen Sie die Maus über eine Farbe, um ein großes Fenster mit dieser Farbe sowie deren Codierung in allen Formaten (hex, rgb, hsl und cmyk) anzuzeigen.
Dieses Tool markiert alle Kommentare MACHEN in Ihrem Code, damit Sie unfertige Teile leicht finden können, bevor Sie mit der Produktion beginnen. Standardmäßig wird nach Schlüsselwörtern gesucht MACHEN und FIXMESie können aber auch eigene Ausdrücke hinzufügen.
Winzige Schnipsel zum Einfügen von Symbolschriftarten in Ihr Projekt (aus dem CDN) und zum Hinzufügen der Symbole selbst. Die Erweiterung unterstützt über 20 beliebte Symbolsätze, einschließlich Schriftarten Genial, Ionicons, Glyphicons und Material Design Icons.
Erweiterung zur Code-Minimierung. Es bietet eine Vielzahl von Anpassungsoptionen und die Möglichkeit, beim Speichern und Exportieren in eine .min-Datei automatisch zu minimieren. Minify funktioniert mit JavaScript, CSS und HTML über uglify-js, clean-css bzw. html-minifier.
VSCode hat begrenzte Möglichkeiten zum Konvertieren von Text. Standardmäßig können nur Konvertierungen in Klein- und Großbuchstaben durchgeführt werden. Dieses Plugin fügt viele weitere Befehle zum Ändern von Zeichenfolgen hinzu, darunter camelCase, kebab-case, snake_case, CONST_CASE und andere.
Ein nützliches Tool zum Testen Ihrer regulären Ausdrücke. Es funktioniert, indem ein Muster mit regulären Ausdrücken auf jede im Editor geöffnete Textdatei angewendet wird, wobei alle Übereinstimmungen hervorgehoben werden. Als ob RegExraber direkt in Ihrem Editor!
Der Haupteditor, den ich zum Schreiben von Code verwende, ist Visual Studio Code (abgekürzt als VSCode). Davor habe ich im Sublime Text Editor gearbeitet, den ich zwei Wochen nach Beginn der Verwendung von VSCode vollständig entfernt habe, einfach weil VSCode viel cooler und schneller ist.
In diesem Artikel möchte ich Sie über die besten Erweiterungen für den VSCode-Editor informieren, die ich selbst verwende, und ich rate Ihnen, Ihre Aufmerksamkeit auf sie zu lenken.
VSCode implementiert die Suche und Installation von Erweiterungen direkt im Editor. Öffnen Sie einfach das Erweiterungsfenster und geben Sie den Erweiterungsnamen oder ein Schlüsselwort (Tag) in die Marketplace-Suche nach Erweiterungen ein. Der Editor sucht sofort und bietet Ihnen Optionen für Ihre Suchanfrage.
Standardmäßig ist das Emmet-Plugin bereits in VSCode installiert. Lesen Sie jedoch weiter, welche Erweiterungen installiert werden sollten, um Ihre Arbeit schneller und komfortabler zu gestalten.
Erweiterungen für Visual Studio Code
Projektmanager - Projektmanager
Dies ist das erste, was im VSCode-Editor installiert werden muss. Der Autor dieser Erweiterung, Alessandro Fragnani, ist ein erfahrener Entwickler mit mehr als einem Dutzend Erweiterungen für VSCode.
Mit der Erweiterung können Sie problemlos auf Ihre Projekte zugreifen, unabhängig davon, wo sie sich befinden. Sie können Ihre eigenen Lieblingsprojekte definieren oder VSCode-, Git-, Mercurial- und SVN-Repositorys oder beliebige Ordner automatisch erkennen.
Im Allgemeinen können Sie jeden Ordner auf Ihrem Computer zu einem Projekt machen und mit dieser Erweiterung schnell zwischen Ihren Projekten wechseln oder sie in einem neuen Editor öffnen.
Ich habe persönlich zur Entwicklung der Projektmanager-Erweiterung beigetragen - sie mehrsprachig gemacht und Russisch hinzugefügt, sodass sie jetzt auf Russisch verfügbar ist.
Lesezeichen - Lesezeichen
Eine weitere Erweiterung für VSCode von Alessandro Fragnani.
Mit der Erweiterung können Sie die Zeilen der Datei mit einem Lesezeichen versehen, was durch eine Beschriftung in den Feldern angezeigt wird.
Lesezeichen haben eine eigene Explorer-Leiste und ein Symbol in der linken Menüleiste für den schnellen Zugriff auf Lesezeichen. Sie können eine unbegrenzte Anzahl von ihnen hinzufügen.
Um die Navigation in den Lesezeichen zu vereinfachen, habe ich häufig einen Lesezeichen in einen Kommentar eingefügt. Unten sehen Sie ein Beispiel auf dem Bildschirm - ein Lesezeichen befindet sich in der Zeile mit den Kommentarschaltflächen und im Lesezeichen-Explorer mit Schaltflächen gekennzeichnet. Ich finde es praktisch:
Neben dem Projektmanager habe ich zur Entwicklung dieser Erweiterung beigetragen - sie mehrsprachig gemacht und Russisch hinzugefügt.
Die Erweiterung bietet die Möglichkeit, HTML-Dateien schnell im Browser zu öffnen.
Mit dieser Erweiterung müssen Sie nicht lange herumspielen, um die Datei im Browser zu öffnen.
Wenn die Datei im Editor geöffnet ist und sich in einem aktiven Zustand befindet, drücken Sie einfach die Tastenkombination Alt + B. Die Datei wird im Standardbrowser geöffnet.
Wenn Sie die Tastenkombination Umschalt + Alt + B drücken, wird in der Befehlszeile des Editors eine Liste von Browsern angezeigt, in der Sie auswählen können, in welchem \u200b\u200bbestimmten Browser Sie die Datei öffnen möchten.
Sie müssen sich nicht an die oben genannten Tastenkombinationen erinnern - drücken Sie einfach die rechte Maustaste und es gibt entsprechende Elemente im Kontextmenü, um die Datei im Standardbrowser zu öffnen oder einen Browser aus der Liste auszuwählen. Darüber hinaus können Sie nicht nur aktive Dateien (im Editor geöffnet) öffnen, sondern auch Dateien aus dem Explorer-Bereich.
Pfad Intellisense
Pfad Intellisense ist ein Plugin für Visual Studio Code, das Dateinamen automatisch ausfüllt.
Eine ähnliche Erweiterung für Path Autocomplete.
Führt die gleiche Funktionalität aus wie Pfad Intellisensedurch Hinzufügen des Pfads und der Dateinamen.
Derzeit habe ich deaktiviert Pfad Intellisense, aber enthalten. Ich teste, welche dieser beiden Erweiterungen schneller reagiert und Hinweise zur Intelligenz gibt. Ich mag es zwar besser, aber der Eindruck ist, dass es schneller ist.
dateigröße
Diese Erweiterung zeigt die Größe der aktiven Datei in der Statusleiste des Editors an.
Ich habe in den VSCode-Optionen nach einer Einstellung gesucht, um die Dateigröße anzuzeigen, konnte sie jedoch nicht finden. Dieses kleine Dienstprogramm löst dieses Problem und zeigt Informationen zur Dateigröße in der Statusleiste des Editors an.
htmltagwrap
Diese Erweiterung umschließt die Auswahl mit HTML-Tags.
Es ist ganz einfach: Wählen Sie ein Fragment oder eine Zeile und den Befehl mit der Tastenkombination Alt + W aus
Wenn Sie sich an den Befehl gewöhnt haben und sich daran erinnern, ist er sehr cool.
Aktive Datei in der Statusleiste
Zeigt den Pfad zur Datei in der Statusleiste des Editors an. Beim Klicken - kopiert den Pfad zur Datei in die Zwischenablage.
Bracket Pair Colorizer
Mit diesem Plugin können Sie für jedes Klammerpaar eine Farbe festlegen, mit der Sie Verschachtelungs- oder bedingte Regeln im Code visuell steuern können. Funktioniert für Klammern (), geschweifte () und eckige Klammern.
Vor der Installation dieses Plugins hatte ich Probleme beim Schließen von Klammern. Jetzt kann ich die Verschachtelung von Klammern nach Farbe sehen.
Datei- und Ordnersymbole
VSCode einfachere Symbole mit Angular
Dies ist eine Sammlung von Symbolen für Dateien. Ich habe die Symbole viel überprüft, mich aber für diese Versammlung entschieden, tk. Hier sind gestaltete Ordner nur für node_modules und bower. In anderen Assemblys haben verschiedene Ordner (zum Beispiel: Bilder, JS, CSS usw.) ihre eigenen schönen Symbole, aber gleichzeitig ist es schwierig, einen Ordner schnell von einer Datei zu unterscheiden, aber hier ist alles einfach - im Baum der Ordner und Dateien sehe ich deutlich, wo sie geöffnet sind Ordner, und wo ist geschlossen.
Auf dem Marktplatz gibt es viele ähnliche Sets, sodass Sie sich selbst davon überzeugen und die für Sie geeigneten Symbolstile auswählen können. Sie können viele Sammlungen gleichzeitig platzieren. Das Ändern von Symbolen ist einfach - die Einstellung zum Ändern von Symbolen finden Sie im Menü des Zahnrads unten in der Symbolleiste:
Wähle einen Gegenstand Dateisymbol-Thema und Ihre installierten Dateisymbolthemen werden in der Befehlszeile des Editors angezeigt. Drei Standardthemen von VSCode und was Sie hinzufügen. Verwenden Sie in der Liste einfach die Aufwärts- und Abwärtspfeile, um durch die Themen zu scrollen. Die Symbole werden sofort angewendet und im Datei-Explorer angezeigt. So schnell finden Sie das Thema, das Ihnen gefällt.
Ich wiederhole, dass mir das Thema gefallen hat VSCode einfachere Symbole mit Angular
Startet einen lokalen Entwicklungsserver mit einer aktiven Neuladefunktion für statische und dynamische Seiten.
Zu diesem Zweck befindet sich in der Statusleiste des Editors eine Startschaltfläche. Nachdem Sie darauf geklickt haben, wird die Datei im Browser geöffnet und die Änderungen in den Dateien überwacht. Lädt die Seite beim Ändern von Dateien automatisch neu im Browser.
Persönlich bevorzuge ich die Arbeit mit Browsersync über Gulp, das schneller und funktionaler ist und weniger Lasten erzeugt. Da Gulp jedoch nicht immer in jedem Projekt installiert ist, muss der Live-Server erweitert werden.
Profilerweiterungen für VSCode
Und jetzt werde ich eine Liste von VSCode-Erweiterungen für bestimmte Richtungen anbieten.
Arbeiten mit Git und Github
Zusätzlich zu der Tatsache, dass VSCode standardmäßig mit Git arbeitet, gibt es auf dem Marktplatz viele Erweiterungen für jeden Geschmack bei der Arbeit mit Git und Github. Ich stehe so:
Git-Verlauf, GitLens, Git Merger, GitHub Pull-Anfragen
RemoteFS
Mit dieser Erweiterung können Sie über FTP- und SFTP-Protokolle eine Verbindung zum Server herstellen.
Um eine Website oder ein Projekt auf dem Server zu öffnen, müssen Sie lediglich die folgende Einstellung in die Datei settings.json einfügen:
"remotefs.remote": ("erste Site": ("Schema": "FTP", "Host": "Host", "Port": 21, "Benutzername": "FTP-Anmeldung", "Passwort": "Passwort" "," rootPath ":" / "," connectTimeout ": 10000)," zweite Site ": (" Schema ":" ftp "," Host ":" Host "," Port ": 21," Benutzername ":" FTP-Benutzer "," Passwort ":" Passwort "," rootPath ":" / "," connectTimeout ": 10000))
Verbindungsdaten erhalten Sie von Ihrem Hosting im Abschnitt FTP-Benutzer... Ich habe speziell das Layout der Verbindung für zwei Standorte gezeigt. Nach diesem Schema können Sie mit verschiedenen Protokollen (FTP oder SFTP) beliebig viele Standorte verbinden.
Webbasierte Texteditoren boomt. Atom, VS Code, Brackets werden wie Rock-Monster bei Webentwicklern immer beliebter (Moment, in welchem \u200b\u200bJahr stehen die "beliebten Rock-Monster" jetzt im Kalender? 🙂 - Ed.). Sie wechseln sowohl von IDEs als auch einfach von nativen Editoren zu ihnen. Der Grund ist sehr einfach: In den Repositorys wimmelt es nur so von nützlichen Plugins, und jeder kann die fehlenden Plugins unabhängig mithilfe von reinen Webtechnologien erstellen.
Die Anzahl der Erweiterungen in den offiziellen Repositories wächst ständig. Damit Sie sich nicht darin verlieren, haben wir für Sie eine Liste der beliebtesten Plugins vorbereitet, die die Webentwicklung vereinfachen.
Nach dem Geschmack des Autors
Mit freundlichen Grüßen haben Sie wirklich alle aufgelisteten Editoren verwendet und sich für VS Code entschieden. Dafür gibt es mehrere Gründe, aber der Hauptgrund ist die Leistung. Microsoft hat großartige Arbeit geleistet und es trotz der späten Veröffentlichung (VS Code war der letzte, der in der Szene auftauchte) geschafft, eine riesige Community um sich zu sammeln. Dies hat sich positiv auf Plugins ausgewirkt: Einige von ihnen liegen meiner Meinung nach über den Alternativen für Atom. In diesem Zusammenhang enthält der Text der Überprüfung die Namen der Erweiterungen speziell für VS Code. Ein Link zu einer ungefähren Funktionalität für Atom wird unten angegeben. Seien Sie nicht überrascht, wenn Sie den Namen des Plugins kopieren und das Atom-Repository durchsuchen und nichts finden. Verwenden Sie die Links aus der Beschreibung.
Gründe für die Popularität
Webbasierte Editoren haben ungefähr die gleichen Probleme. Eine der wichtigsten ist die Leistung. Die Entwickler arbeiten an der Geschwindigkeit der Editoren, aber seien wir ehrlich - dieses Problem wird wahrscheinlich nicht zu 100% gelöst. Native Lösungen übertreffen immer noch die Leistung, und dies sollte bei der Auswahl eines Editors berücksichtigt werden.
Okay, die Leistung nativer Lösungen ist unübertroffen. Wie haben dann die neu geprägten "leichten" Editoren so viele Herzen der Entwickler gewonnen? Das Hauptargument "für" ist der Technologie-Stack. Was bedeutet es, ein Plugin für Sublime oder Notepad zu entwickeln? ? Das stimmt, du musst dich mit C auseinandersetzen, Python (hier kann jede andere Programmiersprache verwendet werden), SDK-Editor und andere Dinge, die für die Hauptarbeit nicht erforderlich sind.
Welcher Webentwickler würde diesem Kunststück zustimmen? Er hat genug von seinen eigenen Sorgen und Technologien (eine echte Revolution der Lösungen findet im Frontend statt). Es stellte sich heraus, dass das Ökosystem der Plugins für Webentwickler für native Editoren immer unter dem Mangel an speziellen Lösungen gelitten hat.
Die Idee, webbasierte Editoren für Meister derselben Technologien zu erstellen, löste effektiv das Problem des schlechten Ökosystems von Modulen von Drittanbietern. Webentwickler von Drittanbietern sprangen schnell auf die Welle und begannen, die benötigten Gadgets zu erstellen. Die Ergebnisse sind leicht zu verfolgen - die offiziellen Repositories sind mit Plugins für eine Vielzahl von Aufgaben gefüllt. Es wurde einfacher, neue Plugins zu erstellen: Sie müssen keine fremde Programmiersprache mehr lernen, JavaScript reicht aus.
Leider müssen Sie für die einfache Anpassung der Funktionen des Editors an Leistung und Ressourcen bezahlen. Leichte Editoren erfordern häufig mehr Systemressourcen und sind nicht bereit, in ihrer Leistung mit nativen zu konkurrieren. Während des Tests gelang es Atom mit einer Reihe von Erweiterungen, WebStorm beim Speicherverbrauch zu überholen.
Schnipsel
Snippet-Plugins sind eine separate Klasse von Erweiterungen für Editoren. Sie sind sehr beliebt und fast jedes moderne Framework oder jede moderne Bibliothek in den Repositories hat einen individuellen Vorschlag. Schnipsel sparen Zeit. Möchten Sie eine Klassenvorlage beschreiben? Kein Problem, geben Sie einfach ein paar Zeichen ein und erhalten Sie ein paar Zeilen fertigen Codes. Es macht keinen Sinn, Snippet-Plugins im Detail zu analysieren - es gibt zu viele davon. Hier sind einige Links zu Snippet-Plugins, die auf gängigen Technologien basieren. Sie werden die Vermissten selbst finden.
VS-Code:
Atom:
HTML-Wrapper
Wenn Sie das Layout einer Seite beschreiben, müssen Sie ständig Blöcke umbrechen, dh einen Block in einen anderen verschachteln. Ich habe das Markup für den Block geschrieben und dann festgestellt, dass es für das Styling besser ist, es in einen zusätzlichen Block zu wickeln. Das geht ganz einfach: Wir schreiben das Eröffnungs-Tag ganz am Anfang, scrollen den Block bis zum Ende und setzen das Schluss-Tag. Es gibt nur ein Problem - es ist unpraktisch, dies bei großen Blöcken zu tun. Es besteht jede Möglichkeit, die "Abdeckung" an der falschen Stelle anzubringen und die Markierungen zu brechen. Ein ähnliches Problem tritt beim Stylen einzelner Textteile auf. Versuchen Sie, schnell mehrere öffnende und schließende Tags einzufügen und nicht verrückt zu werden. Plugins helfen Ihnen bei der Bewältigung von Schwierigkeiten htmltagWrap und Atom Wrap-In-Tag... Mit ihrer Hilfe wird die Lösung darauf reduziert, einen Code / eine Zeile hervorzuheben und eine Kombination von Tastenkombinationen zu drücken.
- VS-Code: htmltagwrap
- Atom: Atom Wrap-In-Tag
Gewöhnung an Hotkeys
Wenn Sie zu einem neuen Editor / einer neuen IDE wechseln, haben Sie immer das gleiche Problem: Sie müssen neue Hotkeys lernen. Ich habe mich gerade an eine Kombination gewöhnt, wie bam - und alles ist anders. Sie verbringen mehr Zeit mit gewohnheitsmäßigen Handlungen als gewöhnlich und fragen sich erneut, ob es ratsam ist, überhaupt auf etwas Neues umzusteigen. Ich bin mir sicher, dass Entwickler, die ihre Karriere vor 10 bis 15 Jahren begonnen haben, wiederholt darauf gestoßen sind. Daher werden sie die Leistung von Plug-Ins mit Tastenkombinationen beliebter Redakteure auf jeden Fall zu schätzen wissen. Das Fazit ist einfach: Sie gewöhnen sich an das Layout der Visual Studio-Hotkeys - Sie laden das entsprechende Plugin herunter und der neue Editor reagiert auf die bekannten Befehle.
VS-Code:
Atom:
Autocomplete für Dateien
Standardmäßig bietet keiner der Editoren die automatische Vervollständigung von Dateinamen zur Verbindungszeit. Dies ist häufig die Ursache für Fehler. Sie müssen sich den vollständigen Pfad zum Speicherort der Datei merken. Wenn das Projekt komplexer als Hello World ist, werden die Dateien in mehreren Verzeichnissen gruppiert, und Sie müssen die Dienste eines Dateimanagers verwenden, um den Pfad anzugeben. Nicht sehr bequem. Es ist einfacher, die automatische Vervollständigung mithilfe der Plugins AutoFileName und Autocomplete + zu verbinden. Dann müssen nur noch die ersten Buchstaben des Datei- / Verzeichnisnamens eingegeben werden. Danach bietet das Plugin Optionen zum Ersetzen an.
- VS-Code: AutoFileName
- Atom: Vorschläge für die automatische Vervollständigung + Pfade
Linters
Der moderne Entwicklungsprozess ist ohne Automatisierung nicht denkbar. Wenn etwas automatisiert und auf Werkzeuge übertragen werden kann, lohnt es sich, dies zu tun. Nirgendwo ohne alle Arten von Lintern im Frontend. Wenn Sie also am nächsten Projekt arbeiten, müssen Sie sich sofort darum kümmern, Lösungen wie ESLint, HTMLHint, CSSLint, zu verbinden.<твой_линтер>... Linters steuern den Schreibstil des Codes und weisen bei Inkonsistenzen mit der Konfiguration sofort auf Fehler hin.
Linters sind besonders nützlich bei der Teamentwicklung, wenn die Chancen, "bunten" Code zu erhalten, erheblich steigen. Suchen Sie nach Beispielen? Bitte schön! Unter JS-Entwicklern gibt es eine ständige Debatte über die Wahl von Anführungszeichen. Einige sind Anhänger von Singles, andere sind doppelt und wieder andere unterstützen die Idee des Gegenteils. Linters helfen Ihnen dabei, Konsistenz zu erreichen und Entwickler zu alarmieren, die sich rechtzeitig verirrt haben.
Die Fortsetzung steht nur Mitgliedern zur Verfügung
Option 1. Treten Sie der "Site" -Community bei, um alle Materialien auf der Site zu lesen
Durch die Mitgliedschaft in der Community während des angegebenen Zeitraums erhalten Sie Zugriff auf ALLE Hacker-Materialien, erhöhen Ihren persönlichen kumulierten Rabatt und können einen professionellen Xakep-Score sammeln!
Visual Studio Code ist ein kostenloser, plattformübergreifender Texteditor von Microsoft, der aufgrund seiner Leichtigkeit, leistungsstarken und erweiterbaren Funktionalität und natürlich "Werbegeschenk" im Gegensatz zu PHPStorm, Sublime usw. populär geworden ist.
Wie die meisten modernen IDEs VSCode verfügt über viele Add-Ons, die die ursprünglichen Funktionen erweitern. Wir haben 15 Plugins ausgewählt, die für jeden Programmierer, der in diesem Editor arbeitet, nützlich sind.
Open-In-Browser
Standardmäßig in Visual Studio-Code Es gibt keine Möglichkeit, die Datei im Browser zu öffnen. Diese Erweiterung fügt nicht nur die Funktion "Im Browser öffnen" hinzu, sondern ermöglicht Ihnen auch das Öffnen von Dateien in jedem auf Ihrem Computer installierten Browser.
Quokka
Quokka - Ein Dienstprogramm, mit dem Sie eine Vorschau des Ergebnisses der Ausführung eines bestimmten Codeteils anzeigen und die Ergebnisse der Ausführung von Funktionen sowie die berechneten Werte von Variablen anzeigen können. Die Erweiterung ist einfach zu konfigurieren und funktioniert sofort mit JSX oder Typoskript Projekte.
Schwindler
Ermöglicht das schnelle Einfügen zufälliger Daten (beliebige Namen, Adressen, Bilder, Telefonnummern usw.) in den Code. Jede Kategorie hat ihre eigenen Unterabschnitte, mit denen Sie sich genauer an die Bedürfnisse des Programmierers anpassen können.
CSS Peek
Mit diesem Plugin können Sie Klassendefinitionen und IDs in einer CSS-Datei verfolgen. Klicken Sie dazu mit der rechten Maustaste auf den Selektor in Ihrer HTML-Datei und wählen Sie Gehen Sie zur Definition (Zur Definition gehen) oder Peek Definition (Sehen Sie sich die Definition an).
HTML Boilerplate
HTML Boilerplate Vereinfacht die Arbeit mit HTML, da die Kopf- und Körper-Tags nicht mehr selbst geschrieben werden müssen. Geben Sie eine leere HTML-Datei ein, drücken Sie die Tabulatortaste und Visual Studio-Code generiert eine Dokumentvorlage!
Schöner
Schöner Ist ein beliebter Code-Editor unter Webentwicklern, mit dem Sie von verschiedenen Personen geschriebenen Code in ein einziges Formular bringen können. In den Einstellungen Schöner Sie können Autorun einstellen, wodurch der in JS und CSS geschriebene Code sofort formatiert wird.
Farbinfo
Ein kleines Plugin, das einen schnellen Überblick über die in CSS verwendeten Farben gibt. Wenn Sie den Mauszeiger über einen Farbnamen halten, können Sie sehen, wie er aussieht und wie er in anderen Farbformaten geschrieben wird ( verhexen, rgb, hsl und cmyk).
SVG Viewer
Mit dieser Erweiterung können Sie mit SVG-Dateien arbeiten: Sie können SVG-Dateien bearbeiten, in das PNG-Format konvertieren und ein Daten-URL-Schema erstellen.
TODO Highlight
Mit diesem Add-On können Sie unfertige Stellen in Ihrem Code markieren, um Ihr Projekt zu vereinfachen. Standardmäßig sind nur Beschriftungen festgelegt MACHEN (Ende) und FIXME (Fix), aber Sie können auch Ihre eigenen Etikettentypen erstellen.
Schriftarten mit Symbolen
Eine Erweiterung zu Visual Studio-Code Unterstützung für etwa 20 beliebte Symbolschriftarten, einschließlich Font Awesome, Ionicons, Glyphicons, Material Design...
Minimieren
Dienstprogramm zur Codeoptimierung und -komprimierung. Minimieren arbeitet mit Html, Js und CSS Dateien und funktioniert gut mit Plugins wie uglify-js, clean-css und hTML-Minifier.
Fall ändern
VS-Code Ermöglicht die Konvertierung der Auswahl in Groß- und Kleinschreibung. Mit der Hilfe Fall ändernerhalten Sie Zugriff auf eine große Anzahl von Registern (Schlange, Kamel usw.).
Regex Previewer
Ein Add-On, mit dem Sie mit regulären Ausdrücken arbeiten können. Regex Previewer Wendet ein Muster mit regulären Ausdrücken auf jede geöffnete Textdatei an und hebt alle Übereinstimmungen hervor. So wie
Werfen wir einen Blick auf die besten Visual Studio Code Editor-Plugins für die Webentwicklung im Jahr 2020.
- Live Server
- Tag automatisch schließen
- Importkosten
- Materielles Thema
- Apache Conf
- Russisches Sprachpaket
- Kleiner Bonus
1. Live Server
Aktivieren von Live Server für HTML- oder HTML-Dateien:
Aktivieren von Live Server, wenn keine HTML- oder HTML-Dateien vorhanden sind:
So richten Sie die automatische Seitenaktualisierung für PHP-Dateien mit Live Server ein
2. Sass
Unterstützung der Sass-Syntax: Einrücken, automatische Vervollständigung und mehr
Kompiliert SASS / SCSS-Dateien in Echtzeit in CSS
Zum Einschalten müssen Sie drücken Schau dir Sass an in der Statusleiste
Was Live Sass Complier beinhaltet:
- wählen Sie den Exportordner für die kompilierte Datei
- auswahl des CSS-Stils (erweitert, kompakt, komprimiert, verschachtelt)
- wahl des Erweiterungsnamens (.css oder .min.css)
- erweiterungskompatibilität Live Server
- einrichten automatischer Herstellerpräfixe
- und so weiter
Markieren von Tags - Öffnen und Schließen
Die Hervorhebung der Tags kann für Sie selbst angepasst werden. Mein Setup:
"Highlight-Matching-Tag.leftStyle": ("borderWidth": "2px 2px 2px 2px", "borderStyle": "solid", "borderColor": "gelb", "borderRadius": "5px"), "Highlight-Matching-Tag.rightStyle": ("borderWidth": "2px 2px 2px 2px", "borderStyle": "solid", "borderColor": "gelb", "borderRadius": "5px"),Hervorheben von Webfarben im Editor mit der entsprechenden Farbe
Die Erweiterung färbt symmetrische Klammern mit derselben Farbe, unterscheidet sich jedoch von anderen Klammern.
Wenn Sie ein gepaartes Tag ändern, wird das zweite automatisch geändert.
Standardmäßig funktioniert die Erweiterung für alle Sprachen. Um diese Einstellung zu ändern, verwenden Sie den folgenden Code:
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"],8. Tag automatisch schließen
Tags automatisch schließen
Funktioniert standardmäßig für alle Sprachen: HTML, PHP, JavaScript, Markdown, Liquid usw. Sie können die Einstellungen in settings.json ändern
"auto-close-tag.activationOnLanguage": ["php", "javascript", "javascriptreact", "typescript", "typescriptreact", "plaintext", "markdown", "vue", "liquid",]9. Importkosten
Diese Erweiterung zeigt die Größe des importierten Pakets inline im Editor an.
10. Materialthema
Eines der beliebtesten Themen für VS Code. Sie können auch eine Schriftart installieren, die Ligaturen unterstützt (Konvertieren einer Zeichenfolge in ein einzelnes Element).
Dann werden die Einstellungen für settings.json so aussehen
"editor.fontLigatures": true, "editor.fontFamily": "Fira Code", "editor.fontWeight": "100",11. Apache Conf
Unterstützung der Apache-Syntax. Praktisch zum Bearbeiten von Dateien mit Erweiterungen .htaccess... Unterstützt auch Dateitypen: .conf, .htgroups, .htpasswd
