Eine alte Handwerker-Regel lautet: „Für gute Arbeit braucht man gutes Werkzeug“. Dieser Ausspruch lässt sich grundsätzlich auf alle Formen der Arbeit übertragen und gilt somit auch für den Bereich der Webentwicklung. 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 leistungsfähige Open-Source-Lösung, die plattformübergreifend nutzbar ist und aus demselben Hause wie die kollaborative Entwicklungsplattform GitHub stammt.
Eine der großen Vorteile dieses Code-Editors ist seine Wandel- und Erweiterbarkeit: Neben vielen Darstellungsstilen (Themes) bietet das offizielle Repositorium 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. autoprefixer
Das World Wide Web Consortium (W3C) entwickelt die Stylesheet-Sprache CSS laufend weiter und ergänzt diese um neue Features und Funktionen. Browserhersteller nutzen sogenannte CSS-Browserpräfixe (auch Vendor-Präfixe), um in ihren Produkten eine Unterstützung für derartige Funktionen anzubieten, noch ehe diese in allen Browsern vollständig umgesetzt sind.
Mit diesem von sindresorhus entwickelten Package steht ein praktischer Helfer zur Verfügung. Es erzeugt automatisch den browser-spezifischen 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 eingerückten Zeilen mit einem führenden Zeilenumbruch immer weiter eingerückt wird. Es stellt sicher, dass alle Einzugsänderungen von der Option „Automatischer Einzug beim Einfügen“ gesteuert werden.
Link: atom.io/packages/fix-indent-on-paste
3. file-icons
file-icons vom gleichnamigen Entwickler (wichtig, denn es gibt mehrere Packages mit ähnlicher Titulierung) ermöglicht es Atom im Datei- und Verzeichnisbaum sowie in geöffneten Tabs dateispezifische Symbole anzuzeigen. Sorgt so für eine verbesserte visuelle Wahrnehmung der unterschiedlichen Projektdateien.
Link: atom.io/packages/file-icons
4. sass-autocompile
Neben autoprefixer das für mich das wohl wichtigste Tool in meiner Sammlung: Mit diesem Package, entwickelt von Armin Pfäffle, werden aus SASS/SCSS-Dateien browserverständliche CSS-Dateien generiert. Auf Wunsch geschieht dies bei jedem Speichervorgang und zwar sowohl in normaler als auch in komprimierter (minifizierter) Form.
Link: atom.io/packages/sass-autocompile
5. terminal-tab
Manchmal ist unumgänglich, dass Anweisungen über die betriebsystemspezifische Terminal-Anwendung ausgeführt werden. Mithilfe des folgenden Packages funktioniert das auch direkt aus dem Code-Editor heraus. Zumindest unter macOS funktioniert das ganz gut.
Link: atom.io/packages/terminal-tab
Hinweis: Eine für das Nachfolgeprodukt Pulsar aktualisierte und erweiterte Liste von Packages findet sich hier.