Édition de base

Visual Studio Code est un éditeur avant tout, et comprend les fonctionnalités dont vous avez besoin pour une édition de code source très productive. Cette rubrique vous présente les bases de l’éditeur et vous aide à avancer dans votre code.

Courts clavier

Pouvoir garder les mains sur le clavier lors de l’écriture du code est crucial pour une productivité élevée. VS Code possède un riche ensemble de raccourcis clavier par défaut tout en vous permettant de les personnaliser.

• Référence des raccourcis clavier – Apprenez les raccourcis clavier les plus utilisés et les plus populaires en téléchargeant la fiche de référence.
• Installer une extension Keymap – Utilisez les raccourcis clavier de votre ancien éditeur (comme Sublime Text, Atom et Vim) dans VS Code en installant une extension Keymap.
• Personnaliser les raccourcis clavier – Modifiez les raccourcis clavier par défaut pour les adapter à votre style.

Sélections multiples (multi-curseur)

VS Code prend en charge plusieurs curseurs pour des éditions rapides et simultanées. Vous pouvez ajouter des curseurs secondaires (rendus plus fins) avec Alt+Click. Chaque curseur fonctionne indépendamment en fonction du contexte dans lequel il se trouve. Une façon courante d’ajouter plus de curseurs est avec ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) ou ⌥⌘ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) qui insèrent des curseurs en dessous ou au-dessus.

Note : Le pilote de votre carte graphique (par exemple NVIDIA) peut écraser ces raccourcis par défaut.

⌘D (Windows, Linux Ctrl+D) sélectionne le mot au curseur, ou la prochaine occurrence de la sélection actuelle.

Tip : Vous pouvez également ajouter plus de curseurs avec ⇧⌘L (Windows, Linux Ctrl+Shift+L), qui ajoutera une sélection à chaque occurrence du texte sélectionné actuel.

Modificateur de curseurs multiples

Si vous souhaitez changer la touche modificatrice pour appliquer des curseurs multiples à Cmd+Clic sur macOS et Ctrl+Clic sur Windows et Linux, vous pouvez le faire avec le paramètre editor.multiCursorModifier. Cela permet aux utilisateurs venant d’autres éditeurs tels que Sublime Text ou Atom de continuer à utiliser le modificateur de clavier qui leur est familier.

Le paramètre peut être défini comme suit :

• ctrlCmd – Correspond à Ctrl sur Windows et Cmd sur macOS.
• alt – Le paramètre par défaut existant Alt.

Il existe également un élément de menu Utiliser Ctrl+Clic pour le multi-curseur dans le menu Sélection pour basculer rapidement ce paramètre.

Les gestes Aller à la définition et Ouvrir le lien respecteront également ce paramètre et s’adapteront de manière à ne pas entrer en conflit. Par exemple, lorsque le paramètre est ctrlCmd, des curseurs multiples peuvent être ajoutés avec Ctrl/Cmd+Clic, et l’ouverture de liens ou le passage à la définition peuvent être invoqués avec Alt+Clic.

Réduire/étendre la sélection

Réduire ou étendre rapidement la sélection actuelle. Déclenchez-le avec ⌃⇧⌘← (Windows, Linux Shift+Alt+Gauche) et ⌃⇧⌘→ (Windows, Linux Shift+Alt+Droit).

Voici un exemple d’expansion de la sélection avec ⌃⇧⌘→ (Windows, Linux Shift+Alt+Droit):

Sélection de colonne (boîte)

Placez le curseur dans un coin, puis maintenez Shift+Alt tout en faisant glisser vers le coin opposé :

Note : Cela se transforme en Shift+Ctrl/Cmd lorsque vous utilisez Ctrl/Cmd comme modificateur multi-curseur.

Il existe également des liaisons de touches par défaut pour la sélection de colonnes sur macOS et Windows, mais pas sur Linux.

