So richten Sie Ihren Mac für die Webentwicklung ein

Während Sie einfache Websites nur mit einem Texteditor und einem Browser erstellen können, können Sie Ihr Spiel verbessern, indem Sie Ihrem Workflow ein JavaScript-Framework wie React oder Vue und nützliche Tools wie Git hinzufügen.

Aber warte! Ihr Mac ist nicht bereit. Bevor Sie eintauchen, müssen Sie einige Elemente installieren, um später verwirrende Fehler zu vermeiden.

Dieser Artikel führt Sie durch die Mindestkonfiguration, die Sie benötigen, um mit der JavaScript-basierten Webentwicklung auf Ihrem Mac arbeiten zu können.

Lass uns gehen!

Aktualisieren Sie Ihren Mac

Befolgen Sie vor der Installation einer neuen Software diese Anweisungen von Apple, um ein Upgrade von macOS und Ihrer aktuellen Software auf die neueste Version durchzuführen.

Wählen Sie eine Terminal-App

Da Sie über die Befehlszeile in diesem Artikel mit Ihrem Mac interagieren, benötigen Sie eine Terminal-App.

Folgendes ist eine gute Option:

  • Hyper
  • iTerm2
  • Das integrierte Terminal von Visual Studio Code
  • Terminal (die Standard-App, die mit Ihrem Mac geliefert wird)

Wenn Sie nicht sicher sind, welches Sie auswählen sollen, wählen Sie Hyper.

Befehlszeilen-Entwicklertools

Das erste, was Sie über die Befehlszeile installieren müssen, sind die Befehlszeilen-Entwicklertools Ihres Mac. Wenn Sie diese jetzt installieren, werden später seltsame Fehler vermieden.

Um zu überprüfen, ob die Tools bereits installiert sind, geben Sie den folgenden Befehl in Ihre Terminal-App ein und drücken Sie die Eingabetaste:

xcode-select --version

Wenn das Ergebnis keine Versionsnummer ist, installieren Sie die Tools mit dem folgenden Befehl:

xcode-select --install

In einem Dialogfeld werden Sie gefragt, ob Sie die Tools installieren möchten. Klicken Sie auf Installieren, und das Paket wird heruntergeladen und installiert.

Bestätigen Sie nach Abschluss der Installation, dass die Tools jetzt installiert sind, indem Sie den ersten Befehl erneut ausführen:

xcode-select --version

Das Ergebnis sollte jetzt eine Versionsnummer sein.

Homebrew

Anstatt die nächsten Tools zu installieren, indem Sie die Website der einzelnen Tools aufrufen, die Download-Seite suchen, auf den Download-Link klicken, die Dateien entpacken und das Installationsprogramm manuell ausführen, verwenden Sie Homebrew.

Homebrew ist ein Tool, mit dem Sie Software auf Ihrem Mac über die Befehlszeile installieren, aktualisieren und deinstallieren können. Dies ist schneller und sicherer als die manuelle Vorgehensweise und erleichtert im Allgemeinen Ihr Entwicklungsleben.

Überprüfen Sie zunächst, ob Homebrew bereits installiert ist:

Brühversion

Wenn Sie keine Versionsnummer sehen, installieren Sie Homebrew mit folgendem Befehl:

/ usr / bin / ruby ​​-e "$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Ich verspreche, das ist der seltsamste Befehl, den Sie in diesem Artikel sehen werden! Dank Homebrew ist der Rest einfach.

Vergewissern Sie sich vor dem Fortfahren, dass Homebrew jetzt installiert ist:

Brühversion

Knoten und Npm

Node.js ist ein Tool, mit dem Ihr Mac JavaScript-Code außerhalb eines Webbrowsers ausführen kann. Wenn Sie ein JavaScript-Framework wie React oder Vue auf Ihrem Mac ausführen möchten, muss Node installiert sein.

Node enthält auch npm (den Node Package Manager), mit dem Sie auf eine riesige Bibliothek mit kostenlosem Code zugreifen können, den Sie herunterladen und in Ihren Projekten verwenden können.

Überprüfen Sie zunächst, ob der Knoten bereits installiert ist:

Knoten - Version

Wenn nicht, installieren Sie es mit Homebrew:

Brühinstallationsknoten

Bestätigen Sie abschließend, dass Node und npm jetzt installiert sind:

