outils:vscode:generalites [WEBGE Wikis]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
 [[:outils:vscode:accueilvscode|{{ :iconemaison.jpg?nolink&25|Sommaire VSCode}}]]

===== IDE VSCode - Généralités =====
[Mise à jour le 14/1/24]

  * **Sources**
    * Site du logiciel <html><a href="https://code.visualstudio.com" target="_blank">lien</a></html>

  * **Lectures connexes**
    * Wiki [[python:accueilpython|Python et MicroPython]]

----

==== 1. Introduction ====
{{ :outils:vscode:vscode.jpg?nolink&60|}}
**Visual Studio Code** est un éditeur de code source **léger**, **mais puissant**, disponible pour Windows, macOS et Linux. Il est livré avec un support intégré pour JavaScript, TypeScript et Node.js et possède des extensions pour d'autres langages (tels qu' **Arduino**, **C++**, C#, Java, **Python**, PHP, Go etc.) et des runtimes (.NET et Unity) . 

=== 1.1 Caractéristiques ===
    * <html><a href="https://code.visualstudio.com/docs/editor/intellisense" target="_blank"><strong>IntelliSense</strong></a></html>((**IntelliSense** ou encore complétion ou **autocomplétion**, est une fonctionnalité informatique permettant à l'utilisateur de limiter la quantité d'informations qu'il saisit avec son clavier, en se voyant proposer un complément qui pourrait convenir à la chaîne de caractères qu'il a commencé à taper.)) pour CSS, HTML, JavaScript, JSON, Less, Sass, coloration syntaxique pour PHP.
    * **Coloration syntaxique** ((La **coloration syntaxique** est une fonctionnalité informatique proposée par certains éditeurs de texte, qui consiste à formater automatiquement chacun des éléments du texte affiché en utilisant une couleur et une fonte caractéristiques de son type.))
    * **Code action** : proposition de correction d’erreur.
    * <html><a href="https://code.visualstudio.com/docs/editor/emmet" target="_blank"><strong>Emmet abréviations</strong></a></html>((**Emmet** est un plug-in permettant de créer rapidement une structure HTML/CSS, existant sous forme d’extension pour tous les principaux éditeurs de texte et environnements de développement.)) en HTML, Razor, CSS, Less, Sass, XML et Jade avec la touche de tabulation [Tab].
    * **Débogage**((Le **débogage** est un processus de diagnostic, de localisation et d’élimination des erreurs des programmes informatiques; ce processus permet aussi la vérification (autrement dit le test) du programme en cours d’élaboration.)) dans Nodejs.

=== 1.2 L'interface utilisateur===
<callout type="primary" icon="true">Comme beaucoup d'autres éditeurs, VSCode présente un **explorateur** sur la gauche de son interface montrant tous les fichiers et dossiers auxquels vous avez accès, un **éditeur** sur la droite, montrant le contenu des fichiers que vous avez ouverts.</callout>
{{ :arduino:uivscode.jpg?nolink |}}

Cette interface est divisée en cinq zones :
  * **La barre d'activité** (Activity Bar) est située à l'extrême gauche. Cette barre vous permet de passer d'une vue à l'autre et vous fournit des indicateurs contextuels supplémentaires, tels que le nombre de changements sortants lorsque Git est activé.
  * **La barre latérale** (Side Bar) contient des vues différentes comme l'explorateur pour vous aider tout en travaillant sur votre projet.
  * **L’éditeur** (Editor Groups) – C’est la zone principale pour éditer vos fichiers. Vous pouvez ouvrir jusqu'à trois éditeurs côte à côte.
  * **Les panneaux** (Pannels) permettent d’afficher différents panneaux sous la zone de l'éditeur pour des informations de sortie ou de débogage, des erreurs et des avertissements, ou un terminal intégré. Le panneau peut également être déplacé vers la droite pour plus d'espace vertical.
  * **La barre d’état** (Status Bar) donne des informations sur le projet ouvert et les fichiers que vous modifiez.

<callout type="primary" icon="true">Chaque fois que vous chargez un projet dans VSCode, il apparaît dans le **même état** que lors de sa dernière fermeture. Le dossier, la disposition et les fichiers ouverts sont conservés.</callout>

==== 2. Installation de l'IDE ====
{{ :outils:vscode:vscode.jpg?nolink&60|}}
Se rendre sur la <html><a href="https://code.visualstudio.com/" target="_blank"><strong>page</strong></a></html> du site Visual Studio Code et **double-cliquer** sur le fichier téléchargé. Des **extensions** ajoutent des fonctionnalités au logiciel. 