Key	Command	Command ID
⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Down, Linux )	Sélection de colonne vers le bas	cursorColumnSelectDown
⇧⌥⌘ (Windows Ctrl+Shift+Alt+Up, Linux )	Sélection de colonne vers le haut	cursorColumnSelectUp
⇧⌥⌘← (Windows Ctrl+Shift+Alt+Gauche, Linux )	Sélection de colonne à gauche	cursorColumnSelectLeft
⇧⌥⌘→ (Windows Ctrl+Shift+Alt+Droit, Linux )	Sélection de colonne à droite	cursorColumnSelectRight
⇧⌥⌘PageDown (Windows Ctrl+Shift+Alt+PageDown, Linux )	Sélection de colonne page en bas	cursorColumnSelectPageDown
⇧⌥⌘PageUp (Windows Ctrl+Shift+Alt+PageUp, Linux )	Column Select Page Up	cursorColumnSelectPageUp

Vous pouvez modifier vos keybindings.json pour les lier à quelque chose de plus familier si vous le souhaitez.

Mode de sélection de colonnes

Le paramètre utilisateur Éditeur : Sélection de colonnes contrôle cette fonctionnalité. Une fois que ce mode est entré, comme indiqué dans la barre d’état, les gestes de la souris et les touches fléchées créeront une sélection de colonne par défaut. Ce basculement global est également accessible via l’élément de menu Sélection >Mode de sélection de colonne. En outre, on peut également désactiver le mode de sélection de colonne à partir de la barre d’état.

Enregistrement / Enregistrement automatique

Par défaut, VS Code nécessite une action explicite pour enregistrer vos modifications sur le disque, ⌘S (Windows, Linux Ctrl+S).

Cependant, il est facile d’activer Auto Save, qui enregistrera vos modifications après un délai configuré ou lorsque le focus quitte l’éditeur. Avec cette option activée, il n’est pas nécessaire d’enregistrer explicitement le fichier. La façon la plus simple d’activer Auto Save est avec la bascule Fichier > Enregistrement automatique qui active et désactive l’enregistrement après un délai.

Pour plus de contrôle sur Auto Save, ouvrez les paramètres de l’utilisateur ou de l’espace de travail et trouvez les paramètres associés :

• files.autoSave : Peut avoir les valeurs suivantes :
  • off – pour désactiver l’enregistrement automatique.
  • afterDelay – pour enregistrer les fichiers après un délai configuré (par défaut 1000 ms).
  • onFocusChange – pour enregistrer les fichiers lorsque le focus sort de l’éditeur du fichier sale.
  • onWindowChange – pour enregistrer les fichiers lorsque le focus sort de la fenêtre VS Code.
• files.autoSaveDelay : Configure le délai en millisecondes lorsque files.autoSave est configuré en afterDelay. La valeur par défaut est de 1000 ms.

Hot Exit

VS Code se souviendra des modifications non sauvegardées des fichiers lorsque vous quittez par défaut. La sortie à chaud est déclenchée lorsque l’application est fermée via File > Exit (Code > Quit sur macOS) ou lorsque la dernière fenêtre est fermée.

Vous pouvez configurer la sortie à chaud en définissant files.hotExit sur les valeurs suivantes :

• "off" : Désactiver la sortie à chaud.
• "onExit" : La sortie à chaud sera déclenchée lorsque l’application est fermée, c’est-à-dire lorsque la dernière fenêtre est fermée sur Windows/Linux ou lorsque la commande workbench.action.quit est déclenchée (à partir de la palette de commande, du raccourci clavier ou du menu). Toutes les fenêtres sans dossiers ouverts seront restaurées au prochain lancement.
• "onExitAndWindowClose" : La sortie à chaud sera déclenchée lorsque l’application est fermée, c’est-à-dire lorsque la dernière fenêtre est fermée sur Windows/Linux ou lorsque la commande workbench.action.quit est déclenchée (depuis la Palette de commande, le raccourci clavier ou le menu), et également pour toute fenêtre avec un dossier ouvert, qu’il s’agisse ou non de la dernière fenêtre. Toutes les fenêtres sans dossier ouvert seront restaurées au prochain lancement. Pour restaurer les fenêtres de dossiers telles qu’elles étaient avant l’arrêt, réglez window.restoreWindows sur all.

Si quelque chose se passe mal avec la sortie à chaud, toutes les sauvegardes sont stockées dans les dossiers suivants pour les emplacements d’installation standard :

