Quoi de neuf dans Visual Studio Code ?

Êtes-vous au courant des mises à jour de VS Code ? De la mise en route aux référentiels distants, il y a beaucoup à découvrir.

La dernière version de Visual Studio Code 15.7publiée en mai 2021, a été mise à jour avec de nouvelles fonctionnalités et correctifs. L'objectif principal de la mise à jour est de créer une expérience utilisateur plus dynamique pour les utilisateurs de VS Code et de faire en sorte que les nouveaux et les anciens utilisateurs se sentent plus à l'aise avec l'éditeur de code.

Les fonctionnalités importantes fournies avec cette version incluent une nouvelle expérience de démarrage. , la confiance de l'espace de travail, les référentiels distants et bien plus encore. Dans cet article, nous allons présenter et expliquer certaines des fonctionnalités afin que nous comprenions et sachions ce qu'elles impliquent.

Prérequis

Cet article suppose que vous êtes déjà un utilisateur de VS Code et que vous l'avez déjà utilisé, mais si ce n'est pas le cas— vous pouvez consulter et télécharger le code VS.

Passons en revue certaines des fonctionnalités récemment publiées, expliquons-les et montrons comment vous pouvez commencer à les utiliser.

Une nouvelle acquisition. Début de l'expérience

Nouvelle expérience de démarrage dans Code VS

La dernière version est livrée avec une nouvelle expérience de démarrage pour l'intégration des utilisateurs nouveaux et existants. L'expérience de démarrage a été ajoutée pour permettre aux utilisateurs nouveaux et existants de se familiariser avec l'environnement VS Code et d'améliorer généralement l'expérience d'intégration qu'ils obtiennent en utilisant l'outil. Ils vous permettent de démarrer facilement avec des étapes pour personnaliser votre espace de travail dans cette zone.

Par exemple, vous pouvez choisir un schéma de couleurs par défaut, ajouter des extensions pour la coloration syntaxique et apprendre à accéder à tout avec des raccourcis. Ce n'est pas tout nouveau – cela existait déjà auparavant – mais il a maintenant un nouveau look avec un indicateur de progression pour montrer les étapes que vous avez couvertes dans la configuration, et il est activé par défaut pour tous les utilisateurs existants.

Vous pouvez définissez également l'écran de démarrage par défaut pour qu'il s'affiche toujours au démarrage en définissant workbench.startupEditor sur la valeur gettingStarted. La nouvelle valeur gettingStarted remplace l'ancienne valeur par défaut welcome. Les autres options disponibles incluent readmegettingStartedInEmptyWorkbenchnewUntitledFile et none.

Workbench Startup Editor

Workspace Trust

Cette nouvelle fonctionnalité de sécurité introduite par VS Code restreint l'accès que nous accordons au code source inconnu. La sécurité est un aspect essentiel du développement, et on ne saurait trop l'insister. À maintes reprises, les développeurs sont attaqués avec du code malveillant, d'autant plus que la source de ce code est inconnue.

Lorsque vous ouvrez un nouveau dossier dans VS Code, vous êtes invité à choisir si vous faites confiance au dossier ou non. Si vous décidez de faire confiance au codel'exécution du code fonctionne bien et d'autres fonctionnalités telles que le débogage et les extensions sont activées, et vous pouvez accéder pleinement à tous les paramètres de l'espace de travail.

Si vous choisissez de parcourir le dossier de manière restrictive. mode, VS Code empêchera l'exécution du code, désactivera ou limitera le fonctionnement des tâches, du débogage, des paramètres et des extensions de l'espace de travail.

Workspace Trust on VS Code

Une fois le mode Restreint sélectionné, vous verrez une bannière vous rappelant constamment qu'il a été activé.

Bannière d'état du mode restreint

Avec une invite pour gérer le paramètre appliqué, vous pouvez changer un dossier du mode restreint à approuvé si vous décidez plus tard que le code est digne de confiance. Il est essentiel de considérer qu'il est préférable de passer de restreint à approuvé plutôt que l'inverse.

Pour ce faire, sélectionnez l'option de gestion sur la bannière, et vous voyez qu'il est en mode restreint. Vous avez la possibilité de faire confiance au dossier ou de faire confiance au dossier parent, ce qui appliquera la confiance au dossier parent et à tous les sous-dossiers.

Gérer le mode restreint

Workspace Trust fournit une couche de sécurité supplémentaire lorsque vous travaillez avec du code inconnu en empêchant l'exécution automatique du code lorsqu'un espace de travail est ouvert en "mode restreint".

Dépôts distants—Ouvrir le dépôt depuis GitHub

Cette fonctionnalité vous permet de parcourir, de modifier et de valider à distance un dépôt GitHub directement sans télécharger ni cloner le dépôt localement. L'activation des référentiels distants sur VS Code vous connecte directement à GitHub.

GitHub Remote Repositories

Pour activer les référentiels distants, accédez à l'onglet Extensions et recherchez les référentiels distants, ou obtenez-le depuis le marché VS Code et installez-le.

