{"id":408,"date":"2016-05-25T10:20:02","date_gmt":"2016-05-25T09:20:02","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=408"},"modified":"2016-05-25T10:20:16","modified_gmt":"2016-05-25T09:20:16","slug":"debuter-avec-visual-studio-code","status":"publish","type":"post","link":"https:\/\/lalloue.fr\/blog\/debuter-avec-visual-studio-code\/","title":{"rendered":"D\u00e9buter avec Visual Studio Code"},"content":{"rendered":"<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/icon.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-409\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/icon-150x150.png\" alt=\"icon\" width=\"100\" height=\"100\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/icon-150x150.png 150w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/icon-300x300.png 300w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/icon.png 512w\" sizes=\"(max-width: 100px) 100vw, 100px\" \/><\/a><\/p>\n<p><strong>Visual Studio Code<\/strong> est un \u00e9diteur de code <strong>l\u00e9ger, gratuit et multiplateforme<\/strong> propos\u00e9 par Microsoft.<\/p>\n<p>En d\u00e9pit de son nom, il est assez \u00e9loign\u00e9 du Visual Studio classiques et se veut optimis\u00e9 pour fonctionner sur Windows, Mac OS X, et Linux.<\/p>\n<p>Principalement destin\u00e9 au <strong>d\u00e9veloppement web<\/strong>, il fournit le support natif du javascript, Typescript et Node.js et met \u00e0 disposition un environnement riche d&#8217;extensions pour les autres languages (C++, C#, Python, PHP).<\/p>\n<p><!--more--><\/p>\n<h3>Contexte<\/h3>\n<p>Parti d&#8217;un outil exp\u00e9rimental au d\u00e9part, cet IDE se voulait avant tout une aide pour ceux qui d\u00e9veloppaient des applications web en utilisant le Javascript ou le Typescript.<\/p>\n<p>Mais 6 mois apr\u00e8s la mise \u00e0 disposition du produit extensible, la communaut\u00e9 cr\u00e9e plus de <strong>1000 extensions<\/strong> qui offrent maintenant un support pour presque n&#8217;importe quel langage.<\/p>\n<p>En avril 2016, Visual Studio Code annonce la premi\u00e8re `version release 1.0` et annonce plus de <strong>2 millions d&#8217;installations<\/strong> et <strong>500.000 utilisateurs actifs chaque mois<\/strong>, garantissant la continuit\u00e9 de l&#8217;outils pour l&#8217;avenir.<\/p>\n<blockquote><p>Les performances, la stabilit\u00e9, l\u2019accessibilit\u00e9 et la compatibilit\u00e9 sont de la plus grande importance pour nos utilisateurs, tout comme pour nous <em>&#8211; Microsoft<\/em><\/p><\/blockquote>\n<h3>Pr\u00e9sentation<\/h3>\n<p>Visual Studio Code se pr\u00e9sente comme un outils essentiellement open source, en fonction des briques techniques, le plus souvent sous licence MIT ou apache 2.0.<\/p>\n<p>Les sources du projet sont disponibles sur le `github` de Microsoft : <a href=\"https:\/\/github.com\/Microsoft\/vscode\">https:\/\/github.com\/Microsoft\/vscode<\/a><\/p>\n<p>Le mot cl\u00e9 de l&#8217;IDE est<strong> simplicit\u00e9<\/strong>, c&#8217;est pourquoi il ne propose par d\u00e9faut qu&#8217;un certain nombre de fonctionnalit\u00e9s de base, que l&#8217;on peut par la suite \u00e9tendre via des modules.<\/p>\n<p>Parmis ces <strong>fonctionnalit\u00e9s<\/strong> de base, on peut retrouver :<\/p>\n<ul>\n<li>Le support d&#8217;IntelliSense (syst\u00e8me de compl\u00e9tion de code intelligent)<\/li>\n<li>Le debogage<\/li>\n<li>La prise en charge des extensions et un store unifi\u00e9 (<a href=\"https:\/\/marketplace.visualstudio.com\/VSCodestore\">store<\/a>)<\/li>\n<li>Le support de 10 langues, dont le Fran\u00e7ais (<a href=\"https:\/\/code.visualstudio.com\/docs\/customization\/locales\">plus<\/a>)<\/li>\n<li>Versioning des fichiers avec GIT<\/li>\n<\/ul>\n<p>Concernant la <strong>compatibilit\u00e9 des syst\u00e8mes<\/strong>, tous ne sont pas compatibles :<\/p>\n<ul>\n<li><span style=\"color: #0073aa;\"><strong>Windows Vista<\/strong><\/span> : support\u00e9 mais plus pris en charge<\/li>\n<li><strong><span style=\"color: #0073aa;\">Windows 7 et +<\/span><\/strong> : compatible<\/li>\n<li><span style=\"color: #0073aa;\"><strong>OS X<\/strong><\/span> : Yosemite et El Capitan<\/li>\n<li><span style=\"color: #0073aa;\"><strong>Linux<\/strong> <\/span>: compatible<\/li>\n<\/ul>\n<p>Et quant \u00e0 l&#8217;interface, elle se veut la plus \u00e9pur\u00e9e possible :<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-410\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-1-1024x768.png\" alt=\"interface simple visual studio code\" width=\"700\" height=\"525\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-1-1024x768.png 1024w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-1-300x225.png 300w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-1-768x576.png 768w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-1.png 1537w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<h3>Installation<\/h3>\n<h4>Standard<\/h4>\n<p>Pour commencer l&#8217;installation, se rendre \u00e0 l&#8217;url de t\u00e9l\u00e9chargement et s\u00e9lectionner la version souhait\u00e9e (en fonction de l&#8217;OS cible) : <a href=\"https:\/\/code.visualstudio.com\/download\">page de t\u00e9l\u00e9chargement<\/a><\/p>\n<p><span style=\"color: #0073aa;\"><strong>TIP:<\/strong> <\/span>Le t\u00e9l\u00e9chargement complet fait un peu moins de 40 Mo<\/p>\n<p>L&#8217;ensemble de l&#8217;installation est tr\u00e8s simple et se r\u00e9sume \u00e0 choisir l&#8217;emplacement d&#8217;installation et si l&#8217;on souhaite ajouter &#8220;ouvrir avec Visual Studio Code&#8221; au clic droit d&#8217;un fichier ou dossier.<\/p>\n<h4>Avanc\u00e9e<\/h4>\n<p>Pour une installation plus pouss\u00e9e, une documentation est \u00e9galement disponible pour chaque plateforme (Mac OS X, Windows, Linux) : documentation<\/p>\n<p><strong>Windows :<\/strong><\/p>\n<p>Il est possible de r\u00e9cup\u00e9rer une version `autonome` de Visual Studio Code \u00e0 l&#8217;adresse suivante : https:\/\/code.visualstudio.com\/Docs\/?dv=winzip[zip archive]<\/p>\n<p>Une fois l&#8217;archive t\u00e9l\u00e9charg\u00e9e, il suffit d&#8217;executer `Code.exe` pour lancer Visual Studio Code.<\/p>\n<h3>Utilisation<\/h3>\n<p>Une fois install\u00e9, l&#8217;outils pr\u00e9sente une interface tr\u00e8s simple : <strong>4 boutons<\/strong> :<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/menu-vsc.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-411\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/menu-vsc.png\" alt=\"interface visual studio code\" width=\"700\" height=\"483\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/menu-vsc.png 658w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/menu-vsc-300x207.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<h4>Fonctionnalit\u00e9s de base<\/h4>\n<p>L&#8217;interface de Visual Studio Code fourni 4 fonctionnalit\u00e9s principales :<\/p>\n<ul>\n<li><strong><span style=\"color: #0073aa;\">L&#8217;\u00e9diteur<\/span><\/strong> : La principale partie de l&#8217;\u00e9cran. Il est possible d&#8217;ouvrir jusqu&#8217;\u00e0 3 editeurs c\u00f4te \u00e0 c\u00f4te.<\/li>\n<li><strong><span style=\"color: #0073aa;\">La &#8220;Side Bar&#8221;<\/span><\/strong> : Contient diff\u00e9rentes vues tel que l&#8217;explorateur de fichiers quand un projet est ouvert.<\/li>\n<li><span style=\"color: #0073aa;\"><strong>La &#8220;Status Bar&#8221;<\/strong><\/span> : En bas, pr\u00e9sente les informations du fichier \u00e9dit\u00e9.<\/li>\n<li><strong><span style=\"color: #0073aa;\">La &#8220;View Bar&#8221;<\/span><\/strong> : En bas \u00e0 gauche, permet de changer de view, et donne des informations additionelles sur le projet tel que le nombre de fichiers modifi\u00e9s quand Git est disponible.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-412\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-2-1024x574.png\" alt=\"Fonctionnalit\u00e9s de base Visual studio code\" width=\"700\" height=\"393\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-2-1024x574.png 1024w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-2-300x168.png 300w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-2-768x431.png 768w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-2.png 1355w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>A chaque d\u00e9marrage, Visual Studio Code recharge l&#8217;\u00e9tat de l&#8217;IDE tel qu&#8217;il \u00e9tait au dernier lancement. Tous les dossiers, fichiers ouverts sont pr\u00e9serv\u00e9s.<\/p>\n<p>L&#8217;interface de Visual Studio Code ne distingue pas la diff\u00e9rence entre un projet ouvert et un repertoire ouvert. Mais si un projet est trouv\u00e9 dans le repertoire courrant (exemple : projet C#), le context de ce projet va \u00eatre affich\u00e9 dans la &#8220;Status Bar&#8221; :<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-5.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-413\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-5.png\" alt=\"Status bar Visual Studio Code\" width=\"279\" height=\"48\" \/><\/a><\/p>\n<h4>Explorateur<\/h4>\n<p>L&#8217;<strong>explorateur<\/strong> permet de se d\u00e9placer, d&#8217;ouvrir et de g\u00e9rer tous les fichiers et dossiers du projet. Il est possible de faire plusieurs actions depuis cet endroit :<\/p>\n<ul>\n<li>Cr\u00e9er, supprimer, renommer les fichiers et dossiers<\/li>\n<li>D\u00e9placer les fichiers et dossiers en utilisant le drag&amp;drop<\/li>\n<li>Utiliser le menu contextuel pour int\u00e9ragir avec les fichiers<\/li>\n<\/ul>\n<p><span style=\"color: #0073aa;\"><strong>TIP:<\/strong><\/span> Il est possible de faire un drag&amp;drop d&#8217;un fichier du poste de travail vers Visual Studio pour le copier<\/p>\n<p>La section <strong>&#8220;Fichiers de travail&#8221;<\/strong> (ou Working Files) reprend la liste des fichiers actifs, c&#8217;est \u00e0 dire la liste des fichiers r\u00e9cemment modifi\u00e9s.<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-414\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-3.png\" alt=\"Explorateur de fichiers Visual Studio Code\" width=\"486\" height=\"540\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-3.png 486w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-3-270x300.png 270w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/a><\/p>\n<h4>Recherche<\/h4>\n<p>La fonction recherche disponible depuis le menu permet de rechercher tous les termes correspondants dans le dossier ouvert en cours.<\/p>\n<p><span style=\"color: #0073aa;\"><strong>TIP:<\/strong><\/span> La barre de recherche supporte les expression r\u00e9guli\u00e8res<\/p>\n<p>Il est \u00e9galement possible de configurer une recherche avanc\u00e9e en indiquant les fichiers \u00e0 exclure ou \u00e0 inclure.<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-4.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-415\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-4.png\" alt=\"Recherche visual studio code\" width=\"311\" height=\"224\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-4.png 311w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-4-300x216.png 300w\" sizes=\"(max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<h3>Git<\/h3>\n<p>Avant de l&#8217;utiliser, il est n\u00e9c\u00e9ssaire que Git soit install\u00e9 sur le poste de travail avec la version 2.0.0 minimum de Git.<\/p>\n<p>En ouvrant un projet existant, l&#8217;IDE va rep\u00e9rer si une configuration Git existe et r\u00e9cup\u00e9rer les informations automatiquement.<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-6.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-425\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-6.png\" alt=\"Menu Git\" width=\"380\" height=\"163\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-6.png 380w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-6-300x129.png 300w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<p>Au clic sur les fichiers de la file &#8220;Modifications&#8221;, Visual Studio Code ouvre l&#8217;outils permettant de comparer les 2 versions de ce fichier.<\/p>\n<p>Les informations de synchronisation des fichiers avec Git se retrouvent dans un aper\u00e7u dans la &#8220;Status Bar&#8221; en bas \u00e0 gauche :<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-7.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-416 size-medium\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-7-300x36.png\" alt=\"Status Bar Git\" width=\"300\" height=\"36\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-7-300x36.png 300w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-7.png 365w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Visual Studio Code int\u00e8gre la plupart des commandes Git dans l&#8217;\u00e9diteur.<\/p>\n<h4>Commit<\/h4>\n<p><span style=\"color: #ff6600;\"><strong>WARNING:<\/strong><\/span> Dans la version fran\u00e7aise, le mot <strong>commit<\/strong> a \u00e9t\u00e9 remplac\u00e9 par <strong>Stocker en zone de transit<\/strong><\/p>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 &#8220;commiter&#8221; les fichiers voulus. Pour cela cliquer sur l&#8217;icone `+` (Etape).<\/p>\n<p>Une fois les fichiers selectionn\u00e9s dans la zone de &#8220;modifications en zone de transit&#8221;, il suffit de renseigner un message dans le champs du menu &#8220;Git&#8221; puis d&#8217;appuyer sur `Entrer` pour valider un commit.<\/p>\n<h4>Branches et Tags<\/h4>\n<p>Il est possible de cr\u00e9er une branche ou de r\u00e9cup\u00e9rer son contenu directement depuis l&#8217;interface de l&#8217;IDE.<\/p>\n<p>Pour executer cette commande, ouvrir l&#8217;invite d&#8217;*ouverture rapide* (`Ctrl+P`), puis taper &#8220;git&#8221; puis &#8220;espace&#8221;. Visual Studio Code donne ainsi acc\u00e8s \u00e0 toutes les commandes Git disponibles :<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-8.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-417\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-8.png\" alt=\"Ouverture rapide Commandes git\" width=\"236\" height=\"92\" \/><\/a><\/p>\n<p>En tapant &#8220;git checkout&#8221;, l&#8217;\u00e9diteur propose alors la liste des branches et tags disponibles.<\/p>\n<p>La commande &#8220;git branch&#8221; permet de cr\u00e9er rapidement une nouvelle branche.<\/p>\n<h4>Remotes<\/h4>\n<p>Visual Studio Code offre la possibilit\u00e9 d&#8217;utiliser les diff\u00e9rentes actions d&#8217;int\u00e9ractions avec le Remote Git : push, pull, sync.<\/p>\n<p>Ces actions sont disponibles dans le menu contextuel accessible via l&#8217;icone `&#8230;`<\/p>\n<h4>Conflits<\/h4>\n<p>Les conflits sont reconnus par l&#8217;\u00e9diteur et sont affich\u00e9s avant de commiter dans un \u00e9cran simple tel que ci-dessous :<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-9.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-418\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-9.png\" alt=\"Ecran de r\u00e9solution de conflits Git\" width=\"700\" height=\"368\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-9.png 1062w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-9-300x158.png 300w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-9-768x404.png 768w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-9-1024x539.png 1024w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p><span style=\"color: #0073aa;\"><strong>NOTE:<\/strong><\/span> Plus d&#8217;informations sur la gestion des versions avec Visual Studio Code et Git : <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/versioncontrol\">documentation compl\u00e8te<\/a>.<\/p>\n<h4>D\u00e9bogueur<\/h4>\n<p>Le d\u00e9bogueur est l&#8217;une des fonctionalit\u00e9s cl\u00e9s de VSC en supportant le debug pour Node.js (Javascript, Typescript, et tous les autres langages transpil\u00e9s vers Javascript)<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-10.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-419\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-10.png\" alt=\"D\u00e9bogueur Visual Studio Code\" width=\"700\" height=\"330\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-10.png 1272w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-10-300x142.png 300w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-10-768x362.png 768w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-10-1024x483.png 1024w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p><span style=\"color: #0073aa;\"><strong>TIP:<\/strong><\/span> Pour les autres langages que ceux indiqu\u00e9s ci-dessus, des extensions existent sur le <a href=\"https:\/\/marketplace.visualstudio.com\/vscode\/Debuggers\">VS Code Marketplace<\/a><\/p>\n<p>Afin de configurer le d\u00e9bogeur il est n\u00e9c\u00e9ssaire de cr\u00e9er le fichier &#8220;launch.json&#8221;. Pour le cr\u00e9er, dans le menu &#8220;D\u00e9bogueur&#8221;, Cliquer sur le bouton &#8220;ouvrir launch.json&#8221; et selectionner l&#8217;environnement. Si celui-ci n&#8217;existe pas il sera automatiquement cr\u00e9\u00e9.<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-12.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-420\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-12.png\" alt=\"Cr\u00e9er le fichier launch.json\" width=\"607\" height=\"265\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-12.png 607w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-12-300x131.png 300w\" sizes=\"(max-width: 607px) 100vw, 607px\" \/><\/a><\/p>\n<p><span style=\"color: #0073aa;\"><strong>NOTE:<\/strong><\/span> Plus d&#8217;informations sur la configuration du d\u00e9buggueur : <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging\">documentation<\/a><\/p>\n<p>Il est \u00e9galement possible d&#8217;attacher le d\u00e9bogueur \u00e0 une instance de Chrome existante.<\/p>\n<p>Pour pouvoir le faire, il est n\u00e9c\u00e9ssaire d&#8217;installer l&#8217;extension &#8220;Debugger for Chrome&#8221; via la commande : `ext install debugger-for-chrome`.<\/p>\n<p><span style=\"color: #0073aa;\"><strong>NOTE:<\/strong><\/span> Plus d&#8217;informations sur la configuration de l&#8217;extension &#8220;Debugger for Chrome&#8221; : <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=msjsdiag.debugger-for-chrome\">documentation<\/a><\/p>\n<h3>Raccourcis claviers<\/h3>\n<p>La liste compl\u00e8te des raccourcis clavier est disponible sous Visual Studio Code dans le menu &#8220;Fichier&#8221; &gt; &#8220;Pr\u00e9f\u00e9rences&#8221; &gt; &#8220;Raccourcis clavier&#8221;.<\/p>\n<p>Ci-dessous, les principaux raccourcis \u00e0 conna\u00eetre :<\/p>\n<table border=\"\u00bb1\u2033\" width=\"\u00bb450\u2033\" cellspacing=\"\u00bb0\u2033\" cellpadding=\"\u00bb0\u2033\">\n<tbody>\n<tr style=\"background-color: #f2f2f2;\">\n<th><strong>Cat\u00e9gorie<\/strong><\/th>\n<th><strong>Raccourci<\/strong><\/th>\n<th><strong>Description<\/strong><\/th>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Interface<\/td>\n<td>Ctrl+B<\/td>\n<td>Afficher ou non la &#8220;side bar&#8221;<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f7f7f7;\">Ctrl+\\<\/td>\n<td style=\"background-color: #f7f7f7;\">Fractionner l&#8217;\u00e9diteur en deux<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"4\">G\u00e9n\u00e9ral<\/td>\n<td>Ctrl+P<\/td>\n<td>Rechercher rapidement un fichier par son nom et l\u2019ouvrir (Quick Search)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f7f7f7;\">Ctrl+K Ctrl+P<\/td>\n<td style=\"background-color: #f7f7f7;\">Naviger dans la liste des fichiers actifs de la section Fichiers de travail, m\u00eame si celle-ci est masqu\u00e9e<\/td>\n<\/tr>\n<tr>\n<td>Ctrl+S<\/td>\n<td>Enregistrer<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f7f7f7;\">Ctrl+G<\/td>\n<td style=\"background-color: #f7f7f7;\">Se positionner \u00e0 un num\u00e9ro de ligne sp\u00e9cifique dans un fichier<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"4\">recherche<\/td>\n<td>Ctrl+Shift+F<\/td>\n<td>Ouvre le menu &#8220;recherche&#8221;<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f7f7f7;\">Ctrl+Sift+J<\/td>\n<td style=\"background-color: #f7f7f7;\">Montre les champs additionnels du champs de recherche<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Configuration<\/h3>\n<p>Il est possible de configurer l&#8217;\u00e9diteur de 2 mani\u00e8res diff\u00e9rentes :<\/p>\n<p>*<span style=\"color: #0073aa;\"><strong> Globalement<\/strong><\/span> : menu &#8220;Fichier&#8221; &gt; &#8220;Pr\u00e9f\u00e9rences&#8221; &gt; &#8220;param\u00e8tres utilisateur&#8221; (ou touche `F1`, puis tapper &#8220;user&#8221;)<br \/>\n* <span style=\"color: #0073aa;\"><strong>Par projet<\/strong><\/span> : menu &#8220;Fichier&#8221; &gt; &#8220;Pr\u00e9f\u00e9rences&#8221; &gt; &#8220;param\u00e8tres de l&#8217;espace de travail&#8221; (ou touche `F1`, puis tapper &#8220;worksp&#8221;)<\/p>\n<p>Quelques exemples de param\u00e9trage :<\/p>\n<table border=\"\u00bb1\u2033\" width=\"\u00bb450\u2033\" cellspacing=\"\u00bb0\u2033\" cellpadding=\"\u00bb0\u2033\">\n<tbody>\n<tr style=\"background-color: #f2f2f2;\">\n<th><strong>Fonction<\/strong><\/th>\n<th><strong>Param\u00e8tre<\/strong><\/th>\n<th><strong>Description<\/strong><\/th>\n<\/tr>\n<tr>\n<td rowspan=\"3\">G\u00e9n\u00e9ral<\/td>\n<td>files.exclude<\/td>\n<td>Exclure les fichiers et les dossiers de l\u2019affichage dans l\u2019explorateur<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f7f7f7;\">files.encoding<\/td>\n<td style=\"background-color: #f7f7f7;\">Renseigner l\u2019encodage des fichiers (globalement ou par projet)<\/td>\n<\/tr>\n<tr>\n<td>window.reopenFolders<\/td>\n<td>Indique comment restaurer les fichiers de votre pr\u00e9c\u00e9dente session. Par d\u00e9faut, le dernier repertoire ouvert sera restaur\u00e9 par defaut (param\u00e8tre one). none ne restaure rien \u00e0 l\u2019ouverture d\u2019une nouvelle session. all restaure l\u2019ensemble des dossiers des sessions pr\u00e9c\u00e9dentes.<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Sauvegarde<\/td>\n<td style=\"background-color: #f7f7f7;\">files.autoSave<\/td>\n<td style=\"background-color: #f7f7f7;\">La valeur off d\u00e9sactive la sauvegarde automatique des fichiers, afterDelay sauvegarde les fichiers apr\u00e8s un d\u00e9lai configur\u00e9 (ligne suivante), onFocusChange sauvegarde les fichiers quand le focus n\u2019est plus sur le fichier en cours<\/td>\n<\/tr>\n<tr>\n<td>files.autoSaveDelay<\/td>\n<td>Configurer le d\u00e9lai en milliseconds avant de sauvegarder le fichier<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"1\">Recherche<\/td>\n<td style=\"background-color: #f7f7f7;\">search.exclude<\/td>\n<td style=\"background-color: #f7f7f7;\">Exclure les fichiers et les dossiers de la recherche. (exemple : repertoire node_modules)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Il est \u00e9galement possible de configurer le <strong>formatage du code<\/strong> d&#8217;un projet.<\/p>\n<p>Par d\u00e9faut, VSC poss\u00e8de d\u00e9j\u00e0 des r\u00e8gles de formatage par d\u00e9faut pour les langages `javascript` et `Typescript`. Ce param\u00e9trage se trouve des les param\u00e8tres projets tel que l&#8217;exemple suivant :<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ Sp\u00e9cifie le chemin de dossier contenant les fichiers tsserver et lib*.d.ts \u00e0 utiliser.\r\n&quot;typescript.tsdk&quot;: null,\r\n\r\n\/\/ Fonctions compl\u00e8tes avec leur signature de param\u00e8tre.\r\n&quot;typescript.useCodeSnippetsOnMethodSuggest&quot;: false,\r\n\r\n\/\/ Activer\/d\u00e9sactiver la validation TypeScript\r\n&quot;typescript.validate.enable&quot;: true,\r\n\r\n\/\/ Enables tracing of messages send to the TS server\r\n&quot;typescript.tsserver.trace&quot;: &quot;off&quot;,\r\n\r\n\/\/ D\u00e9finit le traitement des espaces apr\u00e8s une virgule de d\u00e9limitation\r\n&quot;typescript.format.insertSpaceAfterCommaDelimiter&quot;: true,\r\n\r\n[...]\r\n\r\n\/\/ Activer\/d\u00e9sactiver la validation JavaScript\r\n&quot;javascript.validate.enable&quot;: true,\r\n\r\n\/\/ D\u00e9finit le traitement des espaces apr\u00e8s une virgule de d\u00e9limitation\r\n&quot;javascript.format.insertSpaceAfterCommaDelimiter&quot;: true,\r\n\r\n\/\/ D\u00e9finit le traitement des espaces apr\u00e8s un point-virgule dans une instruction for\r\n&quot;javascript.format.insertSpaceAfterSemicolonInForStatements&quot;: true,\r\n\r\n\/\/ D\u00e9finit le traitement des espaces apr\u00e8s un op\u00e9rateur binaire\r\n&quot;javascript.format.insertSpaceBeforeAndAfterBinaryOperators&quot;: true,\r\n\r\n[...]\r\n<\/pre>\n<p>Pour les langages non natifs \u00e0 VSC il existe en g\u00e9n\u00e9ral des extensions permettant de mettre en place ce formatage.<\/p>\n<p><span style=\"color: #0073aa;\"><strong>NOTE:<\/strong><\/span> Plus d&#8217;informations sur la configuration : <a href=\"https:\/\/code.visualstudio.com\/docs\/customization\/userandworkspace\">documentation<\/a><\/p>\n<h3>Extensions<\/h3>\n<p>Visual Studio Code est con\u00e7u pour \u00eatre le plus simple possible. Si des fonctionnalit\u00e9s sont manquantes, elles se trouvent alors surement dans le <a href=\"https:\/\/marketplace.visualstudio.com\/VSCode\">VS Code Extension Marketplace<\/a><\/p>\n<p>Il est \u00e9galement possible de trouver et d&#8217;installer une extension directement depuis l&#8217;\u00e9diteur en tapant : `F1`, puis en tapant &#8220;Extensions&#8221; :<\/p>\n<p><a href=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-11.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-421 size-full\" src=\"http:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-11.png\" alt=\"extensions Visual Studio Code\" width=\"593\" height=\"214\" srcset=\"https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-11.png 593w, https:\/\/lalloue.fr\/blog\/wp-content\/uploads\/2016\/05\/screenshot-11-300x108.png 300w\" sizes=\"(max-width: 593px) 100vw, 593px\" \/><\/a><\/p>\n<p><span style=\"color: #0073aa;\"><strong>TIP:<\/strong><\/span> Il est \u00e9galement possible d&#8217;installer une extension depuis la recherche rapide (`Ctrl+P`) en tapant &#8220;ext install&#8221;<\/p>\n<p>Quelques commandes utiles :<\/p>\n<ul>\n<li><span style=\"color: #0073aa;\"><strong>Extensions: Install Extension<\/strong><\/span> : Installe l&#8217;extension indiqu\u00e9e<\/li>\n<li><strong><span style=\"color: #0073aa;\">Extensions: Show Installed Extensions<\/span><\/strong> : Indique les extensions d\u00e9j\u00e0 install\u00e9es (et possibilit\u00e9 de supprimer)<\/li>\n<li><strong><span style=\"color: #0073aa;\">Extensions: Show Outdated Extensions<\/span><\/strong> : Indique les extensions proposant une mise \u00e0 jour<\/li>\n<\/ul>\n<p>Il est \u00e9galement possible de cr\u00e9er sa propre extension Visual Studio Code. Pour plus d&#8217;informations, se rendre sur la <a href=\"https:\/\/code.visualstudio.com\/docs\/extensions\/overview\">documentation officielle<\/a>.<\/p>\n<p>Quelques extensions utiles :<\/p>\n<table border=\"\u00bb1\u2033\" width=\"\u00bb450\u2033\" cellspacing=\"\u00bb0\u2033\" cellpadding=\"\u00bb0\u2033\">\n<tbody>\n<tr style=\"background-color: #f2f2f2;\">\n<th><strong>Cat\u00e9gorie<\/strong><\/th>\n<th><strong>Nom<\/strong><\/th>\n<th><strong>Lien<\/strong><\/th>\n<th><strong>Description<\/strong><\/th>\n<\/tr>\n<tr>\n<td rowspan=\"3\">Langage<\/td>\n<td>C#<\/td>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode.csharp\">marketplace<\/a><\/td>\n<td>Support du langage C# pour VSC<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f7f7f7;\">C \/ C++<\/td>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode.cpptools\">marketplace<\/a><\/td>\n<td style=\"background-color: #f7f7f7;\">Support du langage C \/ C++ pour VSC<\/td>\n<\/tr>\n<tr>\n<td>Python<\/td>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.jshint\">marketplace<\/a><\/td>\n<td>Support du langage Python pour VSC<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"1\">Qualit\u00e9<\/td>\n<td style=\"background-color: #f7f7f7;\">JSHint<\/td>\n<td style=\"background-color: #f7f7f7;\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-vscode.csharp\">marketplace<\/a><\/td>\n<td style=\"background-color: #f7f7f7;\">Outils d\u2019analyse de code javascript<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Snippets<\/td>\n<td>Angular 1 javascript<\/td>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=johnpapa.Angular1\">marketplace<\/a><\/td>\n<td>Snippet pour Angular 1 (ou g\u00e9n\u00e9rateur de bouts de code)<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #f7f7f7;\">Angular 2 javascript<\/td>\n<td style=\"background-color: #f7f7f7;\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=johnpapa.Angular2\">marketplace<\/a><\/td>\n<td style=\"background-color: #f7f7f7;\">Snippet pour Angular 2 (ou g\u00e9n\u00e9rateur de bouts de code)<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"1\">Debug<\/td>\n<td>Debbugger for Chrome<\/td>\n<td><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=msjsdiag.debugger-for-chrome\">marketplace<\/a><\/td>\n<td>Debug le code javascript depuis un navigateur Chrome<\/td>\n<\/tr>\n<tr>\n<td rowspan=\"1\">Autre<\/td>\n<td style=\"background-color: #f7f7f7;\">Cordova Tools<\/td>\n<td style=\"background-color: #f7f7f7;\"><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=vsmobile.cordova-tools\">marketplace<\/a><\/td>\n<td style=\"background-color: #f7f7f7;\">Outils de conception d\u2019application mobiles hybrides avec Cordova<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Conclusion<\/h3>\n<p>Visual Studio Code est *simple, efficace, rapide* et concurrence directement les outils tels que &#8220;Notepadd++&#8221;, &#8220;Webstorm&#8221; ou &#8220;Sublim text&#8221;.<\/p>\n<p>Avec un nombre d&#8217;extensions qui augmente chaque jour et un nombre d&#8217;utilisateurs toujours croissant, cet \u00e9diteur pourrait bien devenir l&#8217;outils indispensable des d\u00e9veloppeurs web.<\/p>\n<p>En plus de proposer le contr\u00f4le de version (Git), le d\u00e9boguage, l&#8217;outils propose \u00e9galement la gestion de Tasks (Make, Ant, Gulp, Grunt, etc&#8230;), et le multi platforme. Tout le reste est en g\u00e9n\u00e9ral disponible via les extensions.<\/p>\n<p>Bien que VSC ne soit pas \u00e0 la hauteur de Visual Studio classique (et ce n&#8217;est pas le but), l&#8217;outils est tr\u00e8s riche en fonctionnalit\u00e9s et est continuellement am\u00e9lior\u00e9 par Microsoft, ce qui garanti un bel avenir pour cet \u00e9diteur.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visual Studio Code est un \u00e9diteur de code l\u00e9ger, gratuit et multiplateforme propos\u00e9 par Microsoft. En d\u00e9pit de son nom, il est assez \u00e9loign\u00e9 du Visual Studio classiques et se veut optimis\u00e9 pour fonctionner sur Windows, Mac OS X, et Linux. Principalement destin\u00e9 au d\u00e9veloppement web, il fournit le support natif du javascript, Typescript et &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/lalloue.fr\/blog\/debuter-avec-visual-studio-code\/\" class=\"more-link\">Continuer la lecture <span class=\"screen-reader-text\"> \u00ab\u00a0D\u00e9buter avec Visual Studio Code\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[45],"tags":[],"_links":{"self":[{"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/408"}],"collection":[{"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/comments?post=408"}],"version-history":[{"count":22,"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/408\/revisions"}],"predecessor-version":[{"id":445,"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/posts\/408\/revisions\/445"}],"wp:attachment":[{"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/media?parent=408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/categories?post=408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lalloue.fr\/blog\/wp-json\/wp\/v2\/tags?post=408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}