Brackets.io hat vor kurzem die Version 1.2 veröffentlicht, mit großartigen neuen Funktionen, die Sie in ihrem Blog lesen können. Wir haben eine Liste von 10 der besten und nützlichsten Brackets-Erweiterungen (in keiner bestimmten Reihenfolge) zusammen mit einer vollständigen Anleitung für jede Erweiterung zusammengestellt.
Erweiterungen für Klammern
1. Code-Faltung
Im Gegensatz zu vielen anderen IDEs und Code-Editoren verfügt Brackets standardmäßig nicht über eine Code-Folding-Option. Mit Code Folding können Sie große Teile Ihres Codes leicht in eine einzige Zeile reduzieren. Die Code Folding-Erweiterung ist auf Github und im Brackets-Erweiterungsmanager verfügbar.
Wie benutzt man
Um ein verschachteltes Tag zu falten, klicken Sie einfach auf den Abwärtspfeil links neben dem übergeordneten Tag (siehe oben). Gleiches Prinzip für Javascript oder jedes andere Format. Klicken Sie einfach auf den Abwärtspfeil links neben dem übergeordneten Element, um alle geschachtelten Anweisungen in eine Zeile zu falten. Zum Erweitern klicken Sie einfach auf das Pluszeichen.
Die Zeilennummern der gefalteten Linien sind ausgeblendet, sodass Sie leicht gefaltete Linien erkennen können, wenn Sie sich auf den Code konzentrieren.
2. Lorem-Pixel
Es gibt viele Möglichkeiten, Platzhaltertext zu generieren. Front-End-Webentwickler benötigen jedoch häufig Platzhalterbilder. Verwenden Sie die Lorem-Pixel-Erweiterung, anstatt zu versuchen, ein leeres Platzhalterbild zu erstellen. Sie können wunderschöne Platzhalterbilder in beliebiger Größe einfügen. Der coole Teil von Lorem Pixel besteht darin, dass Sie die Kategorie auswählen können, aus der Sie ein Bild erstellen möchten.
Wenn das nicht gut genug ist, ändern sich die Platzhalterbilder jedes Mal, wenn Sie die Seite neu laden! Bilder können häufig Farbschemata stören, daher bietet Lorem Pixel auch eine Graustufenoption, bei der nur s / w-Platzhalterbilder verwendet werden. Diese Erweiterung wird von lorempixel.com bereitgestellt und ist im Brackets-Erweiterungsmanager verfügbar.
Wie benutzt man
Wenn Sie die Lorem-Pixel-Erweiterung installiert haben, wird das Lorem-Pixel-Logo - ein angekreuztes Quadrat - im Erweiterungsbereich angezeigt (der Bereich rechts mit der Schaltfläche Live-Vorschau). Klicken Sie auf das Logo, um ein Einstellungsfeld aufzurufen. Legen Sie die gewünschte Bildgröße und die bevorzugte Bildkategorie fest. Wenn Sie Graustufenbilder wünschen, aktivieren Sie die Option Graustufen. Kopieren Sie den Link entweder in die Zwischenablage und verwenden Sie ihn bei Bedarf oder fügen Sie ihn an der aktuellen Cursorposition ein.
3. Autoprefixer
Das Hinzufügen von Herstellerpräfixen zu Ihrem Code ist eine Plackerei. Die Autoprefixer-Erweiterung kann Ihnen viel Zeit (und viel Arbeit!) Ersparen, da sie dem Code automatisch die erforderlichen Herstellerpräfixe hinzufügt. Es erfordert keine Konfiguration und aktualisiert Ihre Präfixe jedes Mal, wenn Sie Ihren Code speichern. Sie können auch Code auswählen und automatisch einen Präfix einfügen, wenn Sie möchten.
Wie benutzt man
Um Autoprefixer zu verwenden, schreiben Sie einfach vorwahlfreien Code. Die Erweiterung fügt automatisch vor dem Speichern einen Präfix-Code hinzu. Um einem ausgewählten Code ein automatisches Präfix zu geben, wählen Sie zuerst den Code und dann die Registerkarte Bearbeiten ⇒ Automatische Präfixauswahl .
Mit Autoprefixer können Sie auch benutzerdefinierte Präfixe in den Einstellungen hinzufügen. Um zu den Erweiterungseinstellungen zu gelangen: Bearbeiten ⇒ Autoprefixer-Einstellungen.
Aktivieren Sie die Option Visuelle Kaskade in den Erweiterungseinstellungen, um einen schönen, kaskadierten, vorangestellten Code zu erhalten.
4. Markdown-Vorschau
Markdown ist eine schöne Nur-Text-Auszeichnungssprache, die leicht in HTML konvertierbar ist. Die Markdown-Vorschau zeigt den gerenderten Markdown direkt unter der Textversion. Sie können zwischen zwei verschiedenen Stilen wählen: Github Flavored Markdown und Standard Markdown.
Für das Vorschaufenster können Sie drei Themen auswählen: Hell, Dunkel und Klassisch. In der Markdown-Vorschau ist auch eine Bildlaufsynchronisierungsoption (standardmäßig aktiviert) verfügbar. Die Erweiterung kann von Github oder vom Brackets-Erweiterungsmanager heruntergeladen werden.
Wie benutzt man
Öffnen Sie eine .md- oder .markdown- Datei. Wenn Sie die Markdown-Vorschau installiert haben, sollte rechts die Schaltfläche M ↓ angezeigt werden. Klicken Sie darauf, und Sie sehen den gerenderten Markdown. Klicken Sie zum Ändern des Designs oder zum Deaktivieren der Bildlaufsynchronisierung auf das Zahnradsymbol in der rechten oberen Ecke des Abschnitts Markdown-Vorschau.
5. Klammer-Symbole
Es macht immer Spaß, Ihren Code-Editor mit Dateisymbolen aufzupeppen. Brackets Icons fügt allen in der Seitenleiste aufgelisteten Dateien farbige Symbole hinzu, basierend auf dem Dateityp. Es enthält Symbole für die meisten Dateitypen, und Sie können Symbolanfragen auf der Github-Seite veröffentlichen.
Bonus-Tipp:
Brackets Icons verwendet Icons aus dem Ionicons-Projekt. Sie können auch die Dateisymbole der Erweiterung (eine Verzweigung des Projekts Brackets Icons) auschecken, die Symbole aus dem Font Awesome-Projekt verwenden. Am Ende kommt es auf persönliche Vorlieben an.
Wie benutzt man
Installieren Sie einfach die Erweiterung und laden Sie die Halterungen (F5) neu.
6. Dokumentensymbolleiste
Klammern fehlen Tabs. Einfaches und einfaches Faktum. Die Documents Toolbar-Erweiterung fügt diese Funktionalität hinzu. Alle Dateien, die sich im aktiven Bereich der Seitenleiste befinden, werden in dieser Erweiterung als Registerkarten angezeigt. Sie können auch die Seitenleiste ausblenden und nur die Dokumentensymbolleiste für eine nette Benutzeroberfläche verwenden.
Wie benutzt man
Installieren Sie die Verlängerung und laden Sie die Halterungen (F5).
7. Klammern Git
In diesen Tagen versucht alles, sich mit Git zu integrieren. es ist bei weitem das beliebteste Versionskontrollsystem (VCS). Brackets Git ist bei ähnlichen Brackets Extensions die beste Wahl. Es verfügt über alle Git-Funktionen, die Sie benötigen. Sie können Änderungen ganz einfach aus Klammern selbst übernehmen, Änderungen mit einem einzigen Mausklick ausführen und anzeigen, den Dateiverlauf und den gesamten Verlauf der Festschreibung anzeigen. Wenn Sie gut mit Git sind, werden Sie mit dieser Erweiterung keine Probleme finden.
Hinweis: Zur Verwendung von Brackets Git muss Git auf Ihrem Computer installiert sein. Nach der Installation der Erweiterung müssen Sie möglicherweise den Pfad zu Ihrer ausführbaren Git-Datei eingeben (sofern sie nicht im Standardpfad enthalten ist).
Wie benutzt man
Brackets verwenden Git ist ziemlich einfach. Machen Sie Ihren lokalen Github-Repo-Ordner zum Projektordner in Klammern. Öffnen Sie dann eine Datei, nehmen Sie Änderungen vor und speichern Sie sie. Dann können Sie fortfahren und auf das Git-Symbol auf der rechten Seite klicken. Daraufhin wird das Git-Brackets-Fenster unten geöffnet. Es werden alle Änderungen aufgeführt, die Sie an Ihren Dateien vorgenommen haben.
Prüfen Sie, welche Dateien Sie übergeben möchten, und klicken Sie dann auf die Schaltfläche Übernehmen. Daraufhin wird ein Popup-Fenster mit den vorgenommenen Änderungen angezeigt. Geben Sie Ihre Commit-Nachricht ein und klicken Sie auf OK. Und Sie haben erfolgreich eine Datei direkt aus Klammern an Git übergeben.
Klicken Sie nach dem Festschreiben einfach auf den Druckknopf (es zeigt auch die Anzahl der nicht synchronisierten Festschreibungen an, wie Sie oben in der GIF sehen können).
Einstellungen konfigurieren
Öffnen Sie das Git-Brackets-Fenster und klicken Sie auf die Schaltfläche Einstellungen (zweite von rechts). Gerne können Sie die Brackets Git auch so konfigurieren, wie Sie es möchten.
So zeigen Sie den Datei- und Commit-Verlauf an
Klicken Sie einfach auf die entsprechenden Schaltflächen, um Ihren Dateiversionsverlauf und den Commit-Verlauf anzuzeigen. Haben wir erwähnt, dass Sie den Avatar entweder in einen Schwarzweiß-Avatar, einen farbigen Avatar oder Ihren Gravatar umwandeln können?
8. Lint ALLE Dinge
Lint ALLE Dinge. Alles. Diese Erweiterung fasst alle Ihre Dateien auf einmal zusammen. Sehr hilfreich, wenn Sie ein großes Projekt mit vielen verbundenen Dateien haben. Alle Flusenfehler werden in einem Bereich angezeigt.
Wie benutzt man
Um Lint ALL Things zu verwenden, gehen Sie einfach zur Registerkarte Ansicht und klicken Sie auf Lint ganzes Projekt .
9. Klammern Todo
Klammern Todo ist eine nette kleine Erweiterung, die alle TODO-Kommentare in einem übersichtlichen Listenformat anzeigt. Standardmäßig werden 5 Tags unterstützt - TODO, NOTE, FIXME, CHANGES und FUTURE. Sie können Kommentare auch als Fertig markieren. In den Ansichtsoptionen können Sie Kommentare nach Tags filtern. In Klammern Mit Todo können Sie benutzerdefinierte Farben für Tags sowie auch Ihre eigenen Tags definieren, falls Sie mit Ihren Kommentaren kreativ werden möchten.
Wenn Sie an einem großen Projekt arbeiten und Kommentare aus mehreren Dateien nachverfolgen müssen, können Sie den Umfang der Suche nach Klammern Todo ändern. Möchten Sie einige Dateien und Ordner wie Herstellerordner ausschließen? Keine Bange. Fügen Sie einfach den Pfad der Ausschlussliste hinzu. Sie können die Einstellungen für jedes Projekt anpassen, indem Sie im Stammverzeichnis des Projekts eine .todo-Datei hinzufügen.
Sie können alle Einstellungen in der github-Dokumentation durchgehen.
Wie benutzt man
Um Brackets Todo zu verwenden, fügen Sie Ihrem Code einfach einen Kommentar mit einem Tag hinzu. Der Tag-Name muss in Großbuchstaben angegeben werden, gefolgt von einem Doppelpunkt (:). Um alle Todos anzuzeigen, klicken Sie einfach auf das Todo-Symbol im rechten Erweiterungsbereich.
Konfigurieren:
- So erlauben Sie Todo's HTML-Kommentare: Öffnen Sie einfach die Einstellungen - Klicken Sie auf das Todo-Symbol → Einstellungen (Zahnradsymbol) - und klicken Sie auf, um die .todo-Datei zu öffnen. Fügen Sie dieser Datei diesen Code hinzu:
{"regex": {"prefix": "(? :)"}}
- So ändern Sie den Suchbereich: Fügen Sie der .todo-Datei diesen Code hinzu:
{"search": {"scope": "mein Projekt"}} - So schließen Sie eine Datei- / Ordner- / Dateierweiterung aus dem Suchbereich aus: Fügen Sie der .todo-Datei diesen Code hinzu:
{"search": {"scope": "mein Projekt","ExcludeFolders": ["yourfolder"]
"excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}}
10. Verschönern
Verschönerung lässt Ihren Code gut aussehen. Es fixiert Leerzeichen, Einrückungen und Linien.
Wie benutzt man
Es ist sehr einfach zu verschönern. Sie müssen nur einen Code auswählen > Rechtsklick > Verschönern .
Alternativ können Sie zur Registerkarte " Bearbeiten " gehen und auf " Verschönern " klicken.
