Si vous êtes développeur ou codeur, il y a de fortes chances que vous recherchiez toujours de nouveaux outils pour aider à rationaliser votre flux de travail. Heureusement pour vous, l’un des meilleurs éditeurs de code que vous puissiez trouver est Visual Studio Code sur Mac.
Visual Studio Code (VS Code) offre de nombreuses fonctionnalités pour vous aider à écrire du code de manière plus efficace. Et dans cet article, vous apprendrez comment installer VS Code sur votre Mac et parcourir certaines des meilleures extensions et thèmes pour vous aider à démarrer.
Lisez la suite et préparez-vous à améliorer votre flux de travail !
Prérequis
Ce tutoriel sera une démonstration pratique. Si vous souhaitez suivre, assurez-vous d’avoir un appareil macOS. Ce tutoriel utilise Apple Silicon (M1), donc les étapes peuvent être légèrement différentes si vous avez un Mac basé sur Intel.
Téléchargement de Visual Studio Code pour Mac
Visual Studio Code (VS Code) est un éditeur de code gratuit et open-source de Microsoft disponible pour Windows, Linux et macOS. Mais comme d’autres outils, vous devrez télécharger et installer VS Code sur votre système.
1. Ouvrez votre navigateur Web préféré et accédez à la page de téléchargement de VS Code.
2. Ensuite, cliquez sur Apple Silicon sous l’icône Mac pour télécharger le programme d’installation de VS Code pour Mac dans un fichier ZIP. Cette version Apple Silicon (M1) est la dernière puce développée par Apple.
Si vous avez un ancien Mac avec un processeur Intel, cliquez plutôt sur Intel Chip.
3. Enfin, ouvrez votre terminal et exécutez la commande ls suivante pour vérifier l’installateur de packages de VS Code que vous avez téléchargé.
La sortie ci-dessous montre l’emplacement du fichier zip.
Installation de Visual Studio Code sur Mac
Maintenant que vous avez téléchargé l’installateur de VS Code, vous êtes prêt à installer VS Code sur votre Mac et à découvrir un éditeur de code redéfini. VS Code est optimisé pour que vous puissiez créer et déboguer des applications web et cloud modernes de manière plus efficace.
Une autre excellente fonctionnalité de VS Code est qu’il prend en charge des tonnes de langages de programmation grâce à l’utilisation d’ extensions que vous pouvez trouver sur le marché.
Pour installer VS Code sur Mac :
1. Sélectionnez le fichier zip de VS Code téléchargé → cliquez sur l’icône des trois points (en haut à droite) → Ouvrir pour décompresser le fichier ZIP.
Une fois décompressé, vous devriez avoir une nouvelle application Visual Studio Code dans votre dossier Téléchargements.
2. Ensuite, exécutez la commande ls ci-dessous pour vérifier le fichier d’application. Cette commande répertorie le contenu du fichier d’application de Visual Studio Code.
Le symbole \ est un caractère d’échappement qui indique au terminal de traiter l’espace comme un caractère normal. Vous devez utiliser le caractère d’échappement lorsqu’il y a un espace dans le nom de fichier.
3. Exécutez la commande open ci-dessous pour lancer l’installateur dans une nouvelle instance (-n).
4. Maintenant, cliquez sur Ouvrir pour continuer l’installation lorsque vous obtenez l’invite ci-dessous.
Cette alerte apparaît parce que vous avez téléchargé l’application depuis Internet, ce que vous pouvez ignorer en toute sécurité.
Une fois installée, l’application VS Code s’ouvre, et vous serez accueilli par la page Commencer ci-dessous.
Navigation dans l’interface graphique de VS Code
Vous avez installé avec succès VS Code sur votre Mac, mais avant de vous lancer dans le codage, familiarisez-vous d’abord avec l’interface graphique et les fonctionnalités de VS Code.
VS Code offre de nombreuses fonctionnalités qui vous permettent de :
- Choisir des thèmes et modifier l’apparence de votre éditeur.
- Ouvrir le dossier de votre projet, afin de pouvoir rapidement aller et venir entre vos fichiers et vous assurer que votre structure de fichier est correcte.
- Ajouter un système de contrôle de source, comme Git.
- Ajoutez rapidement des extensions depuis le marché, et ainsi de suite.
Ce ne sont là qu’une petite partie de ce que VS Code peut offrir. Voyez par vous-même comment chaque fonctionnalité vous aide dans votre flux de travail. Changer votre thème serait peut-être un bon début.
1. Sélectionnez un thème pour votre éditeur comme vous le souhaitez à partir de la page de démarrage, laissez les autres paramètres par défaut et cliquez sur « Marquer comme terminé » (en bas à gauche).
Si les thèmes Lumière et Sombre ne vous conviennent pas, cliquez sur « Voir plus de thèmes » et trouvez celui qui suscite votre intérêt.
2. Ensuite, explorez le côté le plus à gauche de VS Code, la Barre d’activités, qui comporte sept sections principales. Mais commencez par l’une des sections les plus importantes, l’EXPLORATEUR (Ctrl+Shift+E / Cmd+Shift+E).
L’Explorateur affiche les fichiers et dossiers de votre projet, où vous pouvez cloner un dépôt. De plus, l’Explorateur vous permet d’effectuer différentes actions comme suit :
- Créez, supprimez et renommez vos fichiers et dossiers dans votre projet.
- Déplacez des fichiers et des dossiers en les faisant glisser et en les déposant à l’intérieur de votre dossier de projet.
Notez que le « glisser-déposer » fonctionne lorsque vous déplacez des fichiers dans l’Explorateur à partir de l’extérieur de VS Code. Mais si l’explorateur est vide, VS Code ouvre le fichier dans votre éditeur à la place.
3. Cliquez sur l’icône de recherche (Ctrl+Shift+F / Cmd+Shift+F), ce qui ouvre la section RECHERCHE, où vous pouvez rechercher des fichiers, des symboles et du texte.
4. Maintenant, cliquez sur l’icône de contrôle de source (Ctrl+Shift+G / Cmd+Shift+G) pour ouvrir la section CONTRÔLE DE SOURCE, où vous pouvez gérer votre projet avec Git ou un autre système de contrôle de source.
VS Code est livré avec une gestion intégrée du contrôle de source (SCM) avec le support de Git inclus par défaut.
5. Après le SCM, cliquez sur l’icône Exécuter et déboguer (Ctrl+Shift+D / Cmd+Shift+D), ce qui ouvre la section EXÉCUTION ET DÉBOGAGE : EXÉCUTION, où vous pouvez exécuter et déboguer votre projet.
6. Enfin, cliquez sur l’icône Extensions (Ctrl+Shift+X / Cmd+Shift+X) pour accéder à la section EXTENSIONS, où vous pouvez installer des extensions depuis la place de marché.
Lancement de VS Code via un environnement de ligne de commande
Peut-être que vous passez la plupart de votre temps dans un environnement de ligne de commande mais avez besoin d’écrire du code rapidement. Si tel est le cas, configurer VS Code pour être lancé via un environnement de ligne de commande vous sera bénéfique.
1. Appuyez sur (Cmd+Shift+P ou Ctrl+Shift+P) sur VS Code pour ouvrir la Palette de commandes, où vous pouvez accéder à toutes les fonctionnalités de VS Code.
2. Tapez Shell Command: Install ‘code’ command in PATH dans la Palette de commandes, et appuyez sur Entrée. Cette commande ajoute l’exécutable de VS Code à la variable PATH de votre système.
3. Une fois ajouté, redémarrez votre terminal pour que les modifications prennent effet. La commande code est maintenant disponible dans votre terminal.
4. Maintenant, créez un fichier texte, ajoutez du texte, puis enregistrez et fermez le fichier.
5. Enfin, exécutez les commandes suivantes pour lancer VS Code (code), en passant le chemin du fichier texte (text.txt) depuis le répertoire de travail.
Vous verrez VS Code (à droite) s’ouvrir avec le contenu de votre fichier text.txt affiché dans la fenêtre de l’éditeur. Vous pouvez maintenant éditer ce fichier en utilisant les excellentes fonctionnalités de VS Code.
Installation d’extensions pour plus de fonctionnalités
Une des meilleures choses à propos de VS Code est sa grande personnalisation. Comment ? Vous pouvez installer des extensions pour ajouter de nouvelles fonctionnalités, et de nombreuses extensions différentes sont disponibles.
Peut-être que vous voulez installer l’extension macOS Color Picker. Cette extension vous permet de sélectionner les sélecteurs de couleurs natifs de macOS lorsque vous travaillez avec des fichiers CSS, HTML et JavaScript.
1. Accédez au menu Extensions dans la barre d’activités, qui comporte trois sections :
- INSTALLÉES – Cette section montre les extensions déjà installées.
- RECOMMANDÉ – Cette section affiche les extensions recommandées en fonction du type de fichier que vous avez ouvert. Par exemple, vous verrez des extensions JavaScript recommandées si vous travaillez avec un fichier JavaScript.
- POPULAIRE – Cette section affiche les extensions les plus populaires de VS Code.
2. Tapez Sélecteur de couleur macOS dans la barre de recherche et appuyez sur Entrée. Une liste d’extensions correspondantes sera affichée dans l’ordre décroissant (les extensions les plus correspondantes en premier).
Une fois que vous avez trouvé votre extension cible, cliquez sur le bouton Installer à côté de l’extension. Le bouton Installer devient un bouton Activer vert, alors cliquez dessus pour activer l’extension.
Après avoir installé l’extension, une page de présentation de l’extension s’affiche à droite, comme illustré ci-dessous.
3. Ouvrez maintenant un fichier CSS, HTML ou JavaScript pour tester la nouvelle extension Sélecteur de couleur macOS.
4. Enfin, ouvrez la Palette de commandes (Cmd+Maj+P / Ctrl+Maj+P), tapez Ouvrir le sélecteur de couleur et appuyez sur Entrée. Le volet Sélecteur de couleur macOS s’ouvre, comme illustré ci-dessous.
Utilisez le sélecteur de couleur pour choisir une couleur, qui sera insérée dans votre code. Cette extension est un excellent moyen d’obtenir rapidement les valeurs de couleur dont vous avez besoin sans avoir à mémoriser les codes hexadécimaux.
Conclusion
Dans ce tutoriel, vous avez appris comment installer VS Code sur votre Mac et des extensions pour ajouter plus de fonctionnalités, rendant l’écriture de code plus agréable. À ce stade, vous pouvez pleinement profiter de ce que VS Code offre lorsque vous travaillez sur votre prochain projet.
Mais ne vous arrêtez pas ici ! Avec cette nouvelle connaissance, pourquoi ne pas utiliser le contrôle de version avec Git et GitHub pour suivre votre travail ?
Source:
https://adamtheautomator.com/visual-studio-code-on-mac/