Drei Atom-Editor-Tipps, mit denen Sie Code schneller lernen können!

Three Atom Editor Tips to Help You Learn Code Faster!

Ich war kürzlich Mentorin bei der Organisation Ladies Learning Code und es war großartig! Menschen dabei zu helfen, neue Fähigkeiten zu erlernen und diese "Aha!" Momente mit neuen Lernenden ist ein ziemlich tolles Gefühl.

Nachdem ich bei einer Lernveranstaltung als Mentor fungiert habe, denke ich oft an Möglichkeiten, einige der Engpässe für die Schüler zu beseitigen. Tools wie Texteditoren sollten Sie beim Erlernen neuer Fähigkeiten nicht behindern. Nach dieser letzten Veranstaltung habe ich also drei Tipps geschrieben, wie Atom für die Schüler oder wirklich jeden verwendet werden kann. Ich hoffe sie helfen!

1. Beim Fensterwechsel automatisch speichern

Wir alle wissen, dass wir „früh sparen, oft sparen“ sollten, richtig? Manchmal vergessen wir jedoch, dann versuchen wir herauszufinden, warum unsere Codeänderungen, die wir gerade vorgenommen haben, nicht angezeigt werden! Hier ist ein Tipp, damit Atom Ihre Arbeit jedes Mal automatisch speichert, wenn Sie zu einem anderen Fenster auf Ihrem Computer wechseln, z. B. zum Aktualisieren Ihres Projekts im Chrome-Browser !

Lassen Sie uns Atom so einrichten, dass es Ihre Arbeit automatisch speichert.

  • Wenn Sie einen Mac verwenden, gehen Sie zu Atom > Preferences > Packages
  • Unter Windows gehen Sie zu File > Settings > Packages
  • Wenn Sie Linux verwenden, gehen Sie zu Edit > Preferences > Packages

Von hier aus können Sie den Filter verwenden, um nach dem Paket „autosave“ zu suchen. Sie sollten so etwas sehen:

Atom-Editor, der die verfügbaren Pakete anzeigt, nachdem der Filter mit dem Suchbegriff „autosave“ verwendet wurde. Das Paket „autosave“ ist verfügbar, aber in einem deaktivierten Zustand. Es werden Informationen über das „Autosave“-Paket und eine Schaltfläche mit der Bezeichnung „Aktivieren“ angezeigt.

Fahren Sie fort und klicken Sie auf die Schaltfläche Enable . Jedes Mal, wenn Sie Windows auf Ihrem Computer wechseln, speichert Atom Ihre letzten Änderungen automatisch! Produktivität erhöht! 💯

2. Geben Sie weniger mit Code-Snippets ein

Code-Snippets sind eine großartige Möglichkeit, Zeit zu sparen, indem Sie weniger tippen. Jedes Snippet besteht aus kleinen, wiederholbaren Codeteilen, und wenn sie in Ihrem Projekt verwendet werden, helfen sie, die einzigartigen Teile auszufüllen. Wenn Sie beispielsweise einen neuen CSS-Haltepunkt für Ihre Responsive Design-Website hinzufügen müssen, müssen Sie Folgendes eingeben:

@media ( max - width : [ break point ]px) { }

Das ist eine Menge zu merken und die genaue Syntax kann schwierig sein. Lassen Sie uns ein Snippet verwenden, um es beim ersten Mal richtig zu machen!

Es gibt ein paar Textstellen, um ein Snippet zu erstellen.

  1. Der erste Teil ist der Dateityp , in dem Sie das Snippet verwenden werden. Für das Haltepunktbeispiel fügen Sie dies Ihren CSS-Dateien hinzu. Die erste Zeile des Snippets lautet also 'source.css': . Dies weist Atom an, das Snippet nur in CSS-Dateien zu verwenden.
  2. Als Nächstes geben wir dem Snippet ein Label . Wenn Sie mit der Eingabe der CSS-Datei beginnen, zeigt Atom eine Liste der verfügbaren Snippets an. Nennen wir das Snippet "Break Point!" Nachdem der Labeltext festgelegt wurde, lautet die zweite Zeile des Snippets 'Break Point!': .
  3. Lassen Sie uns nun den eigentlichen Text hinzufügen, den wir eingeben , damit Atom weiß, wann das Snippet eingefügt werden muss. Um die Dinge einfach zu halten, fügen wir diese dritte Zeile zu unserem Snippet hinzu, 'prefix': 'breakpoint' . Wenn dies vorhanden ist, können wir "breakpoint" eingeben und Atom zeigt das Snippet in der Liste zur Auswahl an.
  4. Der letzte Teil des Snippets ist der Code, der in Ihre CSS-Dateien eingefügt wird. Dies wird dem 'body': Teil des Snippets hinzugefügt. Ich zeige diesen Teil im letzten Snippet unten, aber was wichtig zu wissen ist, sind die Bits, die wie $1 und $2 aussehen. Wofür sind die? Diese stellen Tabstopps dar. Unser Tastatur-Cursor folgt den Tabstopps in der angegebenen Reihenfolge, sodass der Rest des Code-Snippets einfach ausgefüllt werden kann. Nachdem Sie den ersten Tabstopp, den Wert für die max-width , ausgefüllt haben, drücken Sie einfach die Tabulatortaste, um zum nächsten Tabstopp zu wechseln. Von hier aus können Sie ganz einfach das CSS hinzufügen, das Ihnen hilft, Ihre Website zu gestalten, wenn dieser Haltepunkt erreicht ist.

