Atom: Das kann der Code-Editor von GitHub

Atom, der Code-Editor von GitHub, wurde ursprünglich im Mai 2014 von dem Team von GitHub veröffentlicht. Als Open Source Editor wurde Atom über die letzten 2 Jahre extrem populär. Für manche ist es sogar der Sublime-Killer. Und damit übertreibe ich nicht.

Heute zeige ich Ihnen die besten Tipps, Tricks und Shortcuts bei der Nutzung von Atom.

Interessantes Thema? Teilen Sie diesen Artikel ❤️

Was ist Atom?

Für alle Einsteiger hier, lassen Sie mich Ihnen kurz ein paar Einblicke in Atom geben. Atom 1.0 wurde im Mai 2014 als voll funktionstüchtiger Texteditor für moderne Anforderungen veröffentlicht.

Im Mai 2016 gab das Team hinter Atom ein paar ziemlich eindrucksvolle Statistiken bekannt. MIt insgesamt 15,9 Millionen Downloads und 1,1 Millionen monatlichen Usern kann man sagen, dass Atom weltweite Aufmerksamkeit erhalten hat.

Ok, es gibt tolle alternative Code-Editoren da draußen. Heute will ich Ihnen aber ein paar Profi-Tipps für Atom geben. Und wie Sie durch dessen Nutzung besser und produktiver sein können.

Es geht nicht um die Tools. Es geht darum, wie Sie sie benutzen.

Bevor wir also anfangen, laden Sie Atom unter atom.io herunter.

Atom einrichten – die Grundlagen

Bevor wir zu den Pro-Tipps und -Details kommen, lassen Sie mich Ihnen schnell eine Tour geben, wie Sie die wichtigsten Dinge (so wie Fonts, Stile, Templates, etc.) innerhalb Ihres neuen Atom Code-Editors einstellen können.

Font-Familie & -Größe

Atom kommt mit einer netten standardmäßigen Font-Familie (Monaco). Falls Sie den Font trotzdem ändern möchten, können Sie dies unter Atom > Preferences machen. In den Editor-Einstellungen können Sie die Font-Familie und -Größe einstellen. Ziemlich gut.

atom-settings

Split-Screen

Sie haben einen großen Bildschirm und wollen bestimmte Dateien nebeneinander haben? Kein Problem. Rechts-klicken Sie einfach und wählen Sie “Split left” oder “Split right”. Das wars auch schon.

split-screen-atom

Scroll Past End

Falls Sie die “Scroll Past End” Option wählen, erlaubt Ihnen der Editor, nach der letzten Zeile weiterzuscrollen. Das klingt vielleicht irrelevant, aber es ist eines dieser kleinen Details, die es mit erlauben, mehr aus meinem Atom herauszuholen.

scroll-past-end

Show Indent Guide & Invisibles

Noch eine kleine aber sehr hilfreiche Einstellung ist, Ident-Guide & Invisibles anzuzeigen. Abhängig von Ihren Einstellungen können Sie Indention-Indikatoren und Invisibles in Ihrem Atom-Editor anzeigen.

atom-editor-settings

Atom Themes

Atom kommt mit einer Menge an Default-Themes. Das Dark Theme (welches Sie wahrscheinlich nutzen oder bei anderen Leuten gesehen haben) ist das Standard-Default-Theme und erinnert mich ein bisschen an Sublime.

In seiner derzeitigen Version kommt Atom mit 4 Standard-UI-Themes, die unter Settings > Themes eingestellt werden können.

Falls Sie neue Templates installieren möchten, wechseln Sie zum Install Tab.

install-atom-themes

Und voila, ich habe soeben ein neues Theme installiert, und nachdem ich dieses aktiviere, kann ich Atom mit einem komplett neuen Interface benutzen (was halten Sie von diesem Produktdesign)?

atom-new-theme

Falls Sie dazu das Syntax-Theme Ihres Editors ändern wollen, dann können Sie dies tun, indem Sie ein neues Syntax-Theme installieren, das auch unter dem Themes Tab aktiviert werden kann.

Atom Pakete

