Vor circa drei Monaten habe ich von Coda2 zu Atom gewechselt. Ich hatte Coda2 seit mehreren Jahren genutzt und war ehrlich gesagt etwas im Programm eingerostet. Ich meine damit, dass ich Coda zwar täglich genutzt habe, aber ohne dabei meinen Workflow wirklich weiter zu optimieren. Seitdem ich den Open-Source Editor Atom (entwickelt von GitHub) verwende, habe ich mir einige sehr praktischen Packages zur Optimierung meiner täglichen Arbeit im Editor installiert. Im folgenden Artikel habe ich eine Liste, der aus meiner Ansicht nach hilfreichsten Atom Packages zusammen gestellt.

1. Minimap

atom-packages-01
Mit Minimap bekommst du rechts im Editor-Fenster eine kleine Ansicht deiner kompletten Datei angezeigt. So kannst du leichter die Übersicht über deine Datei behalten und gleichzeitig schnell in der Datei hoch und runter scrollen. Das ist natürlich besonders hilfreich, wenn du oft mit sehr langen Dateien, z.B. Stylesheets arbeitest.

2. Project Manager

atom-packages-02
Um leichter auf deine unterschiedlichen Projekte zugreifen zu können, kannst du das Project Manager Package installieren. So kannst du einen offenen Projekt-Ordner mit dem Command “Project Manager: Save Project” speichern. Mit der Tastenkombination ctrl-cmd-p (mac) / alt-shift-P (win & linux) kannst du dann immer schnell auf die Liste deiner gespeicherten Projekte zugreifen.

3. Emmet

atom-packages-03
Mit der Hilfe von Emmet kannst du sehr viel schneller Code schreiben. Emmet ist eine Art Abkürzungs-System für HTML und CSS, das mit ein bisschen Übung deinen Workflow extrem erleichtern kann. Am Anfang kannst du dir das Emmet Cheatsheet anschauen, um die wichtigsten Abkürzungen zu lernen. Mit Hilfe des Emmet Packages für Atom kannst du Emmet auch in Atom Texteditor nutzen.

4. Atom Alignment

atom-packages-04
Um deine Dateien aufzuräumen und alle gleichen Elemente deines Codes auf eine saubere Linie zu bringen, ist das Package Atom Alignment hilfreich. Mit der Tastenkombination ctrl+cmd+a (Mac) oder ctrl+alt+a kannst du Elemente ganz schnell anordnen.

5. Highlight Selected

atom-packages-05
Wenn du alle gleichen Elemente eines markierten Elements ebenfalls hervorzuheben, kannst du das beliebte Highlight Selected Package installieren. Um ausgewählte Elemente auch in deiner Minimap markiert zu sehen, kannst du zusätzlich noch das Minimap Highlight Selected Package installieren.

6. Color Picker

atom-packages-06
Bei Coda2 ist der Color Picker standardmäßig mit dabei gewesen. Im Atom-Editor kannst du diese Funktion mit Hilfe des Color Picker Packages erweitern, um leicht Farbwerte im Editor auszuwählen. In den Package Settings kannst du dabei bestimmen, ob du RGB oder Hexwerte verwenden möchtest.

7. Pigments

atom-packages-07
Ein weiteres praktisches Package für das Arbeiten mit Farbwerten ist Pigments. Nach der Installation werden alle Farbwerte in der entsprechenden Farbe markiert. So kannst du leicht sehen, welche Farbe du nutzt, ohne den Farbwert automatisch zu kennen. Bei einem Projekt mit mehreren Farben kann das sehr nützlich sein. Zusätzlich dazu kannst du dir auch eine Tabelle mit allen Farben eines Projektes anzeigen lassen.

8. Open Recent Files/Folders

atom-packages-08
Eine Liste der zuletzt geöffneten Dateien angezeigt zu bekommen, ist ebenfalls sehr praktisch. Von Coda 2 war ich diese Funktion auch gewohnt, daher habe ich sie mir mit dem Open Recent Files/Folders Package auch für für Atom installiert.

9. File Icons

atom-packages-09
Ein weiterer kleiner Helfer, der das Arbeiten mit mehreren Dateitypen in einem Projektordner erleichtert ist File Icons. Ohne das Package werden alle Icons einfarbig und in einem Standard-Design angezeigt. Übersichtlicher ist die Ansicht mit File Icons, denn so bekommst du bunte, spezielle Icons für jeden Datei-Typ angezeigt.

10. Autocomplete WordPress Hooks

atom-packages-10
Für alle die mit WordPress arbeiten, ist das Autocomplete WordPress Hooks Package einer weitere nützliche Hilfe. So kannst du dir das Schreiben von WordPress Filtern und Hooks erheblich erleichtern.

So synchronisiert du deine Atom Settings

Wenn du deine Atom Settings auch an einem anderen Computer nutzen möchtest, kannst du deine Einstellungen mit Hilfe eines Gists synchronisieren. Dazu musst du das Package Sync Settings for Atom installieren und der genauen Anleitung in den Package Settings folgen. Du benötigst ein GitHub-Konto für das Speichern deiner Einstellungen.

Weitere Package Empfehlungen aus der Community

Zur Vorbereitung auf den Beitrag habe ich via Twitter auch nach euren Atom-Package Empfehlungen gefragt und einige hilfreiche Tipps bekommen. Hier ein paar Tweets mit weiteren Atom-Package Empfehlungen aus der Twitter-Community:

Welche Packages für den Atom Editor nutzt du, um deinen Workflow zu verbessern? Schreib mir deine Favoriten doch einfach in einem Kommentar, ich freue mich auf deine Antwort.