Share
Ein Code-Editor ist das A und O für die Karriere eines Webentwicklers. Es ist die eine Facette der Werkzeugkette eines Kodierers, die geschätzt wird, aber auch mit äußerster Leidenschaft und Entschiedenheit ausgewählt wird. Dies ist kein Artikel darüber, welcher Code-Editor am beliebtesten ist oder was einen besser macht als den anderen. Der Zweck dieses Artikels ist für diejenigen bestimmt, die Atom als ihren Code-Editor gewählt haben und zeigen, wie sie für die tägliche Arbeit fantastisch sind.
Emmet LiveStyle ist das erste bidirektionale Echtzeit-Bearbeitungswerkzeug für CSS-, LESS- und SCSS-Dateien.
Das Atom-Paket ist hier erhältlich und erfordert keine besonderen Einstellungen: Starten Sie einfach Atom und Google Chrome, und Sie können sofort in Echtzeit bearbeiten.
„LiveStyle verwendet eigene Implementierungen von LESS- und SCSS-Vorprozessoren, die in reinem JavaScript geschrieben sind. Im Gegensatz zu offiziellen Implementierungen von Preprozessoren mit Quellcaps bietet LiveStyle korrekte Zuordnungen von Quellen zu Ergebnissen, Variablen- und Mixin-Bereichen, Fehlerbehebung und teilweise Kompilierung. “
Meine Lieblingsfunktion ist „Remote View“ und erstellt eine öffentlich verfügbare URL, die auf Ihre lokale Site verweist. Verwenden Sie diese URL, um auf jedem mit dem Internet verbundenen Gerät oder Browser eine Vorschau mit Echtzeit-Aktualisierungen von Atom und DevTools anzuzeigen.
Um dieses Paket zu meistern, empfehle ich Ihnen dringend, die Dokumentation und den Leitfaden zum Einstieg durchzusehen, um sicherzustellen, dass er den Anforderungen Ihres spezifischen Kontextes entspricht und Sie sich vor der Verwendung natürlich wohl fühlen.
Wollten Sie schon während der Codierung einen Farbwähler verwenden? Haben Sie keine Angst, weil Color Picker Ihren Rücken hat. Color Picker liest derzeit die Farben HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 und VEC4 und kann zwischen den Formaten konvertieren.
Dieser kleine Teufel prüft auch Sass- und LESS-Farbvariablen wie eine Superklausel. Öffnen Sie einfach den Farbwähler mit dem Cursor auf die Variable Ihrer Wahl, und die Definition wird für Sie nachgeschlagen. Sie können auf die bereitgestellte Definition klicken und direkt dorthin gehen, wo sie definiert ist.
Wenn der Farbwähler nicht Ihre Tasse Tee ist, versuchen Sie es vielleicht mit Pigments. Pigmente ist ein Paket zum Anzeigen von Farben in Projektdateien. Pigmente werden Quelldateien in Ihren Projektverzeichnissen nach Farben durchsuchen und mit allen eine Palette erstellen (ziemlich glatt).
Da in unserer Arbeit immer mehr Bewegung gefordert wird, ist es schön, Werkzeuge zu haben, die den Prozess unterstützen.
Der Bezier-Kurveneditor ist ein Game-Changer für Motion- und interaktive Entwickler, die nach der perfekten Beschleunigungskombination suchen. Wählen Sie zwischen einer Vielzahl von Beschleunigungsoptionen, mit denen das Ergebnis live angezeigt wird, oder erstellen Sie eigene, indem Sie die Ziehpunkte des Beschleunigungsvisualisierers ziehen.
Möchten Sie Dateien aus Ihrem Projekt ausblenden, die während der Arbeit nicht an Ihr Repo gebunden oder angezeigt werden müssen? In Atom's Pakete Suchen Sie in der Registerkarte „Baumansicht“ und aktivieren Sie unter den Einstellungen das Kontrollkästchen für Ignorierte Namen ausblenden Entfernen Sie die global ignorierten Dateien aus Ihrer Baumansicht oder kombinieren Sie sie mit VCS ignorierte Dateien ausblenden. Diese speziellen VCS-Dateien werden von Ihrem Computer gesteuert .Gitignore. Die global ignorierten Dateien sind solche wie .DS_Store, zum Beispiel.
Wenn Verbesserungen an Ihrer visuellen Navigation vorgenommen werden können, empfehle ich, dies zu tun, weshalb ich Dateisymbole liebe.
Dieses Paket verleiht Ihren Dateien ein schönes kleines Symbol mit etwas Farbe, um die Suche zu erleichtern und die Dinge im Allgemeinen lecker aussehen zu lassen. Sie können sogar Größe, Farbschattierungen anpassen, Symbole austauschen und Symbole nach Dateierweiterung zuweisen.
Mögen Sie es nicht, zwischen der Befehlszeile und Ihrem Editor zu springen, um Commits zu machen? Dieses GitHub-Paket ist jetzt in allen Versionen von Atom 1.18 und höher enthalten.
Sie können verzweigen, bereitstellen, festschreiben, verschieben, Konflikte lösen und sogar Pull-Anforderungen für GitHub direkt in Atom anzeigen. Um dieses Fenster zu öffnen, setzen Sie den Cursor-Totpunkt Ihres Editors auf die rechte Seite und suchen Sie nach einer Registerkarte mit einem Pfeil. Boom!
Ich bin ein großer Fan von diesem, weil es das Betrachten von Dateiunterschieden zu einem Kinderspiel macht. Innerhalb von Atom haben Sie Zugriff auf Ihren Verlauf eines verfolgten Git-Projekts. und es ist alles visuell.
Git Time Machine macht das Nachsehen von Dateiunterschieden wieder spaßiger und weniger unordentlich als der Versuch, über die Befehlszeile zu prüfen. Es zeigt eine visuelle Darstellung der Commits für die aktuelle Datei im Zeitverlauf. Sie können auf die Timeline klicken oder über eine Marke fahren und alle Commits für einen bestimmten Zeitraum anzeigen. Sie haben die Möglichkeit, komplette Dateien oder Kirschpflücken Zeile für Zeile zurückzusetzen. Es ist ein wirklich fantastisches Paket, das Sie in Ihren Atom-Workflow integrieren können.
Die Suche nach Browser-Support war dank des Can I Use-Pakets noch nie einfacher und direkt in Atom.
Geben Sie "Kann ich verwenden" aus Ihrer Befehlsleiste ein (Befehlstaste + Umschalttaste + P) Und geben Sie die Eigenschaft oder den Suchbegriff ein, für die Sie Unterstützung in Ihrem Projekt benötigen. Eine sehr effiziente Methode, um diesen Dienst zu verwenden, anstatt den Webbrowser zu verwenden.
Pakete sind nicht die einzige Option, mit der Sie Atom magischer machen können als durch die Standardinstallation. Es gibt viele weitere Optionen, die direkt in den Kerneinstellungen gefunden werden können, um das Schreiben von Code zu einem angenehmen Erlebnis zu machen.
Unter Atom's die Einstellungen Ansicht können Sie Ihre Umhüllungsvorgaben festlegen.
Das Weiche Umhüllung Mit dieser Option werden Zeilen umbrochen, die zu lang sind, um in Ihr aktuelles Fenster zu passen. Wenn diese Option deaktiviert ist, bluten die Zeilen von der Bildschirmseite aus, sodass Sie das Fenster horizontal scrollen müssen, um den Rest Ihres Inhalts anzuzeigen.
Die Option "Suchen und Ersetzen" gibt es in den Code-Editoren immer und aus gutem Grund. Um innerhalb Ihrer aktuellen Datei zu suchen, drücken Sie cmd + f, Geben Sie dann Ihre Suchzeichenfolge ein und drücken Sie eingeben (oder cmd + g oder der Nächstes finden Taste), um alle Übereinstimmungen in dieser Datei zu durchlaufen.
Das Suchen und Ersetzen Das Bedienfeld enthält auch Schaltflächen zum Umschalten zwischen Groß- und Kleinschreibung, zum Vergleichen von regulären Ausdrücken und zum Festlegen der Suche nach Auswahlmöglichkeiten. Sie können das gesamte Projekt auch suchen und ersetzen, wenn Sie das Panel mit aufrufen cmd + chift + f.
Atom hat den Befehl Atom - portabel Dies stellt eine Befehlszeilenparameteroption zum Einstellen des tragbaren Modus bereit. Ich persönlich hatte mit dieser Option ein schreckliches Glück und ehrlich gesagt, die Dokumente zu diesem Thema bedürfen immer noch einer Umschreibung.
„Der Portable-Modus ist äußerst nützlich, wenn Sie Atom mit all Ihren benutzerdefinierten Einstellungen und Paketen von Maschine zu Maschine mitnehmen möchten. Dies kann in der Form erfolgen, dass Atom auf einem USB-Laufwerk oder einer Cloud-Speicherplattform aufbewahrt wird, auf der Ordner mit verschiedenen Maschinen wie Dropbox synchronisiert werden. “
Mein Vorschlag ist Ihr Symlink ~ / .atom Verzeichnis zu Dropbox (oder einem anderen Dienst, Standort usw.) und rufen Sie es täglich an. In diesem Verzeichnis werden alle Ihre Einstellungen, Pakete, Konfigurationen und solche gespeichert, die Atom für Sie personalisiert machen. Sie können Atom weiterhin auf jedem Rechner wie gewohnt installieren, außer Sie verwenden es .Atom als symbolischer Link, der auf einen anderen Ort Ihrer Wahl verweist.
Wenn der tragbare Modus oder der Symlink-Trick nicht verlockend ist, sollten Sie die Synchronisierungseinstellungen in Betracht ziehen. Dieses Atom-Paket synchronisiert Einstellungen, Keymaps, Benutzerstile, Init-Skript, Snippets und installierte Pakete über Atom-Instanzen hinweg.
Wenn Sie eine benutzerdefinierte Stiländerung vornehmen möchten, ohne ein gesamtes Design zu erstellen, können Sie Ihre benutzerdefinierten Stile zum hinzufügen styles.less Datei in Ihrem ~ / .atom Verzeichnis.
Um diese Datei im Atom-Editor zu öffnen, wählen Sie Atom> Stylesheet. Der einfachste Weg, um herauszufinden, welche Klassen verfügbar sind, ist die manuelle Überprüfung des DOM mit den Developer Tools über Befehl + Option + i auf dieselbe Weise wie bei Chrome.
Ich habe nur die Oberfläche in Bezug auf Pakete, Plugins und ähnliches abgekratzt. Wenn Sie jedoch weitere Vorschläge, Kommentare oder Gedanken haben, empfehlen wir Ihnen, unten einen Kommentar zu hinterlassen und alle relevanten Links, die für diese Diskussion relevant sind. Wenn Sie viel auf Listen sind, dann checken Sie auf jeden Fall dieses Repo auf GitHub mit dem Namen Awesome Atom aus. Eine kuratierte Liste reizvoller Atompakete und -ressourcen. Als ehemaliger Sublime-Benutzer war ich mit meiner Entscheidung, zu Atom zu wechseln, völlig zufrieden, und es wird auch in absehbarer Zukunft mein Editor sein. Glückliche Kodierung!
Accentsconagua