Mit Paketen können Sie Ihren Atom Editor sogar noch mächtiger machen. Es gibt verschiedene tolle Pakete da draußen und ich kann Ihnen zum Beispiel die folgenden empfehlen:

Minimap – Sehen Sie sich ein Preview des kompletten Source-Codes an: https://atom.io/packages/minimap

Emmet – Auto-Complete Paket: https://atom.io/packages/emmet

Pigments – ein einfaches Paket um Farben in Projekten und Dateien anzuzeigen: https://github.com/abe33/atom-pigments

Git-Plus Package – Erstellen Sie Commits ohne Ihren Terminal: https://atom.io/packages/git-plus

Für weitere Empfehlungen für Pakete, lesen Sie sich diesen Artikel durch.

source-code-preview-atom

Atom Tipps & Tricks

Sehen wir uns nun ein paar sehr nette Tipps zur Nutzung von Atom an.

Mehrfache Cursor

Sie haben mehrere <li> Elemente und wollen zur gleichen Zeit etwas tippen? Mit Support für mehrfache Cursor ist Atom Ihr Freund.

Halten Sie einfach CMD (auf Mac) oder CTRL (auf Windows) und klicken Sie auf jeden Ort, an dem Sie etwas schreiben wollen. Einfach nur wow.

Textbearbeitungs-Tools

Manchmal müssen Sie den Stil Ihres Textes ändern. Vielleicht wollen Sie ihn in Upper Case oder Lower Case haben.

Markieren Sie einfach den Text und gehen Sie dann zu  Edit > Text und wählen Sie Ihre bevorzugte Option.

text-manipulation-atom

Atom Keyboard-Shortcuts

Wer liebt Keyboard-Shortcuts nicht? Sie machen das Leben um so viel einfacher und erlauben es Ihnen, einfach schneller zu arbeiten.

Die meiste Zeit vergessen wir die Shortcuts, die wir nur selten benutzen, und bleiben bei denen, die wir täglich benutzen.

Duplicate a Line.

Das ist ein echter Lebensretter. Gehen Sie zu einer beliebigen Zeile in Ihrem Atom Editor und benutzen Sie den folgenden Shortcut um diese Zeile zu Copy/Pasten.

  • Auf Mac: Cmd + Shift + D
  • In Windows: Ctrl + Shift + D

keyboard-shortcut-copy-paste-atom

Einfacher geht’s nicht.

Das nächste Wort auswählen.

Dieser Keyboard-Shortcut erlaubt es Ihnen, das nächste Wort oder die nächsten Buchstaben auszuwählen.

  • Auf Mac: Cmd + D
  • In Windows: Ctrl + D

Und voila. Ihr Wort wird ausgewählt.

Das nächste Wort abwählen.

Naja, dieser Shortcut bietet dieselbe Funktion, nur anders herum. Sie wollen die Auswahl eines Wortes oder Buchstabens umkehren? Benutzen Sie den.

  • Auf Mac: Cmd + U
  • In Windows: Ctrl + U

Alle gleichartigen Buchstaben markieren.

Dieser Shortcut gefällt mir besonders. Falls Sie alle gleichartigen Buchstaben in einer Datei auf einmal verändern wollen, werden Sie diesen lieben.

  • Auf Mac: Cmd + Ctrl + G
  • In Windows: Alt + F3

buld-edit-atom

Einfache Kommentare.

Last but not least, lassen Sie mich Ihnen zeigen wie Sie Ihren Code ganz einfach in Kommentarzeilen verwandeln können. Mit dem folgenden Shortcut können Sie Ihren Code in ein Kommentar verwandeln, oder Ihr Kommentar in eine Zeile Code.

  • Auf Mac: Cmd + /
  • In Windows: Ctrl + /

Fazit.

Wow. Das war eine Menge, nicht wahr? Ich hoffe, Sie fanden diese Tipps und Tricks nützlich. Und sogar noch besser, vielleicht nehmen Sie sie in Ihre tägliche Arbeit auf. Denn vertrauen Sie mir: sie sind ein echter Produktivitäts-Booster.
Fehlt irgendein Paket, Tipp oder Trick? Lassen Sie uns davon in den Kommentaren unten wissen.

Interessantes Thema? Teilen Sie diesen Artikel ❤️