Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Création d’un projet Web dans Visual Studio Code

Poster un commentaire

Je suis en train de me faire la main sur Visual Studio Code. Etant développeur Web mon premier projet est évidemment… un projet Web.

Il ne suffit pas de l’écrire, il faut ensuite le lancer pour le tester.

Je vais présenter deux approches possibles qui seront un bon moyen de débuter en douceur sur cet outil.

Installer Visual Studio Code

Le site officiel est ici:

https://code.visualstudio.com

Visual Studio Code (VSC) est disponible sur les plateformes suivantes:

  • Windows >=7
  • Linux: Debian, Ubuntu, RedHat, Fedora, CentOS
  • MacOS 10.x

Le tuto porte sur Windows, mais je ne pense pas que ce soit bien différent chez la concurrence.

Présentation rapide de VSC

On lance VSC depuis la ligne de commande suivante depuis le répertoire c:\temp\testweb (ou celui de votre choix):

code

La fenêtre qui s’affiche ressemble à celle-ci:

2016-12-07_15-55-43

 

La zone de travail est composée d’une barre d’outils disposées à gauche.

Le premier icône est important: 2016-12-07_15-58-40

Il affiche l’EXPLORER contenant l’arborescence de répertoires et les fichiers accessibles depuis le point de lancement de VSC.

Au fur et à mesure de de son avancement on va ouvrir des fichiers. VSC permet d’ouvrir plusieurs fichiers simultanément. L’apparence devient celle-ci:

2016-12-07_16-02-29

 

On remarque les onglets, mais aussi l’arborescence OPEN EDITORS qui se remplit.

Un outil qui va beaucoup nous servir est INTEGRATED TERMINAL. On n’est pas obligé de s’en servir, Terminal est juste une console que l’on peut lancer comme n’importe quelle console DOS. A vous de voir.

Pour l’ouvrir je préfère me servir du menu View/Integrated terminal:

2016-12-07_16-07-04

 

Quelques commandes ont été exécutées, c’est une fenêtre DOS.

 

Une dernière chose à savoir: VSC enregistre automatiquement les fichiers qui sont édités.

Configurer son environnement

Commencez par installer Node.js et Npm. c’est l’outillage de base et de plus en plus l’outillage indispensable d’un environnement de dev. On va construire un projet .Net Core qui fait abondamment usage de ces outils.

Vous devrez également installer .Net Core. Pour la suite j’ai travaillé avec les versions suivantes:

2016-12-07_16-12-57

 

On travaille en C#, on doit commencer par installer l’extension C#. On fait cela depuis la palette que l’on ouvre depuis la commande:

CTRL + SHIFT + P.

2016-12-07_16-17-57

Une série de commandes s’ouvrent, on lance juste celle-ci:

ext install

Une autre alternative est de cliquer sur l’icône: 2016-12-07_16-22-46

Dans tous les cas le magasin d’extensions s’ouvre:

2016-12-07_16-23-45

On recherche et installe l’extension csharp (la première sur la copie d’écran).

Prenez le temps de parcourir un peu la liste…

Nous sommes prêt!

Un projet .Net Core

On a créé un répertoire testWeb qui sera le répertoire de travail.

  • On lance le terminal intégré et on se rend dans ce répertoire
  • on lance la commande:
    dotnet new -t web

Un projet Web de démo est construit comme le montre l’EXPLORER:

2016-12-07_16-30-06

On reconnaît sans problème un projet Core comme décrit ici:

https://amethyste16.wordpress.com/2016/11/30/les-projets-asp-net-core/

Avant de le tester il faut descendre les dépendances avec la commande:

dotnet restore

2016-12-07_16-32-45

Par défaut le projet peut tourner dans la console Kestrel qui est le serveur Web de dev qui remplace Cassini. On lance alors;

dotnet run

2016-12-07_16-34-23

Qui nous apprend que le service écoute le port 5000. On démarre son navigateur favori et on lance:

http://localhost:5000

2016-12-07_16-37-02

 

Super, tout fonctionne!

On arrête le projet avec CTRL + C

Un projet Node

Commençons modeste. On construit un répertoire testNode dans lequel on créée le fichier demo.js.

On y copie le code suivante:


var msg = 'Hello World';
console.log(msg);

L’extension .js permet à VSC de savoir qu’il s’agit d’un fichier JavaScript donc d’activer IntelliSense:

demointel

 

Pour lancer on se place dans Terminal et:

node demo

2016-12-07_16-53-40

« Hello World » doit s’afficher.

 

On peut créer un projet un peu plus sophistiqué. Une façon de faire est d’installer Express:

npm install -g express-generator

Express est un Framework Node minimaliste qui peut servir de point de départ à une application plus ambitieuse.

Pour créer un projet on se place dans le répertoire racine et on lance:

express myApp

Et on obtient:

2016-12-07_17-25-23

 

On installe les dépendances:

npm install

Et on lance le serveur Web:

npm start

On peut savoir sur quel port il écoute en éditant le fichier /bin/www:

2016-12-07_17-28-02

C’est le port 3000. On a plus qu’à tester depuis un navigateur:

2016-12-07_17-29-56

Débogage

On reste dans le projet Node. On va déboguer un peu.

On ajoute un point d’arrêt exactement comme dans Visual Studio:

2016-12-07_16-56-21

Pour configurer le débogueur on clique sur l’icône: 2016-12-07_16-58-12

 

2016-12-07_16-59-20

 

On a besoin de créer un fichier launch.json qui contiendra tous les paramètres du débogage. On repère le petit icône en forme de roue dentée (voir l’image précédente), on sélectionne le Template node.js:

launch

Il s’affiche:

 

2016-12-07_17-03-58

 

Le fichier par défaut nous suffira.

La ligne « program » devra être modifiée, moi c’est:

« program »: « ${workspaceRoot}/testNode/demo.js« ,

Faites F5:

2016-12-07_17-10-04

L’exécution s’arrête au point d’arrêt et on remarque que la variable msg peut être consultée.

 

 

Bibliographie

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s