1. How to install development tools¶

Cette note décrit la configuration des outils de développement utilisés pour Aero-Webb.

1.1 Backend¶

1.1.1 Configurer IntelliJ¶

1.1.1.1 Java Development Kit sous WSL¶

Pour pouvoir démarrer un projet sous WSL, IntelliJ doit d'abord être configuré pour utiliser le JDK installé sur WSL.

Démarrer une instance d'IntelliJ, puis :

1. Sélectionner Projects,
2. Sélectionner New Project.

Dans la fenêtre qui s'affiche :

1. Dérouler la liste JDK,
2. Sélectionner Add JDK....

Démarrer une instance d'IntelliJ, puis :

1. Sélectionner la version du JDK installée dans la distribution WSL en naviguant dans l'arborescence des fichiers,
2. Cliquer sur le bouton OK pour valider.

Démarrer une instance d'IntelliJ, puis :

1. Vérifier que la version WSL du JDK est bien activée,
2. Cliquer sur le bouton Create pour créer le nouveau projet.

Dans le projet nouvellement créé :

1. Ouvrir le menu File,
2. Sélectionner le sous-menu Open et ouvrir un projet Java présent sur WSL dans une nouvelle fenêtre en cliquant sur le bouton New Window si IntelliJ vous le demande.

Dans le projet Java WSL qui vient de s'ouvrir :

• Sélectionner le menu File > Project Structure...

Dans la fenêtre Project Structure :

1. Sélectionner le SDK présent sur la distribution WSL,
2. Cliquer sur le bouton Apply pour appliquer les changements,
3. Cliquer sur le bouton OK pour confirmer et fermer la fenêtre.

1.1.1.2 Terminal WSL¶

Dans le menu File > Settings... > Tools > Terminal d'IntelliJ :

1. Renseigner le champ Shell path avec le chemin du terminal WSL wsl.exe --distribution Ubuntu,
2. Appliquer les changements cliquant sur la bouton Apply,
3. Fermez la fenêtre en cliquant sur la bouton OK.

1.2 Frontend¶

1.2.1 Configurer WebStorm¶

1.2.1.1 Terminal WSL¶

Dans le menu File > Settings... > Tools > Terminal de WebStorm :

1. Renseigner le champ Shell path avec le chemin du terminal WSL wsl.exe --distribution Ubuntu,
2. Appliquer les changements cliquant sur la bouton Apply,
3. Fermez la fenêtre en cliquant sur la bouton OK.

1.2.1.2 Node.js¶

Dans le menu File > Settings... > Languages & Frameworks > Node.js de WebStorm :

1. Renseigner le champ Node Interpreter avec le chemin de l'interpréteur Node.js se trouvant sur la Ubuntu WSL /usr/local/bin/node,
2. Cocher la coche Coding assistance for Node.js afin d'activer l'assistance au code pour les API principales de Node.js (cela signifie que vous obtiendrez une complétion intelligente du code, des informations sur les paramètres et une navigation vers le code source),
3. Renseigner le champ Pakage Manager avec le chemin de NPM se trouvant sur la Ubuntu WSL /usr/local/bin/npm,
4. Appliquer les changements cliquant sur la bouton Apply,
5. Fermez la fenêtre en cliquant sur la bouton OK.

1.2.1.3 Git¶

Dans le menu File > Settings... > Version Control > Git de WebStorm :

1. Renseigner le champ Protected branches avec le nom de la branche principale du projet (ajouter ; develop dans le champ),
2. Appliquer les changements cliquant sur la bouton Apply,
3. Fermez la fenêtre en cliquant sur la bouton OK.

Dans le menu File > Settings... > Version Control > Commit de WebStorm :

1. Cocher la coche Force non-empty commit comments,
2. Appliquer les changements cliquant sur la bouton Apply,
3. Fermez la fenêtre en cliquant sur la bouton OK.

1.2.1.4 Langue naturelle¶

Dans le menu File > Settings... > Editor > Natural Language de WebStorm :

1. Ajouter le Français dans la lise des langues,
2. Appliquer les changements cliquant sur la bouton Apply,
3. Fermez la fenêtre en cliquant sur la bouton OK.

1.2.1.5 Plugins additionnels¶

SonarLint

Si vous souhaitez utiliser le plugin SonarLint pour WebStorm (menu File > Settings... > Plugins), vous devrez préalablement installer Node.js sous Windows.

1.2.2 Configurer Visual Studio Code¶

1.2.2.1 Extensions nécessaires¶

Après avoir ouvert un terminal PowerShell sur VSCode (accessible depuis la barre de navigation), exécuter les commandes suivantes pour installer les extensions nécessaires :

code --install-extension Angular.ng-template
code --install-extension dbaeumer.vscode-eslint
code --install-extension EditorConfig.EditorConfig
code --install-extension esbenp.prettier-vscode

1.2.2.2 Configurer avec WSL¶

Si vous utilisez WSL, dans l'onglet*extensions*, rechercher et installer l'extension**Remote Development**de Microsoft.

Dans la barre de recherche (F1), trouver et exécuter la commande_WSL: Nouvelle fenetre WSL_, une nouvelle fenêtre Visual Studio Code doit s'ouvrir, fermez l'ancienne fenêtre, et ouvrez le dossier de travail.

Pour vérifier que la configuration est correcte, vous devez pouvoir exécuter un build de l'application depuis le terminal WSL sur VSCode :

cd ~/Workspaces/Aero-Webb/Frontend/frontend_aerowebb
npm run start