==== 3. Installation des extensions ====
=== 3.1 Installations communes à tous les langages ===
**Installer** la liste des extensions ci-dessous en entrant leur nom dans la barre de recherche de {{:web:icoextensions.png?30|}}

^ Nom                                                        ^
| ** C/C++**                                                 |
| **French Language Pack for Visual Studio Code**            |
| **Hex Editor**                                             |
| **IntelliCode**                                            |
| **Peacock**                                                |
| **PrintCode**                                              |
| **Todo Highlight**                                         |
| **vsode-icons**                                            |
| **WSL**                                                    |

<callout type="warning" icon="true">**C, C++** nécessite des outils de compilation, debug. Installer **GCC avec MinGW** en suivant le <html><a href="https://code.visualstudio.com/docs/cpp/config-mingw" target="_blank">tutoriel</a></html>.</callout>.

=== 3.2 Extensions pour le Web ===
{{ :outils:vscode:siteweb.png?nolink&170|}}
**Installer** la liste des extensions ci-dessous en entrant leur nom dans la barre de recherche de {{:web:icoextensions.png?30|}}

^ Nom                      ^
| **Lorem Ipsum**          |
| **Markdown All in One**  |
| **Open in browser**      |


<callout type="warning" icon="true">Vous trouverez **[[outils:vscode:web|ici]]** un **tutoriel** pour préparer VSCode à un projet de site web</callout>.


=== 3.3 Extension pour les microcontrôleurs (langage C) ===
{{ :outils:vscode:platformio-logo.17fdc3bc.png?nolink&60|}}
  * **Ressource** : <html><a href="https://www.youtube.com/watch?v=_el8cUKFpJo" target= "_blank">Installer VS Code et PlatformIO</a></html> (pour aller plus loin).
La plateforme collaborative professionnelle **PlatformIO** est un environnement de développement intégré convivial et extensible avec un ensemble d'instruments de développement professionnel, offrant des fonctionnalités modernes et puissantes pour accélérer tout en simplifiant la création et la livraison de produits embarqués..
  * Un éditeur de code source multiplateforme léger mais puissant.
  * Complétions de code intelligentes basées sur des types de variables, des définitions de fonctions et des dépendances de bibliothèque.
  * Flux de travail multiprojets avec une navigation facile autour de la base de code du projet, plusieurs volets et prise en charge des thèmes.
  * Intégration transparente avec PlatformIO Home (UI) avec les gestionnaires de cartes et de bibliothèques.
  * Assistant de projet intuitif et un large éventail d'exemples de projets.
  * Terminal intégré avec PlatformIO Core (CLI) et puissant moniteur de port série.

**Installer** l'extension **PlatformIO** en entrant son nom dans la barre de recherche des {{:web:icoextensions.png?30|Extensions (Ctrl+Maj+X)}}

<callout type="warning" icon="true">Voir le [[outils:vscode:platformio|wiki]] pour l'installation de l'extension. Une **prise en main** de l'extension **PlatformIO** pour VSCode est proposée sur <html><a href="https://randomnerdtutorials.com/vs-code-platformio-ide-esp32-esp8266-arduino/" target="_blank">RANDOM NERD TUTORIALS</a></html>.</callout>


=== 3.4 Extensions pour le langage Python ===
  * **Source** : <html><a href="https://code.visualstudio.com/docs/python/python-tutorial" target="_blank">Getting Started with Python in VSCode</a></html>
  * **Lectures connexes**
    * Wiki [[python:accueilpython|Python et MicroPython]]

** 3.4.1 Présentation **

{{ :outils:vscode:python.png?nolink|}}
//"Travailler avec Python dans Visual Studio Code, en utilisant l'extension **Microsoft Python**, est **simple**, **amusant** et **productif**. Cette extension fait de VSCode un excellent IDE et s’applique à n’importe quel système d’exploitation avec une variété d’interpréteurs Python. Il exploite toute la puissance de VSCode pour fournir des fonctions de complétion automatique et IntelliSense, de lintérisation, de débogage et de test unitaire, ainsi que la possibilité de basculer facilement entre les environnements Python, y compris les environnements virtuels et //<html><a href="https://zestedesavoir.com/tutoriels/1448/installer-un-environnement-de-developpement-python-avec-conda/" target="_blank">conda</a></html>. <html><a href="https://code.visualstudio.com/docs/languages/python" target="_blank">Site VSCode</a></html>