• Windows %APPDATA%\Code\Backups
• macOS $HOME/Library/Application Support/Code/Backups
• Linux $HOME/.config/Code/Backups

Trouver et remplacer

VS Code vous permet de trouver rapidement du texte et de le remplacer dans le fichier actuellement ouvert. Appuyez sur ⌘F (Windows, Linux Ctrl+F) pour ouvrir le widget de recherche dans l’éditeur, les résultats de la recherche seront mis en évidence dans l’éditeur, la règle de vue d’ensemble et la minimap.

S’il y a plus d’un résultat correspondant dans le fichier actuellement ouvert, vous pouvez appuyer sur Entrée et ⇧Enter (Windows, Linux Shift+Enter) pour naviguer vers le résultat suivant ou précédent lorsque la boîte de saisie de recherche est focalisée.

Saisir la chaîne de recherche à partir de la sélection

Lorsque le widget de recherche est ouvert, il remplit automatiquement le texte sélectionné dans l’éditeur dans la boîte de saisie de recherche. Si la sélection est vide, le mot sous le curseur sera inséré dans la boîte de saisie à la place.

Cette fonction peut être désactivée en réglant editor.find.seedSearchStringFromSelection à false.

Find In Selection

Par défaut, les opérations de recherche sont exécutées sur le fichier entier dans l’éditeur. Elles peuvent également être exécutées sur du texte sélectionné. Vous pouvez activer cette fonctionnalité en cliquant sur l’icône hamburger du widget de recherche.

Si vous voulez que ce soit le comportement par défaut du widget de recherche, vous pouvez définir editor.find.autoFindInSelection à always, ou à multiline, si vous voulez qu’il soit exécuté sur le texte sélectionné uniquement lorsque plusieurs lignes de contenu sont sélectionnées.

Options avancées de recherche et de remplacement

En plus de la recherche et du remplacement avec du texte brut, le widget de recherche a également trois options de recherche avancées :

• Match Case
• Match Whole Word
• Regular Expression

La boîte de saisie de remplacement supporte la préservation de la casse, vous pouvez l’activer en cliquant sur le bouton Preserve Case (AB).

Support multiligne et redimensionnement du widget de recherche

Vous pouvez rechercher du texte sur plusieurs lignes en collant le texte dans la boîte de saisie Rechercher et la boîte de saisie Remplacer. Appuyer sur Ctrl+Enter insère une nouvelle ligne dans la boîte de saisie.

Lors de la recherche d’un texte long, la taille par défaut du Widget de recherche peut être trop petite. Vous pouvez faire glisser le volet de gauche pour agrandir le Widget de recherche ou double-cliquer sur le volet de gauche pour le maximiser ou le réduire à sa taille par défaut.

Recherche dans les fichiers

VS Code vous permet de rechercher rapidement dans tous les fichiers du dossier actuellement ouvert. Appuyez sur ⇧⌘F (Windows, Linux Ctrl+Shift+F) et saisissez votre terme de recherche. Les résultats de la recherche sont regroupés en fichiers contenant le terme recherché, avec une indication des occurrences dans chaque fichier et de son emplacement. Développez un fichier pour voir un aperçu de toutes les occurrences dans ce fichier. Ensuite, faites un simple clic sur l’un des hits pour le visualiser dans l’éditeur.

Tip : Nous supportons la recherche par expression régulière dans la boîte de recherche, aussi.

Vous pouvez configurer des options de recherche avancées en cliquant sur l’ellipse (Toggle Search Details) sous la boîte de recherche à droite (ou appuyez sur ⇧⌘J (Windows, Linux Ctrl+Shift+J)). Cela montrera des champs supplémentaires pour configurer la recherche.

Options de recherche avancée

Dans les deux boîtes de saisie sous la boîte de recherche, vous pouvez saisir des motifs à inclure ou à exclure de la recherche. Si vous entrez example, cela correspondra à chaque dossier et fichier nommé example dans l’espace de travail. Si vous entrez ./example, cela correspondra au dossier example/ au niveau supérieur de votre espace de travail. Utilisez , pour séparer plusieurs motifs. Les chemins d’accès doivent utiliser des barres obliques. Vous pouvez également utiliser la syntaxe glob :