Der fertige Ausschnitt

So sieht das letzte Snippet aus:

'.source.css' : 'Break Point!' : 'prefix' : 'breakpoint' 'body' : """ @media (max-width: $1) { $2 } """

Jetzt haben sich alle Teile zu unserem „Break Point!“ zusammengefügt. Ausschnitt. Jetzt muss nur noch das Snippet zu Atom hinzugefügt werden.

  • Wenn Sie einen Mac verwenden, gehen Sie zu Atom > Snippets
  • Wenn Sie Windows verwenden, gehen Sie zu File > Snippets
  • Wenn Sie Linux verwenden, gehen Sie zu Edit > Snippets

Fahren Sie fort und kopieren Sie den obigen Snippet-Code in Ihre Snippets-Datei und speichern Sie ihn. Wenn Sie nun beginnen, „Breakpoint“ in einer CSS-Datei einzugeben, sollte ein Menü mit unserem Snippet mit der Bezeichnung „Break Point!“ erscheinen. Drücken Sie die Tab-Taste, um das Snippet einzufügen, und füllen Sie den Rest mit den praktischen Tabstopps aus!

Ein animiertes GIF, das jemanden zeigt, der im Atom-Editor tippt. Der Text „bre“ wird eingegeben, dann wird die „Enter“-Taste gedrückt, um das Code-Snippet einzufügen. Der Rest des Snippets wird ausgefüllt, indem Sie die gewünschten Werte eingeben und dann die Tabulatortaste drücken.

Puh! Ich gebe zu, das Einrichten Ihres ersten Snippets ist ein bisschen Arbeit, aber es lohnt sich auf jeden Fall, sich die ganze Tipparbeit zu sparen, die Sie in Zukunft machen müssten! 👍

Weitere Informationen zu Snippets finden Sie auf der Handbuchseite zu Atom Snippets .

3. Dateipfade kopieren und einfügen

Wenn Sie mit den Dateien in Ihrem Projekt arbeiten, kann es etwas schwierig sein, den richtigen Pfad zu einer Datei zu finden. Um beispielsweise ein Hintergrundbild in Ihrer CSS-Datei festzulegen, müssen Sie den relativen Pfad vom CSS-Dokument zur Bilddatei in Ihrem Projekt eingeben. Wie oft haben Sie Ihren Browser aktualisiert, nur um Ihr Bild nirgendwo auf der Website zu sehen? Frustrierend, ich weiß.

Hier ist ein Atom-Paket, das genau in dieser Situation hilft: ⚛️ tree-view-copy-relative-path .

Wenn dieses Paket installiert ist, müssen Sie nur mit der rechten Maustaste auf Ihre Bilddatei im Projektbaum klicken, auf „Kopieren“ klicken und dann den Pfad zur Datei direkt in Ihren CSS-Code „einfügen“. Viel einfacher!

Installieren von Atom-Paketen

So installieren Sie das Paket.

  • Wenn Sie einen Mac verwenden, gehen Sie zu Atom > Preferences > Install
  • Unter Windows gehen Sie zu File > Settings > Install
  • Wenn Sie Linux verwenden, gehen Sie zu Edit > Preferences > Install

Von hier aus können Sie den Filter verwenden, um nach dem Paket „tree-view-copy-relative-path“ zu suchen. Sie sollten so etwas sehen:

Atom-Editor, der die verfügbaren Pakete anzeigt, nachdem der Filter mit dem Suchbegriff „tree-view-copy-relative-path“ verwendet wurde. Informationen über das Paket „tree-view-copy-relative-path“ und eine Schaltfläche mit der Bezeichnung „Installieren“ werden angezeigt.

Nachdem Sie auf die Schaltfläche Install geklickt haben, sollten Sie nun in der Lage sein, mit der rechten Maustaste auf eine Datei in Ihrem Projektbaum in der linken Leiste zu klicken und im Kontextmenü die Option "Relativen Pfad kopieren" zu sehen. Jetzt müssen Sie nur noch den Pfad in den Code-Editor einfügen und schon sind Sie fertig! 💪

Ein animiertes GIF, das zeigt, wie jemand im Atom-Editor mit der rechten Maustaste auf eine Datei klickt. Das Kontextmenü zeigt den angeklickten Eintrag „Copy Relative Path“. Als nächstes wird das Kontextmenü im Editor angezeigt, in dem die Option „Einfügen“ ausgewählt wird. Das Ergebnis ist der relative Dateipfad.

Ich hoffe, diese paar Tipps zum Atom-Editor sind nützlich, wenn Sie das nächste Mal an einem Projekt arbeiten oder bei einem Programmier-Event in Ihrer Stadt neue Fähigkeiten erlernen! 💻😎

Zurück zum Blog