Atom: 5 sinnvolle Packages für den Code-Editor

Eine alte Handwerker-Regel lautet: „Für gute Arbeit braucht man gutes Werkzeug“. Dieser Ausspruch lässt sich grund­sätzlich auf alle Formen der Arbeit übertragen und gilt somit auch für den Bereich der Webent­wicklung. Das wichtigste Werkzeug hierfür ist aus meiner Sicht ein guter Code-Editor.

Auf der Suche nach einem eben solchen bin ich schon vor einiger Zeit auf den Atom Editor gestoßen. Hierbei handelt es sich um eine leistungs­fähige Open-Source-Lösung, die platt­form­über­greifend nutzbar ist und aus demselben Hause wie die kolla­bo­rative Entwick­lungs­plattform GitHub stammt.

Atom
Der Code-Editor Atom.

Eine der großen Vorteile dieses Code-Editors ist seine Wandel- und Erwei­ter­barkeit: Neben vielen Darstel­lungs­stilen (Themes) bietet das offizielle Reposi­torium eine scheinbar endlose Zahl an Packages, wie Plugins bei Atom genannt werden, zur Verfügung. Nachfolgend stelle ich kurz Packages vor, die ich für meinen eigenen Workflow entdeckt habe:

1. autopre­fixer

Das World Wide Web Consortium (W3C) entwi­ckelt die Style­sheet-Sprache CSS laufend weiter und ergänzt diese um neue Features und Funktionen. Browser­her­steller nutzen sogenannte CSS-Browser­präfixe (auch Vendor-Präfixe), um in ihren Produkten eine Unter­stützung für derartige Funktionen anzubieten, noch ehe diese in allen Browsern vollständig umgesetzt sind.

Mit diesem von sindre­sorhus entwi­ckelten Package steht ein prakti­scher Helfer zur Verfügung. Es erzeugt automa­tisch den browser-spezi­fi­schen CSS-Code, sodass man sich hierrüber keinen Kopf mehr machen braucht.

Link: atom.io/packages/autoprefixer

2. fix-ident-on-paste

Dieses Package behebt einen Fehler des Code-Editors, bei dem das Einfügen von einge­rückten Zeilen mit einem führenden Zeilen­um­bruch immer weiter einge­rückt wird. Es stellt sicher, dass alle Einzugs­än­de­rungen von der Option „Automa­ti­scher Einzug beim Einfügen“ gesteuert werden.

Link: atom.io/packages/fix-indent-on-paste

3. file-icons

file-icons vom gleich­na­migen Entwickler (wichtig, denn es gibt mehrere Packages mit ähnlicher Titulierung) ermög­licht es Atom im Datei- und Verzeich­nisbaum sowie in geöff­neten Tabs datei­spe­zi­fische Symbole anzuzeigen. Sorgt so für eine verbes­serte visuelle Wahrnehmung der unter­schied­lichen Projekt­da­teien.

Link: atom.io/packages/file-icons

4. sass-autocompile

Neben autopre­fixer das für mich das wohl wichtigste Tool in meiner Sammlung: Mit diesem Package, entwi­ckelt von Armin Pfäffle, werden aus SASS/SCSS-Dateien browser­ver­ständ­liche CSS-Dateien generiert. Auf Wunsch geschieht dies bei jedem Speicher­vorgang und zwar sowohl in normaler als auch in kompri­mierter (minifi­zierter) Form.

Link: atom.io/packages/sass-autocompile

5. terminal-tab

Manchmal ist unumgänglich, dass Anwei­sungen über die betrieb­sys­tem­spe­zi­fische Terminal-Anwendung ausge­führt werden. Mithilfe des folgenden Packages funktio­niert das auch direkt aus dem Code-Editor heraus. Zumindest unter macOS funktio­niert das ganz gut.

Link: atom.io/packages/terminal-tab

Hinweis: Eine für das Nachfol­ge­produkt Pulsar aktua­li­sierte und erwei­terte Liste von Packages findet sich hier.