Visual Studio Code 1.45 est disponible et apporte des améliorations au débogueur JavaScript qui est en préversion

Ainsi qu'une mise en évidence plus rapide des syntaxes

Workbench

Changer d'onglet à l'aide de la molette de la souris

Lorsque vous utilisez la molette de la souris pour faire défiler les onglets de l'éditeur, vous ne pouvez pas actuellement basculer entre les onglets, mais uniquement révéler les onglets qui ne sont pas visibles. Désormais, avec un nouveau paramètre workbench.editor.scrollToSwitchTabs, vous pouvez modifier le comportement pour changer l'onglet de l'éditeur actif.

Ci-dessous, lorsque le curseur se concentre dans la zone de l'onglet de l'éditeur, si l'utilisateur fait défiler la molette de la souris, l'éditeur actif change.


Vous pouvez également appuyer sur la touche Maj et la maintenir enfoncée pendant le défilement pour obtenir le comportement inverse (par exemple, vous pouvez changer d'onglet d'éditeur même lorsque le paramètre scrollToSwitchTabs est désactivé).

Séparateur de titre de fenêtre personnalisé

Un nouveau paramètre window.titleSeparator vous permet de modifier le caractère de séparation utilisé dans le titre de la fenêtre. Par défaut, un tiret '-' est utilisé.


En-têtes de section de la barre latérale mis à jour pour les thèmes par défaut

Microsoft a mis à jour le style des en-têtes de section de la barre latérale pour les thèmes Dark and Light par défaut. Un fond transparent est désormais utilisé et une bordure est montrée pour chaque en-tête.

Sous l'en-tête de section OPEN EDITORS n'a pas de couleur d'arrière-plan et les en-têtes VSCODE et OUTLINE ont une bordure supérieure.

Éditeur

Mise en évidence de la syntaxe plus rapide

La coloration syntaxique dans VS Code s'exécute en interprétant les Text Mate Grammars, qui sont créés avec des expressions régulières écrites dans un dialecte particulier et peuvent être évaluées à l'aide de la bibliothèque d'expressions régulières oniguruma. Jusqu'à présent, Microsoft a utilisé deux bibliothèques distinctes pour évaluer de telles expressions régulières, une pour VS Code Desktop (un module de nœud natif) et une autre pour VS Code dans le navigateur (un binaire Web Assembly).

L'éditeur a maintenant écrit une liaison Web Assembly dédiée qui est optimisée pour être utilisée par son interprète TextMate. En évitant les allocations de mémoire dans les boucles internes et en adoptant de nouvelles API ajoutées il y a quelques mois à oniguruma, l'éditeur a pu créer une variante plus rapide que les deux approches précédentes et offrant des performances jusqu'à 3 fois plus rapides pour mettre en évidence les fichiers de programmation réguliers.

Style de jeton sémantique

Vous pouvez désormais personnaliser les règles de thème sémantique dans vos paramètres utilisateur. La coloration sémantique est disponible pour TypeScript et JavaScript, avec prise en charge de Java et C ++ en cours de développement. Elle est activée par défaut pour les thèmes intégrés et est adopté par les extensions de thème.

Le paramètre editor.semanticTokenColorCustomizations permet aux utilisateurs de remplacer les règles de thème par défaut et de personnaliser le thème.

L'exemple ci-dessous ajoute un style sémantique à tous les thèmes:

Nouvelle couleur pour les constantes dans le thème Default Dark+

Les thèmes Default Dark + et Default Light + colorent désormais les constantes dans une nuance différente de celle des variables inscriptibles.

Ci-dessous, notez que les constantes htmlMode et range sont d'une couleur différente de la variable de result.

Thème Default Dark + :


Thème Default Light+ :


Débogage

Configurations de débogage automatique

La configuration du débogage dans VS Code peut être une tâche intimidante, car un utilisateur doit créer une nouvelle configuration de débogage (ou au moins modifier un modèle selon ses besoins). Dans l'effort continu de Microsoft pour simplifier l'expérience de débogage, l'éditeur a ajouté une nouvelle fonctionnalité qui donne aux auteurs d'extensions de débogage un moyen d'analyser le projet actuel et d'offrir automatiquement des configurations de débogage de qualité qui ne nécessitent pas de configuration utilisateur supplémentaire.

