atom-editor-packages

10 nützliche Atom Texteditor Erweiterungen für Webentwickler

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.

17 Kommentare

  1. Hallo Ellen,

    werde dann jetzt mal Atom installieren und mitsamt einiger deiner Empfehlungen ausprobieren. Danke für den schönen Überblick und euch einen schönen ersten Advent. Ich glaube ihr habt ihn beim Verfassen dieses Kommentars noch eine knappe Stunde ;)

    Herzliche Grüße

    Christoph

    • Hallo Christoph,
      ja, ich bin super happy mit Atom, alles wird moderner und schneller aus meiner Ansicht. Dir auch eine schöne Adventszeit :)
      Ganz viele Grüße, Ellen

  2. Hallo Ellen, danke für diese Übersicht und Ausführung. Neugierig geworden, habe ich mir gleich den Editor inklusive der vorgestellten Plugins installiert.

    Was ich allerdings vermisse ist eine Möglichkeit den aktuellen/zuletzt geöffneten Projektordner automatisch öffnen zu lassen. Klar ist dies dank der „open recent“ und „Project manager“ Plugins relativ einfach, aber immer noch nicht ganz so schön wie z.B. bei Brackets etc.

    Ein Plugin, welches dieses löst, fand ich bisher nicht.

    • Hallo Nils,
      es freut mich, dass die Atom auch gefällt. Eventuell findest du noch ein besseres Package? Wenn ja, sag Bescheid.
      Ganz viele Grüße, Ellen

      • Hallo Ellen,

        nein das funktioniert mittlerweile perfekt. Aus irgendeinem Grund hatte dies allerdings nicht sofort wie gewünscht funktioniert. Nun nach mehreren Neustarts kann ich sagen, dass es mittlerweile wie gewünscht läuft. Danke! :)

  3. Hello!
    Ich teste auch gerade den Atom Editor an. Deshalb kommt dieser Artikel gerade recht.
    Ich finds nur schade, dass Atom etwas langsam ist, besonders im direkten Vergleich zu Sublime Text.

    lg
    Jochen

    • Hallo Jochen,
      im Vergleich zu Coda2 finde ich Atom super schnell, eventuell kommt es auch darauf an, wie viele Packages oder welches Theme man installiert hat? Ich bin mir da nicht so sicher. Sag Bescheid für welchen Editor du dich letztendlich entscheidest :)
      Grüße, Ellen

  4. Ich nutze seit einigen Jahren Sublime Text (2/3)und habe nie den Sprung zu Atom gewagt.
    Doch dank deiner Tipps werde ich mir das ganze nochmal ansehen.

    Vielen Dank und bitte mehr sowas! :)

    • Hallo Tobias,
      es freut mich, das der Post für dich hilfreich ist. Ja, probiere es einfach nochmal aus, ich glaube wenn man von Sublime kommt, ist der Unterschied gar nicht so groß.
      Grüße, Ellen

  5. Hallo,

    bisher war mir der ATOM-Texteditor absolut unbekannt. Ich selbst nutze seit 15 Monaten den Texteditor Brackets, Sublime Text 2 habe ich zwar auch ausprobiert, sagte mir aber nicht zu.

    In Brackets nutze ich hauptsächlich die Eweiterungen: Emmet und W3C-Validator, viele Funktionen wie die Farbanzeige und Projekt-Manager sind schon Teil der Standardinstallation.

    Viele Grüße

    • Hallo Steffen,
      Brackets ist ja auch, wie Atom ein Open Source Editor. Ich selbst habe Brackets ehrlich gesagt noch nicht getestet, da ich mit Atom so super zufrieden bin. Ich werde Bracket aber auch mal ausprobieren.
      Ganz viele Grüße und Danke für deine Tipps :)
      Ellen

  6. Ein schöner Beitrag! Da wir ja gerade über Atom sprechen: Ich nutze momentan Brackets von Adobe. Was mich dabei massiv stört ist die, wie ich finde, etwas unausgereifte farbliche Darstellung von PHP. Gerade weil die Tags und Funktionen einfach genauso aussehen, wie „normaler“ Fließtext. Ist das bei Atom besser?

    Viele Grüße

    Philipp

    • Hallo Philipp,
      ja, bei Atom kannst du von jeder Menge Farb-Themes wählen, da gibt es welche für die unterschiedlichsten Arten von Code. Vielleicht kannst du dieses Theme einmal ausprobieren.
      Grüße, Ellen

    • Hallo Thomas,
      super, ganz vielen Dank für diese Ergänzung. Das Thema wäre glaube ich sogar noch einmal einen extra Beitrag wert :)
      Grüße, Ellen

  7. Hallo Ellen,

    Danke für diesen Beitrag. Bisher habe ich für meine Projekte immer AptanaStudio3 benutzt. So restlos glücklich war ich damit aber eigentlich nie. .Atom hatte ich bisher noch nie auf dem Schirm – wahrscheinlich wegen dem .Punkt ;-)

    Thx for the enlightenment
    Gruss aus Düsseldorf
    Wolfgang

  8. Hallo, kann ich mich auch mit .Atom zu meinem WordPress beim Provider verbinden? Ich finde keinen Weg :-(

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *