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

„Für gute Arbeit braucht man gutes Werk­zeug“, lau­tet eine alte Hand­wer­ker-Regel. Die­ser Aus­spruch lässt sich grund­sätz­lich auf alle For­men der Arbeit über­tra­gen und gilt somit auch für den Bereich der Web­ent­wick­lung. Das wich­tigs­te Werk­zeug hier­für ist aus mei­ner Sicht ein guter Code-Edi­tor.

Auf der Suche nach einem eben sol­chen bin ich schon vor eini­ger Zeit auf den Atom Edi­tor gesto­ßen. Hier­bei han­delt es sich um eine leis­tungs­fä­hi­ge Open-Source-Lösung, die platt­form­über­grei­fend nutz­bar ist und aus dem­sel­ben Hau­se wie die kol­la­bo­ra­ti­ve Ent­wick­lungs­platt­form Git­Hub stammt. 

Atom
Der Code-Edi­tor Atom.

Eine der gro­ßen Vor­tei­le von Atom ist sei­ne Wan­del- und Erwei­ter­bar­keit: Neben vie­len Dar­stel­lungs­sti­len (The­mes) bie­tet das offi­zi­el­le Repo­si­to­ri­um eine schein­bar end­lo­se Zahl an Packa­ges, wie Plugins bei Atom genannt wer­den, zur Ver­fü­gung. Nach­fol­gend stel­le ich kurz Packa­ges vor, die ich für mei­nen eige­nen Work­flow ent­deckt habe:

1. autoprefixer

Das World Wide Web Con­sor­ti­um (W3C) ent­wi­ckelt die Style­sheet-Spra­che CSS lau­fend wei­ter und ergänzt die­se um neue Fea­tures und Funk­tio­nen. Brow­ser­her­stel­ler nut­zen soge­nann­te CSS-Brow­ser­prä­fi­xe (auch Ven­dor-Prä­fi­xe), um in ihren Pro­duk­ten eine Unter­stüt­zung für der­ar­ti­ge Funk­tio­nen anzu­bie­ten, noch ehe die­se in allen Brow­sern voll­stän­dig umge­setzt sind.

Mit die­sem von sind­re­sor­hus ent­wi­ckel­ten Packa­ge steht ein prak­ti­scher Hel­fer zur Ver­fü­gung. Es erzeugt auto­ma­tisch den brow­ser-spe­zi­fi­schen CSS-Code, sodass man sich hier­rüber kei­nen Kopf mehr machen brauchen.

Link: atom.io/packages/autoprefixer

2. fix-ident-on-paste

Die­ses Packa­ge behebt einen Atom-Feh­ler, bei dem das Ein­fü­gen von ein­ge­rück­ten Zei­len mit einem füh­ren­den Zei­len­um­bruch immer wei­ter ein­ge­rückt wird. Es stellt sicher, dass alle Ein­zugs­än­de­run­gen von der Opti­on „Auto­ma­ti­scher Ein­zug beim Ein­fü­gen“ gesteu­ert werden.

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

3. file-icons

file-icons vom gleich­na­mi­gen Ent­wick­ler (wich­tig, denn es gibt meh­re­re Packa­ges mit ähn­li­cher Titu­lie­rung) ermög­licht es Atom im Datei- und Ver­zeich­nis­baum sowie in geöff­ne­ten Tabs datei­spe­zi­fi­sche Sym­bo­le anzu­zei­gen. Sorgt so für eine ver­bes­ser­te visu­el­le Wahr­neh­mung der unter­schied­li­chen Projektdateien.

Link: atom.io/packages/file-icons

4. sass-autocompile

Neben auto­pre­fi­xer das für mich das wohl wich­tigs­te Tool in mei­ner Samm­lung: Mit die­sem Packa­ge, ent­wi­ckelt von Armin Pfäff­le, wer­den aus SAS­S/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 nor­ma­ler als auch in kom­pri­mier­ter (mini­fi­zier­ter) Form.

Link: atom.io/packages/sass-autocompile

5. terminal-tab

Manch­mal ist unum­gäng­lich, dass Anwei­sun­gen über die betrieb­sys­tem­spe­zi­fi­sche Ter­mi­nal-Anwen­dung aus­ge­führt wer­den. Mit­hil­fe des fol­gen­den packa­ges funk­tio­niert das auch direkt aus dem Code-Edi­tor her­aus. Zumin­dest unter macOS funk­tio­niert das ganz gut.

Link: atom.io/packages/terminal-tab

Auch interessant