Heinrich Schiller  05.04.2019 20:33

Der Editor Atom und Erweiterungen die ich nutze. Teil 1

Ich habe ein GitHub-Repository, wo ich regelmäßig meinen Code lagere, und seit ungefähr einem halben Jahr weiß ich auch das GitHub einen eigenen Editor names Atom anbietet. Seit wenigen Monaten nutze ich also Atom, davor war es die Eclipse IDE. Genau wie Eclipse ist Atom für verschiedene Betriebssysteme verfügbar, durch Plugins erweiterbar, basiert auf Webtechnologien und hat grafische Werkzeuge um direkt mit GitHub zu arbeiten. Letzteres ist für mich ein Grund den Atom zu nutzen. Einen ähnlichen Weg geht auch Microsofts Visual Studio Code, welchen ich zumindest Perfomance-technisch als besseren Editor ansehe. Aber Atom finde ich zumindest übersichtlicher und durch die angebotenen Erweiterungen muss er sich nicht vor Visual Studio Code verstecken.

Jetzt geht es um solche Erweiterungen :-)

1. Emmet-Atom

Emmet-Atom habe ich zusammen mit Atom kennen gelernt und finde es irre Praktisch. Kleine Kostprobe gefälligst?

table>(thead>tr>th{text $}*35)+(tbody>(tr>th{$}+td#id$.lala${$}*34)*7)

Diese Anweisung habe ich tatsächlich mal gebraucht und es erspart einem sehr viel Tipparbeit :-)
Empfehlenswert ist zudem in den Emmet-Cheat-Sheets zu stöbern und so eigene Konstrukte zu bauen. Anweisungen wie diese hier speichere ich dann im meinem lokalem Wiki.

2. File-Icons

Ich finde der Atom ist schon übersichtlich. Im Vergleich zum Visual Studio Code, komme ich mit der Projektübersicht von Atom sofort zurecht. Aber es geht noch etwas hübscher und übersichtlicher dank der Erweiterung, file-icons. Atom sind die Icons standardmäßig grau. Verschiedene Dateien und Ordner werden durch die Erweiterung nun unterschiedlich dargestellt. Man sieht sehr schnell ob es sich um ein HTML, JS oder PHP Datei handelt. Die Navigation wird insgesamt erleichtert und beschleunigt.

3. Highlight-Selected

In der Beschaffung der Übersicht geht es weiter mit highlight-selected.  Gleiche Wörter werden nun besonders hervorgehoben. So kann man zum Beispiel schnell erkennen, ob man sich bei einem Fehler vertippt hat.

4. Atom-Beautify

atom-beautify kann auf Knopfdruck den gesamten Code oder nur ausgewählte Teile davon, automatisch einrücken.

5. Symbols-Tree-View

Mit symbols-tree-view wird Atom um eine zusätzliche Anzeige erweitert. Hier werden die Variablen und Funktionen/Methoden angezeigt. Anstatt durch das ganze Dokument hin und her zu scrollen, kann man die gewünschte Variable oder Funktion direkt anwählen und springen.

Fazit

Anfangs als ich oft die Eclipse IDE benutzt habe, war der anfängliche Umgang mit Atom gewöhnungsbedürftig. Mir haben am Anfang einige Funktionalitäten gefehlt, die ich von Eclipse her kannte. Es ist zum Teil auch immer noch so, aber mit den oben genannten Erweiterungen konnte ich schon viel an vermisster Funktionalität nach holen und sogar ausbauen. Emmet gibt es meines Wissens zum Beispiel nicht für Eclipse.Ich habe noch nicht alle Erweiterungen die ich nutze hier genannt. Schlicht weil ich diese zwar nutze aber noch nicht vollständig analysiert habe. So gibt es zum Beispiel Erweiterungen um in PHP schnell die Getter und Setter zu setzen. Farben für CSS auswählen und so weiter.

Das möchte ich dann zum späterem Zeitpunkt nach holen.