Travailler avec WebStorm

6.1 Comprendre la structure de l'IDE

Voyons maintenant ce que vous avez ici.

1. L'arborescence des dossiers et fichiers de votre projet :

Ici s'affiche le contenu du dossier de notre projet — web-storm-10.

J'ai spécialement créé un fichier pour que ce soit plus clair comment tout est organisé ici. Dans la prochaine conférence, vous ferez aussi tout cela.

2. Le fichier actuellement ouvert :

C'est simplement le contenu du fichier index.html, la syntaxe du code est mise en évidence.

3. En haut, vous voyez le menu principal :

Boutons utiles en haut à droite :

• « Triangle vert » — bouton pour lancer le projet
• « Insecte » — bouton pour démarrer le mode débogage
• « Loupe » — recherche dans le projet
• « Engrenage » — paramètres

4. À gauche, vous voyez le menu latéral :

Il y a plusieurs boutons utiles ici. Nous serons particulièrement intéressés par le bouton Terminal.

5. Barre d'état :

À gauche, la barre d'état affiche le chemin du fichier actuellement ouvert. À droite, son encodage : CRLF, UTF-8. Bientôt, tu comprendras tout cela parfaitement.

6.2 Analyse du projet

1. Fichiers HTML.

Ces fichiers ont l'extension .html, et WebStorm les marque avec une icône verte de deux flèches. Il n'y a qu'un seul de ces fichiers ici — index.html

Ces fichiers ont l'extension .js, et WebStorm les marque avec une icône jaune. Il n'y a pas de tels fichiers sur la capture d'écran pour le moment.

2. Fichiers CSS pour les styles.

Ces fichiers ont l'extension .css, et WebStorm les marque avec une icône bleue. Il n'y a pas de tels fichiers sur la capture d'écran pour le moment.

3. Fichiers médias statiques. Ce sont des fichiers qui contiennent des données, mais pas de code. Cela peut être des fichiers texte, des images, des fichiers médias, etc. Il n'y en a pas dans notre projet actuellement.

4. Bibliothèques externes (External libraries). Il n'y en a pas dans notre projet actuellement, mais lorsque tu les télécharges, WebStorm les affichera ici.

6.3 Travailler avec le terminal

Dans WebStorm, tu peux travailler directement avec la ligne de commande de l'OS. Sous Linux et MacOS, la ligne de commande est appelée Terminal, c'est pourquoi dans WebStorm elle est aussi appelée Terminal. Cependant, ce n'est pas une particularité de WebStorm, mais une dénomination courante parmi les développeurs.

Pour ouvrir le Terminal, tu dois cliquer sur le bouton terminal dans le menu latéral :

Tu devrais voir une fenêtre comme ça :

Dans cette fenêtre, tu peux taper des commandes de ton système d'exploitation. Nous nous intéresserons à l'une d'entre elles.

Voyons quelle est la version actuelle de Windows. Pour ce faire, tu dois taper :

    
      ver
    
  

Voilà ce que j'ai obtenu :

Si tu rencontres une erreur, tape d'abord la commande «cmd», puis la commande «ver».

6.4 Qu'est-ce que le plugin CodeGym et pourquoi en as-tu besoin?

C'est une application, un module logiciel spécial qui s'intègre dans l'environnement de développement Intellij IDEA ou WebStorm et permet de travailler avec les exercices du cours CodeGym. Par exemple, écrire des solutions de code, les soumettre pour vérification, comparer ta solution avec la solution "par défaut" et bien plus encore. Le progrès dans la solution des exercices est synchronisé avec ton compte CodeGym, donc il apparaîtra de la même manière sur le site et dans l'environnement de développement.

Tu peux télécharger le plugin CodeGym depuis le marketplace Jetbrains, directement dans ton environnement de développement. Nous allons maintenant montrer les étapes avec WebStorm, mais les mêmes étapes s'appliquent aussi à Intellij IDEA.

1. Va dans la section "Préférences", Windows/Linux File - Settings, MacOS WebStorm - Preferences. S'il n'y a pas de section de préférences, ouvre n'importe quel projet ou crée-en un nouveau.

2. Dans la fenêtre qui s'affiche, dans le menu latéral, choisis la section Plugins et ouvre l'onglet Marketplace. Tape codegym dans la barre de recherche

3. Sélectionne le plugin et clique sur le bouton Install.
4. Redémarre (Restart IDE) WebStorm pour commencer à travailler avec le plugin.
5. Tu verras une interface légèrement modifiée et un bouton Se connecter sur la barre horizontale supérieure.

En cliquant dessus, une fenêtre s'ouvrira pour te connecter à ton compte, où tu devras entrer ta clé secrète :

On te rappelle que tu peux trouver ta clé secrète dans la section “Préférences” → “Sécurité et connexion”.

Après la connexion, le chargement du projet et de Codegym SDK commencera (ne pas changer pour une autre version).

6. Pour ouvrir un nouvel exercice, clique sur Tasks dans le panneau vertical de gauche, puis sur la carte de l'exercice dans le panneau latéral gauche, et dans la fenêtre contextuelle, clique sur Ouvrir :

7. Une fenêtre s'est ouverte avec deux onglets. L'un — avec la condition, l'autre — pour entrer du code.
8. Maintenant écris la solution de l'exercice et clique sur le bouton Vérifier

Le plugin est installé ! Maintenant tu peux résoudre des exercices.

Synchronisation des exercices site — plugin

La liste des exercices et leur statut est mise à jour automatiquement, toutes les cinq minutes ou après l'envoi de n'importe quel exercice pour vérification (serveur codegym).

Ainsi, si tu as résolu un exercice sur le site, dans le plugin il apparaîtra aussi dans la liste des exercices résolus. Si tu dois mettre à jour les informations sur les statuts des exercices tout de suite, clique sur ton avatar (en haut à droite), et dans le menu déroulant, choisis l'option Synchroniser les exercices :

Mode débutant dans le plugin

C'est une version simplifiée pour les utilisateurs qui n'ont pas (ou peu) d'expérience avec WebStorm et d'autres environnements de développement. Certaines fonctions de WebStorm sont masquées. Pour désactiver ce mode, clique sur ton avatar (en haut à droite), et dans le menu déroulant, choisis Préférences :

Comment masquer la barre de navigation du plugin en mode PRO

Clique sur l'option Préférences (⚙️) et décoche la case "Afficher la barre de navigation du plugin" :