Installation de Visual Studio Code. Pour quoi faire ?
Lorsqu’on travaille sur du développement de sites web, d’applications ou toute autre activité, ou il faut plonger les mains dans le code, nous aurons alors besoin d’un éditeur de code. Et c’est donc là qu’intervient Visual studio code. Alors bien entendu, il n’est pas le seul sur le marché et il en existe un grand nombre. Je ne peux pas les citer tous, mais parmi eux, nous pouvons parler de Sublime Text 3, de Brackets, de Atom éditor, ou encore celui qu’on utilise souvent comme un lecteur de fichier texte, mais qui est bien un éditeur de code, je veux parler de Notepad++.
Pourquoi le choix de Visual studio code ?
Sachez tout d’abord que je n’entretiens aucun lien avec Microsoft, ou autres, pour vanter les mérites de visual studio code. Et sachez également que comme tous produits, il y a des avantages et des inconvénients à se servir de tel éditeur plutôt qu’un autre, et vis et versa.
Une interface pour plusieurs tâches
Cependant mon choix personnel s’est porté sur visual studio code, car j’aime avoir une interface ou je peux faire plus d’une chose à la fois. En effet, avec VS Code, je peux déboguer mon code directement dans son interface sans avoir recours aux navigateurs, depuis le débogueur. Je peux également lancer plusieurs terminaux en même temps. Un terminal pour lancer le serveur de mon backend, et un autre pour le serveur de mon frontend par exemple. Les terminaux qui pourront être utilisés dans l’interface VS Code, dépendront des terminaux que vous avez installés sur votre machine. C’est à dire que si je veux utiliser le terminal Git Bash dans Visual Studio Code, je devrais, au préalable, avoir installé Git Bash sur ma machine. Il en va de même lorsque je veux utiliser un serveur Node.js, ou autres.
Les extensions
Un autre outil indispensable de VS Code, est l’outil extensions. Une large communauté développe des extensions pour visual studio code, afin de nous aider dans nos tâches quotidiennes de codage. Il existe une multitude d’extensions que nous pourrons utiliser en fonction du langage dans lequel nous codons.
Contrôle du code source
Nous avons également le contrôle du code source, qui nous permettra de voir si nos fichiers sont déjà synchronisé avec notre repository GitHub, ou si nous devons les poussés dedans afin de mettre à jour les versions de notre code.
Synchronisation
Et enfin, j’aime aussi visual studio code car on peut activer la synchronisation avec un compte Microsoft ou un compte GitHub. Ce qui fait que comme j’ai plusieurs machines, et donc plusieurs installations de visual studio code sur mes différentes machines, pas besoin de tout réinstaller. Mes paramètres, mes extensions, etc., je retrouve tout en ayant activé la synchronisation.
Bref...
Bon, je ne vais pas détailler plus, mais juste rappeler que Visual studio code est gratuit, open source, et qu’il est l’éditeur préféré de nombreux développeurs.
Passons plutôt tout de suite à son installation.
Tutoriel vidéo sur l'installation de Visual Studio Code
Certains d’entre vous préféreront peut-être suivre ce tutoriel, en regardant la vidéo que j’ai produite pour l’installation de visual studio code sur ma machine. Alors je vous la mets ci dessous. Pour les autres qui préfèrent lire et suivre le tutoriel pas à pas avec des images d’illustration, alors c’est en dessous de cette vidéo. C’est comme ça sur Activateur web : on a le choix ! 😉
Tutoriel pas à pas
Pour installer Visual Studio code, nous devons, pour commencer, le télécharger.
Pour cela nous pouvons nous rendre à l’adresse suivante : Visual Studio Code Téléchargement.
Sur cette page, Microsoft nous présente la famille Visual Studio.
Attention de bien sélectionner la carte située à droite. Les 2 autres étant pour l’installation de Visual Studio. Et il ne faut pas confondre, Visual Studio avec Visual Studio Code. Ce ne sont pas les mêmes outils.
Certains d’entre vous, se demandent peut être quelles sont les différences entre Visual studio et Visual studio code ? Eh bien, comme je vous l’ai dit, ce ne sont pas les mêmes outils !
Visual Studio
Visual Studio est un IDE (environnement de développement intégré en français) complet. Vous pourrez développer tout ce que vous voulez avec, même s’il est très orienté sur les projets liés à .NET. Par contre, il est très lourd et très gourmand en mémoire RAM, et ressources. Visual Studio utilise plus de 8 Go d’espace disque (en fonction des composants sélectionnés). Vous devrez également l’installer sur votre système avec le droit administrateur, contrairement à VS Code qui lui pourra être installé sur un disque dur externe, par exemple, et pour un seul utilisateur (sans droit administrateur).
Visual Studio Code
Visual Studio Code, appelé également VS Code, est un éditeur de code source léger qui peut être utilisé pour afficher, éditer, exécuter et déboguer le code source des applications.
Il ne prend pas en charge le système de contrôle de versions de Microsoft. Team Foundation Server.
Il est basé sur le framework Electron, utilisé pour créer des applications de bureau multiplateformes utilisant les technologies Web.
VS Code est un outil léger qui peut s’exécuter aussi bien sur Linux, Mac et Windows.
En bref...
Bref, ce ne sont que quelques différences parmi d’autres encore. Je regrette d’ailleurs que Microsoft ait choisi de leur donner le même nom, ce qui fait parfois faire des erreurs aux personnes non avisées.
Connaitre son système d'exploitation
Comme vous l’avez sans doute vu sur la page de téléchargement de Visual studio Code, il nous faut cliquer sur le lien en fonction du système d’exploitation de notre machine.
Si vous connaissez le type de système d’exploitation que vous avez, vous pouvez passer à la section suivante.
Si vous ne savez pas si vous avez une version 32 bits ou 64 bits de Windows, alors je fais un petit aparté pour vous, afin de vous apprendre comment le savoir.
Informations Système
Pour savoir quelle version du système Windows vous avez, vous devez vous rendre dans les paramètres, ou panneau de configuration pour les machines les plus anciennes. Pour cela, on clique sur le bouton Démarrer et ensuite sur Paramètres :
Il faut ensuite vous rendre sur l’onglet système (à gauche), et enfin sur informations système :
Repérez ensuite la ligne indiquant le type de système :
Téléchargement de Visual Studio Code
Nous devons donc choisir de télécharger le fichier d’installation de VS code en fonction de notre système d’exploitation.
Les concepteurs qui ont un système Windows 64 bits (x64), cliqueront sur le 1er lien.
Les utilisateurs de Mac cliqueront sur le 2ème lien.
Les opérateurs de Linux cliqueront sur le 3ème où 4ème lien, en fonction du type de système Linux.
Les développeurs qui ont un système Windows 32 bits(x86) cliqueront sur le 5ème lien (plus)
Système Windows 32 bits (x86)
Ceux d’entre vous qui ont un système Windows 32 bits(x86) seront envoyés sur la page suivante après avoir cliqué sur le lien “Plus”. Il suffit alors de cliquer sur un des liens indiquant 32 bits, en fonction de si vous voulez installer pour 1 seul utilisateur, ou sur le système pour le rendre disponible à tous les utilisateurs du Pc.
Les autres peuvent télécharger depuis la page vue précédemment.
Enregistrement du fichier d'installation
Après avoir cliqué sur le lien de téléchargement, un nouvel onglet s’ouvre sur la documentation de visual studio code, ainsi qu’une fenêtre de l’explorateur Windows, afin que nous l’on décide où nous voulons enregistrer le fichier d’installation de visual studio code.
C’est à vous de voir ou vous souhaitez enregistrer ce fichier. Pour ma part j’ai un dossier nommé logiciels-programmes, ou je décide d’enregistrer ce fichier. Le principal est de se souvenir ou nous l’enregistrons.
Lancement de l'installation de Visual Studio Code
Après le téléchargement du fichier, il faut ouvrir le dossier dans lequel nous l’avons enregistré, et faire un double clics sur le fichier d’installation de VS code.
Accord de licence
Après avoir double cliqué sur le fichier, la fenêtre de l’installateur de VS code s’ouvre.
Avec en premier lieu, la demande d’accord de licence. Il faut bien évidemment sélectionner le bouton radio acceptant ce contrat de licence (après l’avoir lu, bien entendu ! 😉)
Dossier de destination
L’installateur nous demande ensuite où nous voulons enregistrer le dossier d’installation de visual studio code.
Libre à vous de l’enregistrer où vous le souhaitez. Vous pouvez également laisser le choix par défaut qui vous est proposé.
Comme je vous l’ai dit précédemment, nous pouvons également enregistrer ce dossier sur un disque dur externe par exemple.
Pour ma part, le choix par défaut me convient.
Dossier du menu Démarrer
L’installateur nous demande ensuite où nous souhaitons créer le raccourci dans le menu Démarrer. En effet l’installateur propose de créer par défaut un dossier Visual Studio Code dans le menu Démarrer, et d’y placer le raccourci. Nous pouvons ici choisir un autre dossier, ou également de ne pas créer de dossier en cliquant sur la case à cocher en bas à gauche.
Pour ma part, j’accepte le choix par défaut.
Tâches supplémentaires
L’installateur nous demande maintenant si nous voulons lui confier des tâches supplémentaires, à savoir :
- Créer une icône sur le bureau
- Ajouter l’action “Ouvrir avec Code” au menu contextuel de fichier de l’Explorateur Windows.
- Ajouter l’action “Ouvrir avec Code” au menu contextuel de répertoire de l’Explorateur Windows.
- Inscrire Code en tant qu’éditeur pour les type de fichiers pris en charge.
- Ajouter à PATH(disponible après le redémarrage).
Pour expliquer un peu ces tâches : Je pense que créer une icône de bureau est assez compréhensible sans explications. Les 2 autres pour l’ajout d’action “Ouvrir avec Code” permettent lorsque nous faisons un clic droit sur un fichier (pour la 1ère action) ou un répertoire (dossier) pour la 2ème action, d’avoir la possibilité d’ouvrir directement ce fichier ou ce répertoire dans VS Code.
Pour l’inscription de code en tant qu’éditeur, là aussi c’est assez clair. Nous aurons la possibilité de nous servir de VS code pour tous les fichiers ayant une extension qu’il peut ouvrir et lire.
Et enfin la dernière, qui est d’ajouter à PATH. Celle ci nous permettra de lancer VS Code depuis une ligne de commande d’un terminal par exemple. Ou encore d’ajouter des variables d’environnement que nous définirons dans les paramètres de Visual Studio Code. Cela peut être le chemin vers la version de PHP que nous voulons utiliser par exemple. Mais bien d’autres variables pourront être créées.
Et si jamais l’utilisation des lignes de commande depuis un terminal vous intéresse, n’hésitez pas à lire l’article que j’ai fait à ce sujet sur le blog.
Donc, maintenant, à vous de voir quelles tâches supplémentaires peuvent vous être utiles dans votre utilisation quotidienne de VS Code.
Récapitulatif de l'installation
L’installateur nous fait ensuite un récapitulatif de l’installation qu’il s’apprête à lancer.
À ce stade, nous pouvons encore modifier nos choix en revenant sur les fenêtres précédentes avec le bouton Précédent.
Pour ma part, tout me convient alors je lance l’installation en cliquant sur le bouton Installer.
Installation en cours...
Après avoir cliqué sur le bouton Installer, l’installation se lance…
Installation terminée avec succès
L’installation de Visual Studio Code est maintenant terminée. BRAVO ! C’est un succès !
La fenêtre de fin d’installation propose ensuite une case à cocher pour exécuter immédiatement VS Code après la fermeture de cette fenêtre. Si nous décochons cette case, bien évidemment VS Code ne s’exécutera pas immédiatement.
Mais nous ne l’avons pas installer pour ne pas l’ouvrir, n’est ce pas ? Alors laissons cette case à cocher sélectionnée et cliquons sur le bouton Terminer.
De plus, il va peut être falloir mettre notre interface de VS Code en français ??
Auto Promotion
Ce tutoriel concernant l’installation de Visual Studio Code est maintenant terminé.
Mais ne vous inquiétez pas, comme souvent, je vais ajouter un petit BONUS à ce tutoriel, en vous expliquant comment mettre son interface en français.
Mais avant cela, je ma permets de vous demander à mon tour, votre aide pour m’encourager à continuer de produire du contenu et également m’aider pour le référencement de mon site, de ma page Facebook , Instagram ou de ma chaine YouTube. Produire ces tutoriels me prend beaucoup de temps, et c’est pourquoi je vous demande en retour de prendre quelques secondes, au pire quelques minutes, pour vous inscrire sur le site, ou pour liker, partager, commenter ces contenus. Vous pouvez également me laisser en commentaires, les sujets que vous aimeriez lire sur les articles de blog Activateur Web.
Si vous pouvez faire une de ces actions, je vous en remercie par avance. Vous pouvez également les faire toutes ! 👌
Ceci fait, voyons maintenant le Bonus. Mais ne m’oubliez pas Svp…
🎆🎇🎈 BONUS 🎉🎊🎆
Visual studio code en français
Après la fermeture de l’installateur, Visual Studio Code s’ouvre. Nous arrivons sur l’interface avec la page de démarrage qui s’affiche par défaut.
Alors depuis quelque temps, VS Code, au premier démarrage, détecte la langue du système sur lequel il est installé, et propose via les notifications d’installer le module linguistique automatiquement.
Si vous avez cette notification qui s’affiche dans VS Code, alors vous avez simplement à cliquer sur le bouton “Installer et Redémarrer”, pour pouvoir bénéficier de VS Code en français.
Si en revanche, vous n’avez pas cette notification, alors lisez ce qui suit dans ce bonus, et je vous explique comment faire pour mettre VS Code en français.
Pour ceux qui n’ont pas la notification, ou si Visual Studio Code n’a pas détecté la langue du système, pour pouvoir changer la langue, il faut se rendre dans la palette de commande.
Pour cela, nous pouvons, soit taper sur les touches de raccourci : CTRL + SHIFT + P en même temps, ou alors aller dans l’onglet View, et ensuite de cliquer sur Command palette.
Dans la palette de commande qui est apparue, il faut taper display (pour afficher en français), et ensuite cliquer sur le choix Configure Display Language
Après avoir cliqué sur “Configure Display Language”, une liste des modules linguistiques disponibles pour Visual Studio Code apparaît. Il nous reste à sélectionner le module que nous voulons. Donc ici, nous choisirons le français en cliquant dessus :
Une fenêtre s’ouvre nous demandant de redémarrer VS Code :
Après redémarrage de Visual Studio Code, nous voyons que notre interface est maintenant en français. BRAVO !
Conclusion
Ce tutoriel est maintenant terminé. Je compte sur vous, pour liker, partager, commenter, et si vous souhaitez être avertis de la publication d’un nouveau tutoriel, inscrivez vous sur le site et vous serez averti en avant-première.
Dites moi également si vous avez des besoins en tutoriels, les sujets qui pourraient être traités dans les prochains articles. Par exemple, je pense faire de nouveaux tutoriels sur VS Code, comme comment installer les extensions en fonction des langages de programmation utilisés, ou comment déboguer notre code avec le débogueur de l’interface, ou encore comment synchroniser les différentes installations de Visual Studio Code avec un compte Microsoft ou avec un compte GitHub.
Bref, vous voyez que ce ne sont pas les idées de tutoriels qui manquent, mais parfois le temps pour les produire. Alors s’il vous plait, encore une fois, encouragez moi à continuer et à ce que ce blog soit référencé correctement.
Je vous remercie d’avoir lu cet article. Je vous dis à très vite pour un autre tutoriel. En attendant, prenez soin de vous et surtout restez curieux !