** 3.4.2 Installations**

  * **Anaconda**
    * **Installer** une distribution **Anaconda** en suivant le document [[python:outils:anaconda|Outils - Installer et utiliser Anaconda avec VSCode]]

  * **Extensions Python pour VSCode**
    * **Installer** la liste des extensions ci-dessous en entrant leur nom dans la barre de recherche de {{:web:icoextensions.png?30|}}

^ Nom                 ^
| **Jupyter**         |
| **Pylance**         |
| **Python**          |



{{  :outils:vscode:microsoft.visualstudio.services.icons.png?nolink&60|}}
=== 3.5 Extension pour SQLite ===

  * **Installer SQLite** en entrant son nom dans la barre de recherche. 

=== 3.6 Extensions pour PHP ===
^  Nom  ^ 
| **PHP Debug**  |
| **PHP Intelephense**  |
==== 4. Réglages ====
Il est facile de configurer Visual Studio Code grâce à ses différents paramètres. Les différentes parties de l'éditeur et de l'interface utilisateur de VSCode comportent des options que vous pouvez modifier.

VSCode propose deux paramétrages : \\
  * **Paramètres utilisateur** (User Settings) – Les paramètres s'appliquent à toutes les instances de VSCode.
  * **Paramètres de l'espace de travail** (Workspace Settings) – Les paramètres sont stockés dans votre espace de travail et ne s'appliquent que lorsque l'espace de travail est ouvert.

<callout type="tip" icon="true">Les paramètres de l'espace de travail remplacent les paramètres utilisateur.</callout>

=== 4.1 Accéder aux paramètres ===
On accède aux paramètres de réglage de l'éditeur à partir de **Fichier -> Préférences -> Paramètres**  ou {{:arduino:roue.png?nolink&20|}} -> **Paramètres** ou (**Ctrl+,**) 

=== 4.2 Vider l'IDE au démarrage ===
  * **Pour avoir un espace de travail vide au démarrage** 
    * //Barre de recherche des paramètres// : entrer **window** puis sélectionner **none** pour **Window:Restore Windows**

=== 4.3 Complétion par tabulation ===
  * //Barre de recherche des paramètres// : entrer **editor.tabCompletion** puis **on**.
=== 4.4 L'extension C/C++ ===
  * **Intellisense** 
    * //Barre de recherche des paramètres des paramètres// : entrer Intelli Sense Engine -> **C_Cpp: Intelli Sense Engine** : 
      * **Default** fournit des résultats contextuels (à choisir si on ne connaît pas les noms des attributs, méthodes de la classe){{ :outils:completion1.png?nolink |}}
      * **Tag Parser** fournit des résultats "flous" qui ne sont pas sensibles au contexte (à choisir si on connaît le nom des attributs, méthodes de la classe).{{ :outils:completion2.png?nolink |}}
      * **Disabled** désactive les fonctionnalités du service de langage C / C ++.{{ :outils:completion3.png?nolink |}}

=== 4.5 L'extension PHP Intelephense ===
  * **Intellisense** 
    * //Barre de recherche des paramètres//
      * entrer **suggest basic** et décocher PHP: Suggest:Basic
      * entrer **format** et cocher **Editor: Format on save** après avoir sélectionné **Editeur de texte**

{{ :outils:vscode:xdebug_logo.svg.png?nolink|}}
=== 4.6 L'extension PHP Debug ===
L'utilisation de cette extension nécessite l'installation de xdebug. Voir <html><a href="https://nouvelle-techno.fr/articles/live-coding-installation-configuration-et-utilisation-de-xdebug-dans-visual-studio-code" target="_blank">Live coding</a></html> et l'exemple de modification du fichier <html><a href="https://webge.fr/doc/wikis/pdf/Modifs_Configuration_Apache24_PHP8.pdf" title="Faite le 13/6/2023">php.ini</a></html>.

----

==== 5. Utilisation de l'éditeur ====
<callout type="warning" icon="true">Quel que soit le langage utilisé, la création d'un projet suit les étapes suivantes : \\
1. créer un répertoire pour le projet, \\
2.placer ce répertoire dans VSCode, \\
3. ajouter un ou plusieurs fichiers, \\
4. ajouter un ou plusieurs sous-répertoires.</callout>

=== 5.1 Créer un dossier pour le projet ===
Créer un dossier destiné à recevoir le projet en dehors de VSCode (par exemple sur le bureau ou sur un serveur). Intégrer ce dossier à VSCode à partir de **Fichier -> Ouvrir le dossier** ou par un **glisser-déposer**. \\ 
//Exemple// : Projet HelloWorld
{{ :outils:vscode:utilisation_editeur1.png?nolink |}}