• * pour correspondre à un ou plusieurs caractères dans un segment de chemin
• ? pour correspondre sur un caractère dans un segment de chemin
• ** pour correspondre à un nombre quelconque de segments de chemin, y compris aucun
• {} pour regrouper des conditions (par exemple {**/*.html,**/*.txt} correspond à tous les fichiers HTML et texte)
• pour déclarer une plage de caractères à correspondre (example. pour correspondre sur example.0, example.1, ….)

VS Code exclut par défaut certains dossiers pour réduire le nombre de résultats de recherche qui ne vous intéressent pas (par exemple : node_modules). Ouvrez les paramètres pour modifier ces règles sous la section files.exclude et search.exclude.

Notez que les motifs globaux dans la vue de recherche fonctionnent différemment que dans les paramètres tels que files.exclude et search.exclude. Dans les paramètres, vous devez utiliser **/example pour correspondre à un dossier nommé example dans le sous-dossier folder1/example de votre espace de travail. Dans la vue de recherche, le préfixe ** est supposé.

Notez également le bouton à bascule Utiliser les paramètres d’exclusion et Ignorer les fichiers dans la zone des fichiers à exclure. Le basculeur détermine s’il faut exclure les fichiers qui sont ignorés par vos fichiers .gitignore et/ou mis en correspondance par vos paramètres files.exclude et search.exclude.

Tip : Depuis l’Explorateur, vous pouvez cliquer avec le bouton droit de la souris sur un dossier et sélectionner Rechercher dans le dossier pour effectuer une recherche à l’intérieur d’un dossier uniquement.

Recherche et remplacement

Vous pouvez également rechercher et remplacer entre les fichiers. Développez le widget Rechercher pour afficher la zone de texte Remplacer.

Lorsque vous tapez du texte dans la zone de texte Remplacer, vous verrez un affichage diff des changements en attente. Vous pouvez remplacer à travers tous les fichiers à partir de la zone de texte Remplacer, remplacer tout dans un seul fichier ou remplacer un seul changement.

Tip : Vous pouvez rapidement réutiliser un terme de recherche précédent en utilisant ↓ (Windows, Linux Down) et (Windows, Linux Up) pour naviguer dans votre historique de termes de recherche.

IntelliSense

Nous offrirons toujours la complétion de mots, mais pour les langages riches, tels que JavaScript, JSON, HTML, CSS, SCSS, Less, C# et TypeScript, nous offrons une véritable expérience IntelliSense. Si un service linguistique connaît des compléments possibles, les suggestions IntelliSense s’affichent au fur et à mesure de la saisie. Vous pouvez toujours les déclencher manuellement avec ⌃Space (Windows, Linux Ctrl+Space). Par défaut, Tab ou Enter sont les déclencheurs clavier acceptés, mais vous pouvez également personnaliser ces liaisons de touches.

Tip : Le filtrage des suggestions prend en charge CamelCase, vous pouvez donc taper les lettres qui sont en majuscules dans un nom de méthode pour limiter les suggestions. Par exemple, « cra » fera rapidement apparaître « createApplication ».

Tip : Les suggestions IntelliSense peuvent être configurées via les paramètres editor.quickSuggestions et editor.suggestOnTriggerCharacters.

Les développeurs JavaScript et TypeScript peuvent profiter du dépôt de fichiers de déclaration de type (typings) npmjs pour obtenir IntelliSense pour les bibliothèques JavaScript courantes (Node.js, React, Angular). Vous pouvez trouver une bonne explication sur l’utilisation des fichiers de déclaration de type dans le sujet du langage JavaScript et le tutoriel Node.js.

En savoir plus dans le document IntelliSense.

Formatage

VS Code a un grand support pour le formatage du code source. L’éditeur dispose de deux actions de formatage explicites :

• Formater le document (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) – Formater l’ensemble du fichier actif.
• Formater la sélection (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) – Formater le texte sélectionné.

Vous pouvez les invoquer à partir de la palette de commande (⇧⌘P (Windows, Linux Ctrl+Shift+P)) ou du menu contextuel de l’éditeur.

