{"id":1799,"date":"2017-02-14T11:13:38","date_gmt":"2017-02-14T10:13:38","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=1799"},"modified":"2017-02-14T13:13:23","modified_gmt":"2017-02-14T12:13:23","slug":"atom-tipps","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/atom-tipps\/","title":{"rendered":"Atom: Das kann der Code-Editor von GitHub"},"content":{"rendered":"<p>Atom, der Code-Editor von GitHub, wurde urspr\u00fcnglich im Mai 2014 von dem Team von GitHub ver\u00f6ffentlicht. Als Open Source Editor wurde Atom \u00fcber die letzten 2 Jahre extrem popul\u00e4r. F\u00fcr manche ist es sogar der Sublime-Killer. Und damit \u00fcbertreibe ich nicht.<\/p>\n<p>Heute zeige ich Ihnen die besten Tipps, Tricks und Shortcuts bei der Nutzung von Atom.<\/p>\n<p><!--more--><\/p>\n<h2>Was ist Atom?<\/h2>\n<p>F\u00fcr alle Einsteiger hier, lassen Sie mich Ihnen kurz ein paar Einblicke in <a href=\"https:\/\/atom.io\/\"  target=\"_blank\"  >Atom<\/a> geben. Atom 1.0 wurde im Mai 2014 als voll funktionst\u00fcchtiger Texteditor f\u00fcr moderne Anforderungen ver\u00f6ffentlicht.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/Y7aEiVwBAdk?rel=0\" width=\"560\" height=\"315\" frame allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>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.<\/p>\n<p>Ok, es gibt tolle alternative Code-Editoren da drau\u00dfen. Heute will ich Ihnen aber ein paar Profi-Tipps f\u00fcr Atom geben. Und wie Sie durch dessen Nutzung besser und produktiver sein k\u00f6nnen.<\/p>\n<p><b><i>Es geht nicht um die Tools. Es geht darum, wie Sie sie benutzen.<\/i><\/b><\/p>\n<p>Bevor wir also anfangen, laden Sie Atom unter <a href=\"https:\/\/atom.io\/\"  target=\"_blank\"  >atom.io<\/a> herunter.<\/p>\n<h2>Atom einrichten &#8211; die Grundlagen<\/h2>\n<p>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\u00f6nnen.<\/p>\n<p><b>Font-Familie &amp; -Gr\u00f6\u00dfe<\/b><\/p>\n<p>Atom kommt mit einer netten standardm\u00e4\u00dfigen Font-Familie (Monaco). Falls Sie den Font trotzdem \u00e4ndern m\u00f6chten, k\u00f6nnen Sie dies unter <b><i>Atom &gt; Preferences<\/i><\/b> machen. In den Editor-Einstellungen k\u00f6nnen Sie die Font-Familie und -Gr\u00f6\u00dfe einstellen. Ziemlich gut.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1816\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-settings-1-1024x252.png\" alt=\"atom-settings\" width=\"724\" height=\"178\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-settings-1.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-settings-1-300x74.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-settings-1-140x34.png 140w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><\/p>\n<p><b>Split-Screen<\/b><\/p>\n<p>Sie haben einen gro\u00dfen Bildschirm und wollen bestimmte Dateien nebeneinander haben? Kein Problem. Rechts-klicken Sie einfach und w\u00e4hlen Sie \u201c<b><i>Split left<\/i><\/b>\u201d oder \u201c<b><i>Split right<\/i><\/b>\u201d. Das wars auch schon.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1801\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/split-screen-atom-1024x546.png\" alt=\"split-screen-atom\" width=\"704\" height=\"375\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/split-screen-atom-1024x546.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/split-screen-atom-300x160.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/split-screen-atom-140x75.png 140w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/split-screen-atom.png 1100w\" sizes=\"(max-width: 704px) 100vw, 704px\" \/><\/p>\n<p><b><i>Scroll Past End<\/i><\/b><\/p>\n<p>Falls Sie die \u201cScroll Past End\u201d Option w\u00e4hlen, 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.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1812\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/scroll-past-end-1024x390.png\" alt=\"scroll-past-end\" width=\"724\" height=\"276\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/scroll-past-end-1024x390.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/scroll-past-end-300x114.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/scroll-past-end-140x53.png 140w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/scroll-past-end.png 1438w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><\/p>\n<p><b><i>Show Indent Guide &amp; Invisibles<\/i><\/b><\/p>\n<p>Noch eine kleine aber sehr hilfreiche Einstellung ist, Ident-Guide &amp; Invisibles anzuzeigen. Abh\u00e4ngig von Ihren Einstellungen k\u00f6nnen Sie Indention-Indikatoren und Invisibles in Ihrem Atom-Editor anzeigen.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1817\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-editor-settings-1.gif\" alt=\"atom-editor-settings\" width=\"551\" height=\"185\" \/><\/p>\n<h2>Atom Themes<\/h2>\n<p>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.<\/p>\n<p>In seiner derzeitigen Version kommt Atom mit 4 Standard-UI-Themes, die unter <b><i>Settings &gt; Themes<\/i><\/b> eingestellt werden k\u00f6nnen.<\/p>\n<p>Falls Sie neue Templates installieren m\u00f6chten, wechseln Sie zum <b><i>Install<\/i><\/b> Tab.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1810\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/install-atom-themes.png\" alt=\"install-atom-themes\" width=\"701\" height=\"345\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/install-atom-themes.png 991w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/install-atom-themes-300x148.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/install-atom-themes-140x69.png 140w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/p>\n<p>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)?<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1809\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-new-theme-1024x743.png\" alt=\"atom-new-theme\" width=\"724\" height=\"525\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-new-theme-1024x743.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-new-theme-300x218.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-new-theme-140x102.png 140w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/atom-new-theme.png 1275w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><\/p>\n<p>Falls Sie dazu das Syntax-Theme Ihres Editors \u00e4ndern wollen, dann k\u00f6nnen Sie dies tun, indem Sie ein neues Syntax-Theme installieren, das auch unter dem <b><i>Themes<\/i><\/b> Tab aktiviert werden kann.<\/p>\n<h2>Atom Pakete<\/h2>\n<p>Mit Paketen k\u00f6nnen Sie Ihren Atom Editor sogar noch m\u00e4chtiger machen. Es gibt verschiedene tolle Pakete da drau\u00dfen und ich kann Ihnen zum Beispiel die folgenden empfehlen:<\/p>\n<p><b><i>Minimap<\/i><\/b> &#8211; Sehen Sie sich ein Preview des kompletten Source-Codes an: <a href=\"https:\/\/atom.io\/packages\/minimap\"  target=\"_blank\"  >https:\/\/atom.io\/packages\/minimap<\/a><\/p>\n<p><b><i>Emmet<\/i><\/b> &#8211; Auto-Complete Paket: <a href=\"https:\/\/atom.io\/packages\/emmet\"  target=\"_blank\"  >https:\/\/atom.io\/packages\/emmet<\/a><\/p>\n<p><b><i>Pigments<\/i><\/b> &#8211; ein einfaches Paket um Farben in Projekten und Dateien anzuzeigen: <a href=\"https:\/\/github.com\/abe33\/atom-pigments\"  target=\"_blank\"  >https:\/\/github.com\/abe33\/atom-pigments<\/a><\/p>\n<p><b><i>Git-Plus Package<\/i><\/b> &#8211; Erstellen Sie Commits ohne Ihren Terminal: <a href=\"https:\/\/atom.io\/packages\/git-plus\"  target=\"_blank\"  >https:\/\/atom.io\/packages\/git-plus<\/a><\/p>\n<p>F\u00fcr weitere Empfehlungen f\u00fcr Pakete, lesen Sie sich <a href=\"https:\/\/www.sitepoint.com\/10-essential-atom-add-ons\/\"  target=\"_blank\"  >diesen Artikel<\/a> durch.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1807\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/source-code-preview-atom-1024x595.png\" alt=\"source-code-preview-atom\" width=\"700\" height=\"407\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/source-code-preview-atom-1024x595.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/source-code-preview-atom-300x174.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/source-code-preview-atom-140x81.png 140w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/source-code-preview-atom.png 1187w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>Atom Tipps &amp; Tricks<\/h2>\n<p>Sehen wir uns nun ein paar sehr nette Tipps zur Nutzung von Atom an.<\/p>\n<p><b><i>Mehrfache Cursor<\/i><\/b><\/p>\n<p>Sie haben mehrere &lt;li&gt; Elemente und wollen zur gleichen Zeit etwas tippen? Mit Support f\u00fcr mehrfache Cursor ist Atom Ihr Freund.<\/p>\n<p>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.<\/p>\n<p><b><i>Textbearbeitungs-Tools<\/i><\/b><\/p>\n<p>Manchmal m\u00fcssen Sie den Stil Ihres Textes \u00e4ndern. Vielleicht wollen Sie ihn in <b>Upper Case<\/b> oder <b>Lower Case<\/b> haben.<\/p>\n<p>Markieren Sie einfach den Text und gehen Sie dann zu \u00a0<b><i>Edit &gt; Text<\/i><\/b> und w\u00e4hlen Sie Ihre bevorzugte Option.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1802\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/text-manipulation-atom.png\" alt=\"text-manipulation-atom\" width=\"497\" height=\"139\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/text-manipulation-atom.png 497w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/text-manipulation-atom-300x84.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/text-manipulation-atom-140x39.png 140w\" sizes=\"(max-width: 497px) 100vw, 497px\" \/><\/p>\n<h2>Atom Keyboard-Shortcuts<\/h2>\n<p>Wer liebt Keyboard-Shortcuts nicht? Sie machen das Leben um so viel einfacher und erlauben es Ihnen, einfach schneller zu arbeiten.<\/p>\n<p>Die meiste Zeit vergessen wir die Shortcuts, die wir nur selten benutzen, und bleiben bei denen, die wir t\u00e4glich benutzen.<\/p>\n<p><b><i>Duplicate a Line.<\/i><\/b><\/p>\n<p>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.<\/p>\n<ul>\n<li>Auf Mac: Cmd + Shift + D<\/li>\n<li>In Windows: Ctrl + Shift + D<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1806\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/keyboard-shortcut-copy-paste-atom.gif\" alt=\"keyboard-shortcut-copy-paste-atom\" width=\"279\" height=\"184\" \/><\/p>\n<p>Einfacher geht\u2019s nicht.<\/p>\n<p><b><i>Das n\u00e4chste Wort ausw\u00e4hlen.<\/i><\/b><\/p>\n<p>Dieser Keyboard-Shortcut erlaubt es Ihnen, das n\u00e4chste Wort oder die n\u00e4chsten Buchstaben auszuw\u00e4hlen.<\/p>\n<ul>\n<li>Auf Mac: Cmd + D<\/li>\n<li>In Windows: Ctrl + D<\/li>\n<\/ul>\n<p>Und voila. Ihr Wort wird ausgew\u00e4hlt.<\/p>\n<p><b><i>Das n\u00e4chste Wort abw\u00e4hlen.<\/i><\/b><\/p>\n<p>Naja, dieser Shortcut bietet dieselbe Funktion, nur anders herum. Sie wollen die Auswahl eines Wortes oder Buchstabens umkehren? Benutzen Sie den.<\/p>\n<ul>\n<li>Auf Mac: Cmd + U<\/li>\n<li>In Windows: Ctrl + U<\/li>\n<\/ul>\n<p><b><i>Alle gleichartigen Buchstaben markieren.<\/i><\/b><\/p>\n<p>Dieser Shortcut gef\u00e4llt mir besonders. Falls Sie alle gleichartigen Buchstaben in einer Datei auf einmal ver\u00e4ndern wollen, werden Sie diesen lieben.<\/p>\n<ul>\n<li>Auf Mac: Cmd + Ctrl + G<\/li>\n<li>In Windows: Alt + F3<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1805\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2017\/02\/buld-edit-atom.gif\" alt=\"buld-edit-atom\" width=\"197\" height=\"209\" \/><\/p>\n<p><b><i>Einfache Kommentare.<\/i><\/b><\/p>\n<p>Last but not least, lassen Sie mich Ihnen zeigen wie Sie Ihren Code ganz einfach in Kommentarzeilen verwandeln k\u00f6nnen. Mit dem folgenden Shortcut k\u00f6nnen Sie Ihren Code in ein Kommentar verwandeln, oder Ihr Kommentar in eine Zeile Code.<\/p>\n<ul>\n<li>Auf Mac: Cmd + \/<\/li>\n<li>In Windows: Ctrl + \/<\/li>\n<\/ul>\n<h2>Fazit.<\/h2>\n<p>Wow. Das war eine Menge, nicht wahr? Ich hoffe, Sie fanden diese Tipps und Tricks n\u00fctzlich. Und sogar noch besser, vielleicht nehmen Sie sie in Ihre t\u00e4gliche Arbeit auf. Denn vertrauen Sie mir: sie sind ein echter Produktivit\u00e4ts-Booster.<br \/>\n<b><i>Fehlt irgendein Paket, Tipp oder Trick? Lassen Sie uns davon in den Kommentaren unten wissen. <\/i><\/b><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Atom, der Code-Editor von GitHub, wurde urspr\u00fcnglich im Mai 2014 von dem Team von GitHub ver\u00f6ffentlicht. Als Open Source Editor wurde Atom \u00fcber die letzten 2 Jahre extrem popul\u00e4r. F\u00fcr manche ist es sogar der Sublime-Killer. Und damit \u00fcbertreibe ich nicht. Heute zeige ich Ihnen die besten Tipps, Tricks und Shortcuts bei der Nutzung von [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1803,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1799"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1799\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1803"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}