Comment utiliser Visual Studio Code afin de créer une application ?

En avril 2015, le dernier né de la famille Microsoft voit le jour durant une conférence des développeurs Build. Visual Studio Code, un éditeur de code très efficace et de nombreux développeurs utilisent. Or, ce programme très complet peut être difficile de prendre en mains lorsque l’on débute. C’est pourquoi dans cet article, nous vous expliquons en détails comment utiliser Visual Studio Code afin de créer une application.

A quoi sert Visual Studio Code ?

Pour savoir comment utiliser Visual Studio Code, il faut avant tout bien connaître cet éditeur de code. Celui que l’on appelle également VS Code est éditeur de code développé par Microsoft en 2015, totalement gratuit. Son gros avantage est qu’il est disponible sur tous les systèmes d’exploitation comme Windows, Linux ou encore Mac. En effet, le logiciel a été conçu avec le framework Electron afin de pouvoir principalement développer des projets avec, Javascript, Node.js mais aussi TypeScript.

Pourquoi utiliser Visual Studio Code ?

Si vous lisez cet article, vous devez certainement vous demander pourquoi utiliser Visual Studio Code ? Il est important de savoir que changer d’éditeur de codes n’est pas toujours une chose facile à faire. En effet, vous êtes déjà habitué à votre solution de codage qui doit répondre au mieux à vos besoins et que vous manipuler avec une grande facilité. Or, utiliser Visual Studio Code vous permettra d’être rassuré dès la première utilisation.

En effet, Visual Studio Code est très facile à installer mais surtout très rapide. De plus, il possède une interface graphique responsive et entièrement personnalisable grâce à des thèmes pré-installés. Il vous sera donc possible de développer soit via les fonctionnalités par défaut (pour le HTML, CSS, Javascript, Typescript…) soit en ajoutant des extensions disponibles afin de répondre au mieux à vos besoins. Et cela est possible Quel que soit le langage : Javascript, PHP, JAVA, C#, C++, etc… Ce qui vous offre un très gros avantage.

Pour faire vos premiers pas, Visual Studio Code possède la fonctionnalité « IntelliSense » afin de vous assister tout au long de votre développement. Cela vous simplifiera l’édition du code ou encore l’appel des propriétés et l’importation des dépendances. Il vous sera également possible de travailler sur différents projets en même temps et sur la même fenêtre. Ainsi, VS Code vous sera utile pour développer des applications, mais également pour corriger des bugs liés au développement.

Enfin, pourquoi utiliser Visual Studio Code ? Car il s’agit d’un logiciel totalement gratuit et open source. Ainsi, vous allez pouvoir créer de nombreux projets sans devoir débourser le moindre centime pour utiliser ses fonctionnalités très avancées. Grâce à un seul et même outil, votre travail de développement s’en trouvera fortement facilité afin de vous faire gagner du temps.

La fonction IntelliSense

Utiliser Visual Studio Code vous permettra d’utiliser la très utile fonction IntelliSense. Il s’agit en effet d’un assistant de complétion de code qui vous accompagnera sur chaque ligne de code que vous allez produire. Pour cela, il va analyser les membres, les variables, mais aussi les mots clés et toute information relative avec ce que vous êtes en train d’écrire. Cela veut donc dire que pendant que vous serez en train de coder, IntelliSense vous proposera des suggestions adaptées. Sans oublier que cette fonctionnalité peut supporter de nombreux langages informatiques, comme précisé précédemment. Ainsi, vous allez pouvoir écrire vos lignes de code plus rapidement en profitant de suggestions réellement intéressantes.

La fonction de débogage

De plus, utiliser Visual Studio Code, vous allez également pouvoir bénéficier de la fonction de débogage. Ce débogueur intégré vous permettra de vérifier si votre code contient des erreurs en vous aidant à identifier les causes. En effet, cette fonctionnalité va s’arrêter sur le bug et vous proposer différentes solutions que vous devez essayer jusqu’à parvenir à le réparer.

Créer une application grâce à Visual Studio Code

Nous allons donc maintenant vous expliquer comment utiliser Visual Studio Code pour créer une application. En effet, grâce à cet éditeur de code, vous allez pouvoir facilement créer une application de qualité et répondant au mieux à vos attentes.

Créer un nouveau projet

Vous allez donc pouvoir utiliser Visual Studio Code afin de créer un nouveau projet. Pour cela, vous devrez tout d’abord lancer l’éditeur puis sélectionner Fichier / Nouveau / Projet. Vous devrez ensuite sélectionner l’Application WPF en utilisant le Visual C#. Vous devrez alors nommer votre projet. Prenez bien le soin également de noter l’emplacement qui va contenir les sources du projet ainsi que mais également les binaires générés. Validez alors votre opération.

Différentes zones vont donc apparaître sur votre écran : le Designer, le xaml associé au designer mais également l’arborescence des différents éléments de votre projet. N’hésitez pas non plus à visiter le menu afin de voir toutes les fonctionnalités que vous avez à votre disposition. A savoir :

• Affichage: afin de voir toutes les fenêtres disponibles
• Liste d’erreurs: qui contient les erreurs générées par votre compilation
• Sortie : qui affiche des messages d’état relatifs aux nombreuses fonctionnalités de l’environnement de développement intégré (IDE)
• Projet: afin d’ajouter des éléments à votre projet. Cela également de voir les propriétés de celui-ci
• Générer: avec cette fonctionnalité, vous allez pouvoir construire vos binaires

Revenez donc aux propriétés de votre projet. Rendez-vous dans l’onglet « application » dans lequel vous allez pouvoir définir le nom de l’assembly et du namespace par défaut.

L’assembly peut être caractérisée par les éléments suivants :

• Le nom
• Un numéro de version
• Un identificateur de culture, (qui peut servir, par exemple, définir le séparateur décimal pour
• les nombres)
• Une clé publique (qui permet aux programmes utilisant cette assembly de vérifier qu’il s’agit bien de celle qu’ils ont référencée)

Le namespace, quant à lui, vous permettra un ensemble de classes dans un seul et même « groupement ».

Ajouter différents éléments graphiques

Comment utiliser Visual Studio Code ? En ajoutant également différents éléments graphiques à votre projet. Pour cela, vous devrez utiliser la fonction du « designer » et ajouter un élément « button » sur votre écran. Rendez-vous dans les propriétés dudit bouton afin de découvrir toutes les fonctionnalités disponibles. Vous aurez effectivement la possibilité de faire de nombreuses modifications notamment au niveau des couleurs, de la taille, de l’alignement ou encore des marges.

Afin de couper bien proprement votre fenêtre, prenez le soin de supprimer le bouton auto de Width. Ajoutez alors un élément Grid. Cet élément doit prendre entièrement votre fenêtre et que vous allez alors partager en deux lignes et en trois colonnes. Vous pourrez ajouter les éléments suivants :

• 2 TextBlock (sur la 1ère colonne)
• 2 TextBox (sur la 2ème colonne)
• 2 Button (sur la 3ème colonne)

N’hésitez pas à compiler et à tester avant de valider votre opération.

Gérer les événements

Utiliser Visual Studio Code va également vous permettre d’intercepter les clics effectués sur les boutons. Vous devrez donc retourner dans les propriétés du bouton A vers le bouton B. Un petit éclair va apparaître sur votre écran, en haut à droite. Il vous suffit de cliquer dessus afin d’avoir accès à tous les événements liés à votre élément.

Retournez alors dans le code de la fonction ButtonABClick. Puis, passez votre souris sur MessageBox et sur Show. Différents tooltips vont donc apparaître afin de donner des informations sur la classe et les fonctions. Appuyez sur F12 (fonctionnalité Go to Definition) dans la MessageBox. Ainsi, vous pourrez vérifier que votre assembly se trouve bien dans les Références de votre projet afin de pouvoir utiliser cette classe.

Vous devrez réaliser la même opération du bouton B vers le bouton A. Maintenant, vous allez devoir identifier chaque TextBox pour y avoir accès dans le code behind (fichier .xaml.cs). Attribuez alors l’identifiant TextBoxA à la TextBox de la 1ère ligne, TextBoxB à celle de la seconde ligne, en passant par le xaml. Vous devrez faire de même avec le ButtonBAClick avant de compiler et de tester.

Des raccourcis très utiles pour utiliser Visual Studio Code

Afin de bien utiliser Visual Studio Code, voici une liste de raccourcis que vous allez pouvoir utiliser afin de gagner du temps :

• Réduire/Développer une sélection de code. Si vous désirez cacher du code qui bloque ou qui obstrue votre champ de vision : Ctrl+M+H/Ctrl+M+U.
• Commenter/Décommenter du code : au lieu d’ajouter “//” à la main à chaque ligne, vous pourrez sélectionner un ou plusieurs blocs de code et : Ctrl+K+C/Ctrl+K+U.
• Autocomplétion : il s’agit d’un raccourci très utile. En C#, au lieu de faire attention à avoir les parenthèses pour les conditions if, vous pouvez simplement écrire if et appuyer sur la touche Tabulation deux fois.
• Entourer une section de code (snippet) : comme avec la touche Tabulation, pour créer un snippet, vous pouvez entourer une section de code avec un snippet. Sélectionnez le code et appuyez sur Ctrl+K+S pour afficher un menu ainsi, vous pourrez sélectionner facilement votre snippet.

Comment utiliser Visual Studio Code afin de créer une application ?