VS Code dispose de formateurs par défaut pour JavaScript, TypeScript, JSON et HTML. Chaque langue possède des options de formatage spécifiques (par exemple, html.format.indentInnerHtml) que vous pouvez régler selon vos préférences dans vos paramètres d’utilisateur ou d’espace de travail. Vous pouvez également désactiver le formateur de langue par défaut si vous avez installé une autre extension qui fournit un formatage pour la même langue.

"html.format.enable": false

En plus d’invoquer manuellement le formatage du code, vous pouvez également déclencher le formatage en fonction des gestes de l’utilisateur tels que la frappe, l’enregistrement ou le collage. Ces comportements sont désactivés par défaut, mais vous pouvez les activer via les paramètres suivants :

• editor.formatOnType – Formater la ligne après la frappe.
• editor.formatOnSave – Formater un fichier lors de l’enregistrement.
• editor.formatOnPaste – Formater le contenu collé.

Note : Tous les formateurs ne supportent pas le formatage sur le collage car pour le faire, ils doivent supporter le formatage d’une sélection ou d’une plage de texte.

En plus des formateurs par défaut, vous pouvez trouver des extensions sur le Marketplace pour supporter d’autres langues ou outils de formatage. Il existe une catégorie Formatters afin que vous puissiez facilement rechercher et trouver des extensions de formatage. Dans la boîte de recherche de la vue Extensions, tapez ‘formatters’ ou ‘category:formatters’ pour voir une liste filtrée d’extensions dans VS Code.

Pliage

Vous pouvez plier des régions de code source en utilisant les icônes de pliage sur la gouttière entre les numéros de ligne et le début de ligne. Déplacez la souris sur la gouttière et cliquez pour plier et déplier les régions. Utilisez Shift + Cliquez sur l’icône de pliage pour plier ou déplier la région et toutes les régions à l’intérieur.

Vous pouvez également utiliser les actions suivantes :

• Plissage (⌥⌘ (Windows, Linux Ctrl+Shift+])) déplie la région pliée au niveau du curseur.
• Déplier (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) plie ou déplie la région au curseur.
• Déplier récursivement (⌘K ⌘ (Windows, Linux Ctrl+K Ctrl+]))) déplie la région au curseur et toutes les régions à l’intérieur de cette région.
• Déplier tout (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) plie toutes les régions de l’éditeur.
• Déplier tout (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) déplie toutes les régions de l’éditeur.
• Plier le niveau X (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2) pour le niveau 2) replie toutes les régions du niveau X, à l’exception de la région située à la position actuelle du curseur.
• Replier tous les commentaires de bloc (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) replie toutes les régions qui commencent par un jeton de commentaire de bloc.

Les régions de repliement sont par défaut évaluées en fonction de l’indentation des lignes. Une région de pliage commence quand une ligne a une indentation plus petite qu’une ou plusieurs lignes suivantes, et se termine quand il y a une ligne avec la même indentation ou une indentation plus petite.

Depuis la version 1.22, les régions de pliage peuvent également être calculées sur la base des tokens syntaxiques du langage configuré de l’éditeur. Les langages suivants fournissent déjà un pliage tenant compte de la syntaxe : Markdown, HTML, CSS, LESS, SCSS et JSON.

Si vous préférez revenir au pliage basé sur l’indentation pour un (ou tous) les langages ci-dessus, utilisez :

 "": { "editor.foldingStrategy": "indentation" },

Les régions peuvent également être définies par des marqueurs définis par chaque langage. Les langues suivantes ont actuellement des marqueurs définis :

.

.

Langue	Région de début	Région de fin
Bat	::#region ou REM #region.	::#endregion ou REM #endregion
C#	#region	#endregion
C/C++	#pragma region	#pragma endregion
CSS/Less/SCSS	/*#region*/	/*#endregion*/
Coffeescript	#region	#endregion
F#	//#region ou (#_region)	//#endregion ou (#_endregion)
Java	//#region ou //<editor-fold>	// #endregion ou //</editor-fold>.
Markdown	<!-- #region -->	<!-- #endregion -->
Perl5	#region ou =pod	#endregion ou =cut.
PHP	#region	#endregion
PowerShell	#region	#endregion
Python	#region ou # region	#endregion ou # endregion
TypeScript/JavaScript	//#region	//#endregion
Visual Basic	#Region	#End Region

