Bien que vous puissiez créer des sites Web de base avec rien de plus qu’un éditeur de texte et un navigateur, vous voudrez peut-être améliorer votre productivité en ajoutant un framework JavaScript comme React ou Vue et des outils très utiles comme Git.
Mais attendez ! Votre Mac n’est pas prêt. Avant de partir tête baissée sur votre nouveau projet, vous devrez installer quelques éléments qui vous éviteront des erreurs de confusion plus tard.
Cet article vous guidera à travers la configuration minimale dont vous aurez besoin pour maîtriser le développement Web basé sur du JavaScript sur votre Mac. Allons-y !
Mettez à jour votre Mac
Avant d’installer un nouveau logiciel, suivez les instructions fournies par Apple pour mettre à niveau macOS et votre OS actuel vers la dernière version.
Choisissez une application de terminal
Étant donné que vous allez interagir avec votre Mac à l’aide de la ligne de commande dans la suite de cet article, vous aurez besoin d’une application de terminal. N’importe laquelle des options suivantes est bonne :
- Hyper
- iTerm2
- Le terminal intégré de Visual Studio Code
- Terminal (l’application par défaut fournie avec votre Mac)
Si vous ne savez pas lequel choisir, choisissez Hyper.
Outils de développement en ligne de commande
La première chose à installer à partir de la ligne de commande est les outils de développement pour les lignes de commande de votre Mac. En les installant maintenant, vous éviterez des erreurs par la suite. Pour vérifier si les outils sont déjà installés, tapez la commande suivante dans votre application de terminal et appuyez sur Entrée :
xcode-select --version
Si le résultat n’est pas un numéro de version, installez les outils avec cette commande :
xcode-select --install
Une boîte de dialogue apparaît vous demandant si vous souhaitez installer les outils. Cliquez sur « Installer », et le package va se télécharger et s’installer. Une fois l’installation terminée, vérifiez que les outils sont maintenant installés en réexécutant la première commande :
xcode-select --version
Le résultat devrait maintenant être un numéro de version.
Homebrew
Au lieu d’installer les outils suivants en accédant au site Web de chaque outil, en recherchant la page de téléchargement, en cliquant sur le lien de téléchargement, en décompressant les fichiers et en exécutant manuellement le programme d’installation, nous allons utiliser Homebrew.
Pour votre information, Homebrew est un outil qui vous permet d’installer, mettre à jour et désinstaller un logiciel sur votre Mac à partir d’une ligne de commande. Ceci est plus rapide et plus sûr que l’approche manuelle et facilite généralement la vie de votre développement.
Tout d’abord, vérifiez si Homebrew est déjà installé :
brew --version
Si vous ne voyez pas de numéro de version, installez Homebrew avec cette commande :
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Je vous promets que c’est la commande la plus étrange que vous verrez dans cet article ! 😅 Grâce à Homebrew, le reste est simple. Avant de poursuivre, confirmez que Homebrew est maintenant installé :
brew --version
Node et npm
Node.js est un outil qui permet à votre Mac d’exécuter du code JavaScript en dehors d’un navigateur Web. Si vous souhaitez exécuter un framework JavaScript tel que React ou Vue sur votre Mac, vous devez avoir installé Node.
Node inclut également npm (Node Package Manager), qui vous donne accès à une bibliothèque géante de code gratuit que vous pouvez télécharger et utiliser dans vos projets.
Tout d’abord, vérifiez si Node est déjà installé :
node --version
Sinon, installez-le avec Homebrew :
brew install node
Enfin, confirmez que Node et npm sont maintenant installés :
node --version
npm --version
Git
Git est un outil qui vous aide à suivre les modifications apportées à votre code et à travailler avec d’autres développeurs sur des projets partagés. Utiliser Git sur tous les projets est une excellente habitude, et vous préparera à de futurs projets où Git pourrait être nécessaire. Certains outils dépendent également de l’installation de Git sur votre Mac. Par conséquent, vous en aurez besoin même si vous ne prévoyez pas de vous en servir dans votre projet.
Encore une fois, commencez par vérifier si Git est déjà installé :
git --version
Sinon, installez-le :
brew install git
Et confirmez que l’installation a bien fonctionné :
git --version
Tout mettre à jour
De temps en temps, exécutez la commande suivante, et tout ce que vous avez installé avec Homebrew sera mis à jour automatiquement :
brew update && brew upgrade && brew cleanup && brew doctor
Cette commande est tout ce dont vous avez besoin pour maintenir votre système à jour. Habituellement, je le lance quand je commence un nouveau projet, mais n’hésitez pas à le faire quand vous le souhaitez.
Voilà pour la ligne de commande !
Éditeur de code
Bien que vous puissiez écrire du code dans n’importe quel éditeur de texte, l’utilisation de celui qui met en valeur et valide votre code vous facilitera énormément la vie.
N’importe laquelle des options suivantes est bonne :
Si vous ne faites que commencer, choisissez Visual Studio Code.
Navigateurs
Lorsque vous codez, il est utile de visualiser l’application ou le site Web que vous construisez dans un navigateur pour vous assurer qu’il fonctionne. Bien que vous puissiez utiliser n’importe quel navigateur pour cela, certains incluent des outils de développement supplémentaires qui vous fournissent des détails sur votre code et sur la façon de l’améliorer.
Les options suivantes sont idéales :
- Chrome
- Firefox
Si vous ne faites que commencer, choisissez Chrome.
Finder
Une astuce rapide ici : vous voudrez montrer les fichiers que votre Mac cache par défaut. (Par exemple, les fichiers git sont automatiquement masqués, mais vous voudrez parfois les éditer.)
Le moyen le plus simple de montrer les fichiers cachés de votre Mac consiste à utiliser le raccourci clavier ⌘⇧. (Commande + Maj + Point). Cela alternera entre l’affichage et le masquage de ces fichiers afin que vous puissiez y accéder quand vous en aurez besoin.
Conclusion
C’est tout ce dont vous avez besoin pour commencer à utiliser un développement frontal basé sur du JavaScript sur votre Mac.
