--- title: "10 nützliche Atom Texteditor Erweiterungen für Webentwickler" author: "Ellen Bauer" date: 2016-11-27 lang: de source: https://elmastudio.de/10-nuetzliche-atom-texteditor-erweiterungen-fuer-webentwickler/ --- # 10 nützliche Atom Texteditor Erweiterungen für Webentwickler Vor circa drei Monaten habe ich von [Coda2](https://panic.com/coda/) zu [Atom](https://atom.io/) gewechselt. Ich hatte Coda2 seit mehreren Jahren genutzt und war ehrlich gesagt etwas im Programm eingerostet. Ich meine damit, dass ich Coda zwar täglich genutzt habe, aber ohne dabei meinen Workflow wirklich weiter zu optimieren. Seitdem ich den Open-Source Editor Atom (entwickelt von GitHub) verwende, habe ich mir einige sehr praktischen Packages zur Optimierung meiner täglichen Arbeit im Editor installiert. Im folgenden Artikel habe ich eine Liste, der aus meiner Ansicht nach hilfreichsten Atom Packages zusammen gestellt. ## 1. Minimap ![atom-packages-01](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-01.jpg) Mit [Minimap](https://atom.io/packages/minimap) bekommst du rechts im Editor-Fenster eine kleine Ansicht deiner kompletten Datei angezeigt. So kannst du leichter die Übersicht über deine Datei behalten und gleichzeitig schnell in der Datei hoch und runter scrollen. Das ist natürlich besonders hilfreich, wenn du oft mit sehr langen Dateien, z.B. Stylesheets arbeitest. ## 2. Project Manager ![atom-packages-02](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-02.jpg) Um leichter auf deine unterschiedlichen Projekte zugreifen zu können, kannst du das [Project Manager](https://atom.io/packages/project-manager) Package installieren. So kannst du einen offenen Projekt-Ordner mit dem Command "Project Manager: Save Project" speichern. Mit der Tastenkombination ctrl-cmd-p (mac) / alt-shift-P (win & linux) kannst du dann immer schnell auf die Liste deiner gespeicherten Projekte zugreifen. ## 3. Emmet ![atom-packages-03](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-03.gif) Mit der Hilfe von [Emmet](https://docs.emmet.io/) kannst du sehr viel schneller Code schreiben. Emmet ist eine Art Abkürzungs-System für HTML und CSS, das mit ein bisschen Übung deinen Workflow extrem erleichtern kann. Am Anfang kannst du dir das [Emmet Cheatsheet](https://docs.emmet.io/cheat-sheet/) anschauen, um die wichtigsten Abkürzungen zu lernen. Mit Hilfe des [Emmet Packages](https://atom.io/packages/emmet) für Atom kannst du Emmet auch in Atom Texteditor nutzen. ## 4. Atom Alignment ![atom-packages-04](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-04.gif) Um deine Dateien aufzuräumen und alle gleichen Elemente deines Codes auf eine saubere Linie zu bringen, ist das Package [Atom Alignment](https://atom.io/packages/atom-alignment) hilfreich. Mit der Tastenkombination ctrl+cmd+a (Mac) oder ctrl+alt+a kannst du Elemente ganz schnell anordnen. ## 5. Highlight Selected ![atom-packages-05](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-05.gif) Wenn du alle gleichen Elemente eines markierten Elements ebenfalls hervorzuheben, kannst du das beliebte [Highlight Selected](https://atom.io/packages/highlight-selected) Package installieren. Um ausgewählte Elemente auch in deiner Minimap markiert zu sehen, kannst du zusätzlich noch das [Minimap Highlight Selected](https://atom.io/packages/minimap-highlight-selected) Package installieren. ## 6. Color Picker ![atom-packages-06](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-06.jpg) Bei Coda2 ist der Color Picker standardmäßig mit dabei gewesen. Im Atom-Editor kannst du diese Funktion mit Hilfe des [Color Picker](https://atom.io/packages/color-picker) Packages erweitern, um leicht Farbwerte im Editor auszuwählen. In den Package Settings kannst du dabei bestimmen, ob du RGB oder Hexwerte verwenden möchtest. ## 7. Pigments ![atom-packages-07](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-07.jpg) Ein weiteres praktisches Package für das Arbeiten mit Farbwerten ist [Pigments](https://atom.io/packages/pigments). Nach der Installation werden alle Farbwerte in der entsprechenden Farbe markiert. So kannst du leicht sehen, welche Farbe du nutzt, ohne den Farbwert automatisch zu kennen. Bei einem Projekt mit mehreren Farben kann das sehr nützlich sein. Zusätzlich dazu kannst du dir auch eine Tabelle mit allen Farben eines Projektes anzeigen lassen. ## 8. Open Recent Files/Folders ![atom-packages-08](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-08.jpg) Eine Liste der zuletzt geöffneten Dateien angezeigt zu bekommen, ist ebenfalls sehr praktisch. Von Coda 2 war ich diese Funktion auch gewohnt, daher habe ich sie mir mit dem [Open Recent Files/Folders](https://atom.io/packages/open-recent) Package auch für für Atom installiert. ## 9. File Icons ![atom-packages-09](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-09.jpg) Ein weiterer kleiner Helfer, der das Arbeiten mit mehreren Dateitypen in einem Projektordner erleichtert ist [File Icons](https://atom.io/packages/file-icons). Ohne das Package werden alle Icons einfarbig und in einem Standard-Design angezeigt. Übersichtlicher ist die Ansicht mit File Icons, denn so bekommst du bunte, spezielle Icons für jeden Datei-Typ angezeigt. ## 10. Autocomplete WordPress Hooks ![atom-packages-10](https://elmastudio.de/wp-content/uploads/2016/11/atom-packages-10.gif) Für alle die mit WordPress arbeiten, ist das [Autocomplete WordPress Hooks](https://atom.io/packages/autocomplete-wordpress-hooks) Package einer weitere nützliche Hilfe. So kannst du dir das Schreiben von WordPress Filtern und Hooks erheblich erleichtern. ## So synchronisiert du deine Atom Settings Wenn du deine Atom Settings auch an einem anderen Computer nutzen möchtest, kannst du deine Einstellungen mit Hilfe eines Gists synchronisieren. Dazu musst du das Package [Sync Settings for Atom](https://atom.io/packages/sync-settings) installieren und der genauen Anleitung in den Package Settings folgen. Du benötigst ein [GitHub-Konto](https://github.com/) für das Speichern deiner Einstellungen. ## Weitere Package Empfehlungen aus der Community Zur Vorbereitung auf den Beitrag habe ich via Twitter auch nach euren Atom-Package Empfehlungen gefragt und einige hilfreiche Tipps bekommen. Hier ein paar Tweets mit weiteren Atom-Package Empfehlungen aus der Twitter-Community: > [@ellenbauer](https://twitter.com/ellenbauer) Package Sync Settings let's you conveniently sync and backup your [@AtomEditor](https://twitter.com/AtomEditor) settings. [https://t.co/uw2meXONqj](https://t.co/uw2meXONqj) > > — Bego Mario Garde (@pixolin) 25. November 2016 > [@ellenbauer](https://twitter.com/ellenbauer) I've made a gist: [https://t.co/EkMYzW5Dnx](https://t.co/EkMYzW5Dnx) > > — Claudio Schwarz (@purzlbaum) 25. November 2016 > [@ellenbauer](https://twitter.com/ellenbauer) [@AtomEditor](https://twitter.com/AtomEditor) I can recommend editorconfig for consistent indentation. Also I'm using a lot of [#javascript](https://twitter.com/hashtag/javascript?src=hash) related packages. [pic.twitter.com/z1XROqGhQA](https://t.co/z1XROqGhQA) > > — Lars Graubner (@larsgraubner) [25. November 2016](https://twitter.com/larsgraubner/status/802087122643644416) > [@ellenbauer](https://twitter.com/ellenbauer) [@AtomEditor](https://twitter.com/AtomEditor) emmet, platformio-ide-terminal,project manager > > — Luca Bertaiola (@luglio7) 25. November 2016 Welche Packages für den Atom Editor nutzt du, um deinen Workflow zu verbessern? Schreib mir deine Favoriten doch einfach in einem Kommentar, ich freue mich auf deine Antwort.