Pour plier et déplier uniquement les régions définies par les marqueurs utiliser :

• Plier les régions de marqueurs (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) plie toutes les régions de marqueurs.
• Déplier les régions de marqueurs (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) déplie toutes les régions de marqueurs.

Indentation

VS Code vous permet de contrôler l’indentation du texte et si vous souhaitez utiliser des espaces ou des taquets de tabulation. Par défaut, VS Code insère des espaces et utilise 4 espaces par touche de tabulation. Si vous souhaitez utiliser un autre défaut, vous pouvez modifier les paramètres editor.insertSpaces et editor.tabSize.

 "editor.insertSpaces": true, "editor.tabSize": 4,

Auto-détection

VS Code analyse votre fichier ouvert et détermine l’indentation utilisée dans le document. L’indentation détectée automatiquement prévaut sur vos paramètres d’indentation par défaut. Le paramètre détecté est affiché sur le côté droit de la barre d’état :

Vous pouvez cliquer sur l’affichage de l’indentation de la barre d’état pour faire apparaître une liste déroulante avec des commandes d’indentation vous permettant de modifier les paramètres par défaut pour le fichier ouvert ou de convertir entre les taquets de tabulation et les espaces.

Note : l’auto-détection de VS Code vérifie les indentations de 2, 4, 6 ou 8 espaces. Si votre fichier utilise un nombre d’espaces différent, l’indentation peut ne pas être correctement détectée. Par exemple, si votre convention est d’indenter avec 3 espaces, vous pouvez désactiver editor.detectIndentation et définir explicitement la taille de la tabulation à 3.

 "editor.detectIndentation": false, "editor.tabSize": 3,

Support du codage des fichiers

Définissez le codage des fichiers globalement ou par espace de travail en utilisant le paramètre files.encoding dans les paramètres de l’utilisateur ou les paramètres de l’espace de travail.

Vous pouvez voir le codage des fichiers dans la barre d’état.

Cliquez sur le bouton d’encodage dans la barre d’état pour rouvrir ou enregistrer le fichier actif avec un encodage différent.

Puis choisir un encodage.

Vous avez couvert l’interface utilisateur de base – il y a beaucoup plus à VS Code. Poursuivez votre lecture pour découvrir :

• Vidéo d’introduction – Configuration et bases – Regardez un tutoriel sur les bases de VS Code.
• Paramètres de l’utilisateur/espace de travail – Apprenez à configurer VS Code selon vos préférences grâce aux paramètres de l’utilisateur et de l’espace de travail.
• Navigation dans le code – Définition Peek and Goto, et plus encore.
• Terminal intégré – Découvrez le terminal intégré pour effectuer rapidement des tâches en ligne de commande depuis VS Code.
• IntelliSense – VS Code apporte des compléments de code intelligents.
• Débogage – C’est là que VS Code brille vraiment.

Questions courantes

Est-il possible de rechercher et de remplacer globalement ?

Oui, développez la zone de texte de la vue Recherche pour inclure un champ de texte de remplacement. Vous pouvez rechercher et remplacer dans tous les fichiers de votre espace de travail. Notez que si vous n’avez pas ouvert VS Code sur un dossier, la recherche ne s’exécutera que sur les fichiers actuellement ouverts.

Comment activer le retour à la ligne ?

Vous pouvez contrôler le retour à la ligne par le biais du paramètre editor.wordWrap. Par défaut, editor.wordWrap est off mais si vous le définissez à on, le texte s’enroulera sur la largeur du viewport de l’éditeur.

 "editor.wordWrap": "on"

Vous pouvez basculer le word wrap pour la session VS Code avec ⌥Z (Windows, Linux Alt+Z).

Vous pouvez également ajouter des règles de colonnes verticales à l’éditeur avec le paramètre editor.rulers, qui prend un tableau de positions de caractères de colonnes où vous voudriez des règles verticales.