Une fois l'installation terminée, recherchez un bouton vert en bas à gauche de la barre d'état ou utilisez la palette de commandes pour rechercher Ouvrir un référentiel distant. (Ouvrez la palette de commandes soit en allant dans Affichage -> Palette de commandes, soit en utilisant le raccourci Command + Shift + P pour Mac ou Ctrl + Shift + P sur un PC.)

Cette extension fonctionne pour les fondamentaux comme apporter des modifications à vos fichiers de démarques ou parcourir le référentiel et apporter une petite modification. Pour apporter des modifications plus avancées, cliquez sur GitHub en bas à gauche pour cloner localement ou ouvrir à l'aide de GitHub Codespaces, un environnement VS Code hébergé dans le cloud.

Ouvrir des référentiels distants avec la palette de commandes

VS Code prend également en charge d'autres fournisseurs de gestion de contrôle de source (SCM) via des extensions, ce qui a permis un moyen pour les développeurs de cloner et de travailler avec des référentiels directement dans VS Code.

Débogage du navigateur Edge

Avec cette nouvelle fonctionnalité, le débogueur JavaScript s'intègre aux outils de développement Microsoft Edge pour fournir un DOM, un style et une inspection réseau pour le débogage du navigateur. Ceci est accessible via l'icône d'inspection récemment ajoutée dans la barre d'outils de débogage de VS Code.

Débogage du navigateur Edge avec MS Edge

Si vous utilisez le navigateur Microsoft Edge pour le développement, vous pouvez désormais également l'utiliser pour le débogage du navigateur. Pour activer cette fonctionnalité, vous pouvez y basculer en remplaçant "type": "chrome" ou "type": "pwa-chrome" par "type": " pwa-msedge" dans votre fichier launch.json.

Custom Notebook API Finalized

Au lieu d'utiliser GitHub pour gérer les problèmes, le backlog et la planification, GitHub Issues Notebook se trouve dans les extensions. marketplace dans Visual Studio Code – tout ce que vous avez à faire est de le rechercher et de l'activer.

Une fois l'extension téléchargée, créez un nouveau fichier appelé problèmes GitHub. Il vous permet d'interroger le dépôt VS Code ou tout autre dépôt, et vous pourrez voir les résultats dans l'interface du bloc-notes en douceur.

L'API du bloc-notes nous permet de créer un langage personnalisé dans les cellules et de créer un moteur d'exécution personnalisé. VS Code a finalisé la plupart des API des notebooks. Il est structuré en Notebook Serializer, Notebook Renderer et Notebook Controller.

• L'API NotebookSerializer fonctionne en combinaison avec le point de contribution notebooks pour permettre à VS Code d'ouvrir, de modifier et d'enregistrer le notebook. documents.
• Le point de contribution notebookRenderer de votre fichier d'extensions package.json ajoute des rendus de bloc-notes qui présentent la sortie des cellules.
• L'API NotebookController génère des sorties pour les cellules de code.

Aperçu des onglets du terminal

Les onglets du terminal introduits dans l'aperçu sont désormais activés par défaut pour tous les utilisateurs. La nouvelle vue des onglets ne s'affichera par défaut que s'il y a au moins deux terminaux. Pour les terminaux uniques, l'onglet est « inline » dans le titre du panneau.

Cela introduit également les statuts des terminaux, par exemple si une tâche est en cours d'exécution, réussie ou échouée. Certains points forts de la nouvelle version incluent la possibilité de changer la couleur de votre onglet pour permettre une navigation rapide et les différencier ; vous pouvez également faire glisser et déposer des onglets pour les réorganiser.

Nouveau aperçu du terminal

Si vous ne le faites pas. n'aimez pas la nouvelle mise à jour et souhaitez revenir à l'expérience utilisateur déroulante précédente, vous pouvez définir : "terminal.integrated.tabs.enabled": false.

JSDoc @link Support[19659005]La nouvelle fonctionnalité JSDoc @Link est prise en charge par les commentaires JavaScript et TypeScript. Ils vous permettent de créer des liens cliquables vers un symbole dans votre documentation.

JSDoc Link Support dans VS Code

Les balises de lien sont écrites comme {@ link symbolName} et il y a la possibilité de spécifier le texte à rendre à la place du nom du symbole : {@link class.property Alt text}.

En outre, le type d'extensibilité VS Code le fichier de déclaration vscode.d.ts peut désormais utiliser @link.

Aller à la définition des fichiers non-JS/TS

Cette nouvelle fonctionnalité vous permet de naviguer dans les importations avec l'option "Aller à la définition" ou avec les touches CMD/CTRL. Nous utilisons souvent des instructions d'importation pour importer des actifs tels que des images et des feuilles de style avec des bundles et des frameworks JavaScript modernes. Cette fonctionnalité est particulièrement utile lorsque vous devez naviguer vers des fichiers comme ceux-ci.

Aller à la définition avec des fichiers non-JS

Résoudre

Ce sont tous des nouveautés passionnantes fonctionnalités à essayer si vous ne l'avez pas encore fait. Je suis heureux de voir les mises à jour de l'équipe VS Code et heureux qu'ils accordent la priorité à l'expérience utilisateur et souhaitent améliorer la productivité des développeurs avec les nouvelles fonctionnalités.