Knoten - Version
npm --version

Versionskontrolle mit Git

Git ist ein Tool, mit dem Sie Änderungen an Ihrem Code nachverfolgen und gemeinsam mit anderen Entwicklern an freigegebenen Projekten arbeiten können.

Die Verwendung von Git in jedem Projekt ist eine große Angewohnheit und bereitet Sie auf zukünftige Projekte vor, in denen Git erforderlich sein kann. Einige Tools (wie GatsbyJS) hängen auch davon ab, dass Git auf Ihrem Mac installiert ist. Sie benötigen es also auch dann, wenn Sie nicht vorhaben, es Ihrem Workflow hinzuzufügen.

Überprüfen Sie noch einmal, ob Git bereits installiert ist:

Git - Version

Wenn nicht, installieren Sie es:

Brauen installieren Git

Und bestätigen Sie, dass die Installation funktioniert hat:

Git - Version

Führen Sie von Zeit zu Zeit den folgenden Befehl aus, und alles, was Sie mit Homebrew installiert haben, wird automatisch aktualisiert:

Brauen Update && Brauen Upgrade && Brauen Aufräumen && Brauen Arzt

Dieser eine Befehl ist alles, was Sie brauchen, um Ihr System auf dem neuesten Stand zu halten.

Ich starte es normalerweise, wenn ich ein neues Projekt starte, kann es aber jederzeit tun. (Wenn Sie diesen Befehl ausführen und Homebrew zusätzliche Befehle zur Ausführung vorschlägt, führen Sie diese aus. Wenn ein Befehl mit sudo beginnt und Sie zur Eingabe eines Kennworts aufgefordert werden, verwenden Sie das Administratorkennwort Ihres Mac.)

Das war's für die Kommandozeile!

Code-Editor

Während Sie Code in jedem Texteditor schreiben können, erleichtert die Verwendung eines Codes, der Ihren Code hervorhebt und validiert, Ihr Leben erheblich.

Folgendes ist eine gute Option:

  • Visual Studio-Code
  • Atom
  • Erhabener Text

Wenn Sie gerade erst anfangen, wählen Sie Visual Studio Code.

Browser

Beim Codieren hilft es, die App oder Website, die Sie erstellen, in einem Browser anzuzeigen, um zu bestätigen, dass sie funktioniert. Sie können hierfür einen beliebigen Browser verwenden, einige enthalten jedoch zusätzliche Entwicklertools, mit denen Sie Details zu Ihrem Code anzeigen und ihn verbessern können.

Eine der folgenden Möglichkeiten bietet sich an:

  • Chrom
  • Feuerfuchs

Wenn Sie gerade erst anfangen, wählen Sie "Chrome".

Finder

Hier ein kurzer Tipp: Sie möchten die Dateien anzeigen, die Ihr Mac standardmäßig verbirgt. (Git-Dateien werden beispielsweise automatisch ausgeblendet, aber manchmal möchten Sie sie bearbeiten.)

Mit der Tastenkombination ⌘⇧ können Sie die versteckten Dateien Ihres Mac am einfachsten anzeigen. (Befehl + Umschalt + Punkt). Dadurch werden diese Dateien abwechselnd angezeigt und ausgeblendet, sodass Sie bei Bedarf darauf zugreifen können.

Fazit

Sie sind fertig!

Das ist alles, was Sie brauchen, um mit der JavaScript-basierten Front-End-Entwicklung auf Ihrem Mac vertraut zu werden.

Um Verwirrung zu vermeiden, habe ich alle Artikel weggelassen, die nicht unbedingt erforderlich sind. Wenn Sie mehr über optionale Möglichkeiten erfahren möchten, wie Sie Ihren Mac für die Webentwicklung weiter anpassen können, sehen Sie sich die folgenden Links an.

Weitere Lektüre

  • Einrichten eines brandneuen Mac für die Entwicklung von Tania Rascia
  • Einrichten eines MacBook für die Front-End-Entwicklung von Ben Honeywill
  • Leaving Homestead: Finden der besten allumfassenden lokalen Entwicklungsumgebung von WebDevStudios (falls Sie auch ein PHP-Setup benötigen)

Diskutiere auf Twitter

Ursprünglich auf michaeluloth.com veröffentlicht