Atom: 5 sinn­vol­le Packa­ges für den Code-Editor

Eine alte Hand­wer­ker-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­tra­gen und gilt somit auch für den Bereich der Webent­wick­lung. Das wich­tigs­te Werk­zeug hier­für ist aus meiner Sicht ein guter Code-Editor.

Auf der Suche nach einem eben solchen bin ich schon vor eini­ger Zeit auf den Atom Editor gesto­ßen. Hier­bei handelt es sich um eine leis­tungs­fä­hi­ge Open-Source-Lösung, die platt­form­über­grei­fend nutz­bar ist und aus demsel­ben Hause wie die kolla­bo­ra­ti­ve Entwick­lungs­platt­form GitHub stammt.

Eine der großen Vortei­le dieses Code-Editors ist seine Wandel- und Erwei­ter­bar­keit: Neben vielen Darstel­lungs­sti­len (Themes) bietet das offi­zi­el­le Repo­si­to­ri­um eine schein­bar endlo­se Zahl an Packa­ges, wie Plug­ins bei Atom genannt werden, zur Verfü­gung. Nach­fol­gend stel­le ich kurz Packa­ges vor, die ich für meinen eige­nen Work­flow entdeckt habe:

1. auto­pre­fi­xer

Das World Wide Web Consor­ti­um (W3C) entwi­ckelt die Style­sheet-Spra­che CSS laufend weiter und ergänzt diese um neue Features und Funk­tio­nen. Brow­ser­her­stel­ler nutzen soge­nann­te CSS-Brow­ser­prä­fi­xe (auch Vendor-Präfi­xe), um in ihren Produk­ten eine Unter­stüt­zung für derar­ti­ge Funk­tio­nen anzu­bie­ten, noch ehe diese in allen Brow­sern voll­stän­dig umge­setzt sind.

Mit diesem von sindre­sor­hus entwi­ckel­ten Packa­ge steht ein prak­ti­scher Helfer zur Verfü­gung. Es erzeugt auto­ma­tisch den brow­ser-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 Packa­ge behebt einen Fehler des Code-Editors, bei dem das Einfü­gen von einge­rück­ten Zeilen mit einem führen­den Zeilen­um­bruch immer weiter einge­rückt wird. Es stellt sicher, dass alle Einzugs­än­de­run­gen von der Opti­on „Auto­ma­ti­scher Einzug beim Einfü­gen“ gesteu­ert werden.

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

3. file-icons

file-icons vom gleich­na­mi­gen Entwick­ler (wich­tig, denn es gibt mehre­re Packa­ges mit ähnli­cher Titu­lie­rung) ermög­licht es Atom im Datei- und Verzeich­nis­baum sowie in geöff­ne­ten Tabs datei­spe­zi­fi­sche Symbo­le anzu­zei­gen. Sorgt so für eine verbes­ser­te visu­el­le Wahr­neh­mung der unter­schied­li­chen Projekt­da­tei­en.

Link: atom.io/packages/file-icons

4. sass-auto­com­pi­le

Neben auto­pre­fi­xer das für mich das wohl wich­tigs­te Tool in meiner Samm­lung: Mit diesem Packa­ge, entwi­ckelt von Armin Pfäff­le, werden aus SASS/SCSS-Datei­en brow­ser­ver­ständ­li­che CSS-Datei­en gene­riert. Auf Wunsch geschieht dies bei jedem Spei­cher­vor­gang und zwar sowohl in norma­ler als auch in kompri­mier­ter (mini­fi­zier­ter) Form.

Link: atom.io/packages/sass-autocompile

5. termi­nal-tab

Manch­mal ist unum­gäng­lich, dass Anwei­sun­gen über die betrieb­sys­tem­spe­zi­fi­sche Termi­nal-Anwen­dung ausge­führt werden. Mithil­fe des folgen­den Packa­ges 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­sier­te und erwei­ter­te Liste von Packages findet sich hier.