=== 5.2 Ajouter un fichier dans le projet ===
{{ :outils:vscode:utilisation_editeur4.png?nolink|}}
Placer la souris sur le nom du projet. Les icônes {{:outils:vscode:utilisation_editeur2.png?nolink|}} apparaissent  . Cliquez sur {{:outils:vscode:utilisation_editeur3.png?nolink|}}  pour créer un fichier. \\
//Exemple// : fichier hello.py

=== 5.3 Ajouter un répertoire dans le projet===
{{ :outils:vscode:utilisation_editeur6.png?nolink|}}
Placer la souris sur le nom du projet. Les icônes {{:outils:vscode:utilisation_editeur2.png?nolink|}} apparaissent  . Cliquez sur {{:outils:vscode:utilisation_editeur5.png?nolink|}}  pour créer un dossier. \\
//Exemple// : dossier lib

=== 5.4 Quelques raccourcis  ===
  * Sélection du mot sous le curseur ou de sa prochaine occurrence (**Ctrl+D**)
  * Curseur multiple (**Alt+Click**)
  * Remplacement multiple (**Ctrl+F2**)
  * Complétion de code (**Ctrl+ESPACE**) ou "." pour la sélection, (ENTER) pour la validation
  * Go to définition (**F12**) si supporté par le langage
  * Go to symbol (**Ctrl+shift+O**)
  * Survol (Pour les langages qui le supportent comme CSS, des informations complémentaires sont délivrées)
  * Affichage des erreurs et des avertissements (**Ctrl+Shift+M**)
  * <html><a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets" target="_blank">Snippets</a></html> utilisateur (à créer : Fichier -> préférences) et <html><a href="https://docs.emmet.io/cheat-sheet/" target="_blank"> Emmet intégrés</a></html> 

=== 5.5 La complétion de code (IntelliSense)===
  * **5.5.1 Généralités** \\
IntelliSense est un terme général pour une variété de fonctionnalités d'édition de code, y compris : la complétion du code, les informations sur les paramètres, les brèves et les listes de membres. Les fonctionnalités d'IntelliSense sont parfois appelées "complétion de code", "aide au contenu" et "astuce de code". \\

<callout type="tip" icon="true">Dans VSCode, IntelliSense est fourni pour JavaScript, TypeScript, JSON, HTML, CSS, Less et Sass. VSCode prend en charge les complétions basées sur des mots pour n'importe quel langage de programmation, mais peut également être enrichi en installant une extension de langue.</callout>

  * **Types de complétion**
    * **Source** : <html><a href="https://code.visualstudio.com/docs/editor/intellisense" target="_blank">IntelliSence dans VSCode</a></html>

^ Symbole                                    ^ Description                         ^ Symbole                                    ^ Description            ^
| {{:outils:vscode:methode.png?25&nolink}}   | Méthodes, fonctions, constructeurs  | {{:outils:vscode:mtcle.png?25&nolink}}     | Mots-clés              |
| {{:outils:vscode:variable.png?25&nolink}}  | Variables et champs                 | {{:outils:vscode:attribut.png?25&nolink}}  | Propriétés, attributs  |
| {{:outils:vscode:classe.png?25&nolink}}    | Classes                             | {{:outils:vscode:interface.png?25&nolink}} | Interfaces             |
| {{:outils:vscode:valeur.png?25&nolink}}    | Valeurs, énumérations               | {{:outils:vscode:reference.png?25&nolink}} | Références             |

=== 5.6 Quelques raccourcis clavier===
 * **Source** : <html><a href="https://code.visualstudio.com/docs/getstarted/keybindings#_basic-editing" target="_blank">Édition de base</a></html>

^ Raccourci                    ^ Description  ^
| **F1** ou **ctrl-shift-P**   | Editeur de commande  |
| **F2**                       | Renommer  |   	
| **Ctrt+F2**                  | Renommer multi-curseurs | 
| **Shift+F12**                | Recherche de référence  |   
| **Alt+F12**                  | Définition  | 	
| **Ctrl+Tab**                 | Sélection d’un fichier pour l’afficher dans la fenêtre active  |
| **Ctrl+Shift+O**             | Définition des symboles \\ __Remarque__ : faire suivre **@** de : pour les grouper par catégories |
| **Ctrl+G**                   | Atteindre une ligne dans un fichier  |
| **Ctrl+Shift+F**             | Recherche d’un texte dans tous les fichiers du projet  |
| **Ctrl+Shift+M**             | Voir le récapitulatif des erreurs et avertissements  |
| **Ctrl+Click**	       | Atteindre une définition   |