Atom: 5 sinn­volle Packages für den Code-Editor

Eine alte Hand­werker-Regel lautet: „Für gute Arbeit braucht man gutes Werk­zeug“. Dieser Ausspruch lässt sich grund­sätz­lich auf alle Formen der Arbeit über­tragen und gilt somit auch für den Bereich der Webent­wick­lung. Das wich­tigste Werk­zeug 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 leis­tungs­fä­hige Open-Source-Lösung, die platt­form­über­grei­fend nutzbar ist und aus demselben Hause wie die kolla­bo­ra­tive Entwick­lungs­platt­form GitHub stammt.

Eine der großen Vorteile dieses Code-Editors ist seine Wandel- und Erwei­ter­bar­keit: Neben vielen Darstel­lungs­stilen (Themes) bietet das offi­zi­elle Repo­si­to­rium eine scheinbar endlose Zahl an Packages, wie Plugins bei Atom genannt werden, zur Verfü­gung. Nach­fol­gend stelle ich kurz Packages vor, die ich für meinen eigenen Work­flow entdeckt habe:

1. auto­pre­fixer

Das World Wide Web Consor­tium (W3C) entwi­ckelt die Style­sheet-Sprache CSS laufend weiter und ergänzt diese um neue Features und Funk­tionen. Brow­ser­her­steller nutzen soge­nannte CSS-Brow­ser­prä­fixe (auch Vendor-Präfixe), um in ihren Produkten eine Unter­stüt­zung für derar­tige Funk­tionen anzu­bieten, noch ehe diese in allen Brow­sern voll­ständig umge­setzt sind.

Mit diesem von sindre­sorhus entwi­ckelten Package steht ein prak­ti­scher Helfer zur Verfü­gung. Es erzeugt auto­ma­tisch den browser-spezi­fi­schen CSS-Code, sodass man sich hier­rü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 „Auto­ma­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 ähnli­cher Titu­lie­rung) ermög­licht es Atom im Datei- und Verzeich­nis­baum sowie in geöff­neten Tabs datei­spe­zi­fi­sche Symbole anzu­zeigen. Sorgt so für eine verbes­serte visu­elle Wahr­neh­mung der unter­schied­li­chen Projekt­da­teien.

Link: atom.io/packages/file-icons

4. sass-auto­com­pile

Neben auto­pre­fixer das für mich das wohl wich­tigste Tool in meiner Samm­lung: Mit diesem Package, entwi­ckelt von Armin Pfäffle, werden aus SASS/SCSS-Dateien brow­ser­ver­ständ­liche CSS-Dateien gene­riert. Auf Wunsch geschieht dies bei jedem Spei­cher­vor­gang und zwar sowohl in normaler als auch in kompri­mierter (mini­fi­zierter) Form.

Link: atom.io/packages/sass-autocompile

5. terminal-tab

Manchmal ist unum­gäng­lich, dass Anwei­sungen über die betrieb­sys­tem­spe­zi­fi­sche Terminal-Anwen­dung ausge­führt werden. Mithilfe des folgenden Packages funk­tio­niert das auch direkt aus dem Code-Editor heraus. Zumin­dest unter macOS funk­tio­niert das ganz gut.

Link: atom.io/packages/terminal-tab

Hinweis: Eine für das Nach­fol­ge­pro­dukt Pulsar aktua­li­sierte und erwei­terte Liste von Packages findet sich hier.