Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
outils:vscode:generalites [2023/09/04 17:58] – [IDE VSCode - Généralités] phil | outils:vscode:generalites [2025/01/09 18:51] (Version actuelle) – [3.4 Extensions pour le langage Python] phil |
---|
| |
===== IDE VSCode - Généralités ===== | ===== IDE VSCode - Généralités ===== |
[Mise à jour le 13/6/23] | [Mise à jour le 8/1/2025] |
| |
* **Sources** | * **Sources** |
* Site du logiciel <html><a href="https://code.visualstudio.com" target="_blank">lien</a></html> | * Site du logiciel <html><a href="https://code.visualstudio.com" target="_blank">lien</a></html> |
* Vidéo YouTube<html><a href="https://www.youtube.com/watch?v=o2aD2kwinJM" target= "_blank"> Développer sous Visual Studio Code. Le meilleur IDE pour Arduino (v2)</a></html> | |
| |
* **Lectures connexes** | * **Lectures connexes** |
{{ :outils:vscode:vscode.jpg?nolink&60|}} | {{ :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) . | **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 === | === 1.1 Caractéristiques === |
* <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]. | * <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. | * **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=== | === 1.2 L'interface utilisateur=== |
| |
<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> | <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 ==== | ==== 2. Installation de l'IDE ==== |
{{ :outils:vscode:vscode.jpg?nolink&60|}} | {{ :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. | 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. Installation des extensions ==== |
| **vsode-icons** | | | **vsode-icons** | |
| **WSL** | | | **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 === | === 3.2 Extensions pour le Web === |
{{ :outils:vscode:siteweb.png?nolink&170|}} | {{ :outils:vscode:siteweb.png?nolink&170|}} |
=== 3.3 Extension pour les microcontrôleurs (langage C) === | === 3.3 Extension pour les microcontrôleurs (langage C) === |
{{ :outils:vscode:platformio-logo.17fdc3bc.png?nolink&60|}} | {{ :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.. | 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. | * Un éditeur de code source multiplateforme léger mais puissant. |
**Installer** l'extension **PlatformIO** en entrant son nom dans la barre de recherche des {{:web:icoextensions.png?30|Extensions (Ctrl+Maj+X)}} | **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">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> | <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 === | === 3.4 Extensions pour le langage Python === |
| |
| |
| ** 3.4.3 Gérer plusieurs versions de Python sous Windows avec pyenv-win** |
| - Installer pyenv en suivant les indication de la page [[:python:outils:pyenv|Gérer plusieurs versions de Python sous Windows avec pyenv-win]] |
| - Si VSCode s'exécute dans un autre compte que celui de l'administrateur : \\ <callout type="tip" color="red" title="Variables d'environnement" icon="true">Ajouter : |
| * PYENV = c:\chemin vers\.pyenv\pyenv-win |
| * PYENV_HOME = c:\chemin vers\.pyenv\pyenv-win |
| * PYENV_ROOT = c:\chemin vers\.pyenv\pyenv-win |
| dans les variables d'environnement du compte ou système. |
| </callout> |
| |
| \\ |
| |
{{ :outils:vscode:microsoft.visualstudio.services.icons.png?nolink&60|}} | {{ :outils:vscode:microsoft.visualstudio.services.icons.png?nolink&60|}} |
| |
* **Installer SQLite** en entrant son nom dans la barre de recherche. | * **Installer SQLite** en entrant son nom dans la barre de recherche. |
| |
| \\ |
| |
| |
=== 3.6 Extensions pour PHP === | === 3.6 Extensions pour PHP === |
| **PHP Debug** | | | **PHP Debug** | |
| **PHP Intelephense** | | | **PHP Intelephense** | |
| |
| \\ |
| |
| |
==== 4. Réglages ==== | ==== 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. | 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. |