De la même manière que la façon dont les tâches de génération sont fournies, les configurations de débogage automatique sont regroupées sous le débogueur approprié (icône de dossier) dans la liste déroulante de configuration de la vue Débogage et la sélection rapide Sélectionner et démarrer le débogage. Une fois le débogueur choisi, VS Code présente toutes les configurations automatiques disponibles. La sélection d'une configuration démarre une nouvelle session de débogage.

La capture d'écran suivante montre la fonctionnalité du nouveau débogueur JavaScript (en préversion) et du Mock Debug éducatif de Microsoft :


Le débogage Quick Pick peut être ouvert en tapant 'debug' (avec un espace) dans Quick open (Ctrl + P) ou en déclenchant la commande Debug: Select and Start Debugging.

Dans la prochaine étape, l'éditeur prévoit d'ajouter l'interface utilisateur afin qu'une configuration de débogage automatique puisse être facilement ajoutée au launch.json pour une configuration supplémentaire.

Fonctionnalités en préversion

Les fonctionnalités en préversion ne sont pas prêtes à être publiées, mais sont suffisamment fonctionnelles pour être utilisées.

Synchronisation des paramètres

Microsoft travaille depuis quelques mois pour prendre en charge la synchronisation des préférences VS Code sur toutes les machines et cette fonctionnalité est disponible en préversion sur la version Insiders.

Vous pouvez maintenant vous connecter avec votre compte GitHub pour synchroniser vos préférences VS Code.

Nouveau débogueur JavaScript

Ce mois-ci, Microsoft a continué à progresser sur l'évolution de son nouveau débogueur JavaScript. Il est installé par défaut sur la version Insiders et peut être installé à partir du Marketplace dans VS Code stable. Vous pouvez commencer à l'utiliser avec vos configurations de lancement existantes en activant le paramètre debug.javascript.usePreview.

Voici quelques nouvelles fonctionnalités ajoutées ce mois-ci:

Prise en charge du profilage

Vous pouvez capturer des profils de processeur à partir de vos applications Node.js ou de votre navigateur en cliquant sur le nouveau bouton Profil dans la vue Pile d'appels ou en utilisant la commande Déboguer : Prendre un profil de performances. Une fois que vous le faites, vous pouvez choisir la durée du profil: jusqu'à ce que vous l'arrêtiez, pendant une longue période, ou jusqu'à ce que vous atteigniez un autre point d'arrêt.

Une fois l'opération terminée, elle sera enregistrée dans votre dossier d'espace de travail et ouverte dans VS Code. Si vous êtes sur la version stable, vous aurez besoin de l'extension visualizer pour la voir. Dans la version Insiders, l'extension est déjà intégrée. Lorsque vous ouvrez le profil, CodeLens est ajouté à vos fichiers qui contiennent des informations sur les performances au niveau de la fonction et pour certaines lignes « directes ». Contrairement aux profils capturés dans de nombreux autres outils, le profil enregistré est compatible avec la sourcemap.

Intégration Auto Attach

Lorsque debug.javascript.usePreview est activé, l'attachement automatique de VS Code utilise une nouvelle méthode fournie par js-debug qui permet à tous les terminaux de fonctionner de manière similaire au terminal de débogage.

Améliorations de l'attachement automatique par rapport au débogueur existant:

• Le débogueur est attaché immédiatement vous permettant d'atteindre les points d'arrêt au début du programme.
• Les processus enfants sont débogués automatiquement.
• Il n'y a pas de surcharge de processus lors de l'attachement automatique.

Copie de valeurs complexes depuis la vue Variables

Auparavant, essayer de copier des valeurs complexes, comme des objets, à partir de la vue Variables de code VS aboutissait souvent à des données tronquées ou incomplètes. Les changements dans VS Code et js-debug permettent de copier la valeur complète.

Télécharger Visual Studio Code 1.45

Source : Microsoft