Microsoft rend son outil VS Code disponible en préversion directement dans le navigateur

Et permet aux développeurs de profiter d'une version plus légère de VS Code sans avoir à l'installer sur PC

Le 21 octobre 2021 à 06:41, par Stéphane le calme

0PARTAGES

Microsoft a mis à la disposition des développeurs le 20 octobre une version preview de son outil Visual Studio Code (VS Code) pour le Web. VSCode pour le Web permet aux développeurs d'utiliser une version plus légère de VSCode directement dans le navigateur sans avoir à l'installer sur leur PC. En allant sur https://vscode.dev, les utilisateurs peuvent obtenir une version de VS Code qui fonctionne dans leurs navigateurs. Les responsables le décrivent comme un « outil de développement local à installation zéro ».

Après le succès rencontré par la version de bureau de l’éditeur de code multi-plate-forme Visual Studio Code, l’équipe de Microsoft semble s’être finalement décidée à sortir la version Web de son éditeur. Plus tôt cette année, l’équipe en charge du projet a annoncé sur sa page vscode.dev, la sortie de la préversion de Visual Studio Code pour le Web. Visual Studio Code étant basé sur Electron, pour beaucoup, ce n’était qu’une question de temps avant que la version Web paraisse au grand jour.

Mais quelques heures après l’annonce de la disponibilité de la version Web de Visual Studio Code, Microsoft a rendu la page de l’annonce indisponible et a informé certains journalistes qui ont pu avoir accès à la page de l’annonce qu’il s’agissait d’une erreur tout en mentionnant que la préversion de Visual Studio Code pour le Web n’était pas encore finalisée.

Certains pourraient se demander l'intérêt pour VS Code pour le web étant donné que Visual Studio Code pour desktop est gratuit et beaucoup plus performant. Voici des éléments de réponse :

Disposer d’un éditeur de code prêt à l’emploi en tout temps et à tout moment.
Ne pas avoir besoin d’installer une nouvelle instance de l’éditeur à chaque changement de poste de travail.
Pouvoir apporter des corrections de code sans pour autant avoir besoin de télécharger et installer tout l’application.

Les raisons sont multiples et chacun y trouvera pour son compte. Mais comme Microsoft l’a signifié, Visual Studio Code ne permet pas d’avoir accès au terminal, et ne permet pas non plus d’effectuer les tâches qui requièrent des ressources matérielles importantes comme le débogage, les builds, etc. Visual Studio Code pour le Web est donc plus destiné à donner aux développeurs un outil rapide d’édition de code purement et simplement.

Les responsables de Microsoft ont suggéré plusieurs scénarios dans lesquels les gens pourraient vouloir VS Code pour le Web. Parmi eux : Affichage et édition de fichiers locaux pour prendre des notes rapidement et prévisualiser dans Markdown ; création d'applications HTML, JavaScript et CSS côté client en conjonction avec les outils de navigation pour le débogage*; éditer du code sur des machines sur lesquelles il n'est pas facile d'installer VS Code, comme les Chromebooks*; et même développer sur iPads.

Les navigateurs qui prennent en charge les API d'accès au système de fichiers (ce qui signifie jusqu'à présent Microsoft Edge et Google Chrome) sont pris en charge. Et si un navigateur ne prend pas encore en charge les API d'accès au système de fichiers locales, les utilisateurs pourront toujours ouvrir des fichiers individuels en les chargeant et en les téléchargeant via le navigateur.

L'annonce de Microsoft

« En 2019, lorsque le domaine de premier niveau .dev a été disponible, nous avons récupéré vscode.dev et l'avons rapidement conservé, en pointant sur notre site Web code.visualstudio.com. Comme beaucoup de gens qui achètent un domaine .dev, nous n'avions aucune idée de ce que nous allions en faire. Et nous n'avions certainement pas prévu que cela finirait par être l'accomplissement d'une mission en préparation depuis plus d'une décennie », a noté Chris Dias.

Apporter VS Code au navigateur

Avance rapide jusqu'à aujourd'hui. Désormais, lorsque vous accédez à https://vscode.dev, une version allégée de VS Code s'exécute entièrement dans le navigateur. Ouvrez un dossier sur votre ordinateur local et commencez à coder.

Aucune installation n'est requise.

« Avec la disponibilité de vscode.dev, nous commençons enfin à réaliser notre vision originale de créer un outil de développement pouvant fonctionner entièrement sans serveur dans le navigateur. Alors, que pouvez-vous faire sur VS Code pour le Web ? Pas mal de chose en fait… »

Développement local avec des outils cloud

Les navigateurs modernes qui prennent en charge l'API d'accès au système de fichiers (Edge et Chrome aujourd'hui) permettent aux pages Web d'accéder au système de fichiers local (avec votre autorisation). Cette passerelle simple vers la machine locale ouvre rapidement des scénarios intéressants pour l'utilisation de VS Code pour le Web en tant qu'outil de développement local sans installation, tels que*:

Affichage et édition de fichiers locaux. Prenez rapidement des notes (et prévisualisez les !) dans Markdown. Même si vous êtes sur une machine restreinte sur laquelle vous ne pouvez pas installer le code VS complet, vous pouvez toujours utiliser vscode.dev pour afficher et modifier les fichiers locaux.
Créez des applications HTML, JavaScript et CSS côté client en conjonction avec les outils de navigation pour le débogage.
Modifiez votre code sur des machines moins puissantes comme les Chromebooks, sur lesquelles vous ne pouvez pas (facilement) installer VS Code.
Développez sur votre iPad. Vous pouvez charger/télécharger des fichiers (et même les stocker dans le cloud à l'aide de l'application Fichiers), ainsi qu'ouvrir des référentiels à distance avec l'extension GitHub Repositories intégrée.

Et, si votre navigateur ne prend pas en charge les API du système de fichiers local, vous pourrez toujours ouvrir des fichiers individuels en les chargeant et en les téléchargeant via le navigateur.

Une expérience (plus) légère

Étant donné que VS Code pour le Web s'exécute entièrement dans le navigateur, certaines expériences seront naturellement plus limitées par rapport à ce que vous pouvez faire dans l'application de bureau. Par exemple, le terminal et le débogueur ne sont pas disponibles, ce qui est logique car vous ne pouvez pas compiler, exécuter et déboguer une application Rust ou Go dans le sandbox du navigateur (bien que les technologies émergentes comme Pyodide et les conteneurs Web puissent un jour changer cela).

Les expériences d'édition de code et de navigation sont un peu plus nuancées. Sur desktop, elles sont généralement alimentées par des services de langage et des compilateurs qui attendent un système de fichiers, un environnement d'exécution et un environnement de calcul. Dans le navigateur, ces expériences sont alimentées par des services de langage s'exécutant entièrement dans le navigateur (pas de système de fichiers, pas d'environnement d'exécution) qui fournissent la tokenisation du code source et la colorisation de la syntaxe, les complétions et de nombreuses opérations sur un seul fichier.

Par conséquent, lorsqu'elles sont dans le navigateur, les expériences entrent généralement dans les catégories suivantes*:

Bonne*: pour la plupart des langages de programmation, vscode.dev vous offre une colorisation de la syntaxe du code, des complétions basées sur du texte et une colorisation des paires de crochets. En utilisant un arbre syntaxique Tree-sitter, Microsoft est en mesure de fournir des expériences supplémentaires telles que Outline/Go to Symbol and Symbol Search pour les langages populaires tels que C/C++, C#, Java, PHP, Rust et Go.
Améliorée : les expériences TypeScript, JavaScript et Python sont toutes alimentées par des services de langage qui s'exécutent nativement dans le navigateur. Avec ces langages de programmation, vous obtiendrez la «*bonne*» expérience ainsi que des complétions de fichiers uniques riches, une surbrillance sémantique, des erreurs de syntaxe, etc.
Meilleure : pour de nombreux langages «*webby*», tels que JSON, HTML, CSS et LESS, l'expérience de codage dans vscode.dev est presque identique à celle du bureau (y compris l'aperçu Markdown*!).

Extensions

La plupart des extensions de personnalisation de l'interface utilisateur telles que les thèmes, les cartes de touches et les extraits fonctionnent toutes dans vscode.dev et vous pouvez même activer l'itinérance entre le navigateur, le bureau et les espaces de code GitHub via la synchronisation des paramètres.

Les extensions qui exécutent du code Node.js qui utilisent des modules spécifiques au système d'exploitation ou qui utilisent des exécutables locaux s'affichent toujours dans les résultats de recherche, mais sont clairement marquées comme indisponibles.

Cela dit, un nombre croissant d'extensions ont été mises à jour pour fonctionner dans le navigateur, et d'autres arrivent chaque jour.

Remarque*: Si vous êtes un auteur d'extensions et que vous souhaitez que votre extension soit disponible dans le navigateur, Microsoft vous invite à consulter son guide de création d'extensions Web.

Par exemple, l'extension Luna Paint - Image Editor vous permet de modifier des images raster directement dans VS Code. L'extension apporte des outils de conception riches (par exemple, des outils de calque et de fusion) à VS Code, et vous pouvez bien sûr enregistrer des images sur votre disque local.

L'extension GitHub Issue Notebooks apporte l'expérience Notebook à GitHub Issues. Avec cela, vous pouvez entrelacer des requêtes, des résultats et même Markdown décrivant le but des requêtes, dans un seul éditeur.

GitHub

De nombreuses extensions pour VS Code fonctionnent avec le code source stocké dans GitHub. Par exemple, l'extension CodeTour vous permet de créer des visites guidées d'une base de code et l'extension WikiLens transforme VS Code et votre référentiel en un puissant outil de prise de notes (avec liaison bidirectionnelle). Pour faciliter l'accès à votre code dans GitHub, VS Code for the Web est fourni avec les extensions GitHub Repositories, Codespaces et Pull Request intégrées. Vous pouvez effectuer des modifications rapides, consulter les PR et continuer sur un clone local ou encore mieux, sur un GitHub Codespace, si vous souhaitez des expériences de langage plus puissantes ou si vous avez besoin de créer, exécuter et tester les modifications avant de fusionner les commits.

Cela ressemble beaucoup à github.dev n'est-ce pas ? Sont-ils différents ? Est-ce la même chose ? Pourquoi les deux ?

Bonnes questions ! github.dev est une instance personnalisée de VS Code pour le Web qui est profondément intégrée à GitHub. La connexion est automatique, le format de l'URL suit le modèle /organization/repo de github.com afin que vous puissiez simplement changer .com en .dev pour modifier un repo, et il est personnalisé pour GitHub avec les thèmes clair et sombre.

En plus des référentiels sur GitHub, VS Code pour le Web prend en charge Azure Repos (qui fait partie d'Azure DevOps). Pour fonctionner avec les deux, VS Code pour le Web prend en charge deux routes, vscode.dev/github et vscode.dev/azurerepos. Cependant, vous n'avez pas besoin de vous en souvenir, préfixez simplement l'URL que vous avez avec "vscode.dev".

Par exemple, remplacez https://github.com/microsoft/vscode par https://vscode.dev/github.com/Microsoft/vscode.

Pour Azure Repos, faites de même. Remplacez https://dev.azure.com/… par https://vscode.dev/dev.azure.com /….

« Aujourd'hui, la prise en charge d'Azure Repos est en mode aperçu pour la lecture des référentiels, mais nous travaillons dur pour apporter des fonctionnalités de lecture/écriture complètes dès que possible. Si vous n'êtes pas sur GitHub ou Azure DevOps, la prise en charge de services d'hébergement de référentiel supplémentaires peut être fournie via des extensions, tout comme sur le bureau. Ces extensions, comme indiqué ci-dessus, devront prendre en charge l'exécution complète dans le navigateur ».

En parlant d'URL…

Comme sur desktop, vous pouvez personnaliser VS Code pour le Web grâce à un riche écosystème d'extensions qui prennent en charge à peu près tous les back-ends, langages et services. Contrairement au desktop, Microsoft note qu'il lui est plus facile de proposer des expériences personnalisées avec des extensions préinstallées via des URL vscode.dev uniques (comme vscode.dev/github et vscode.dev/azurerepos comme mentionné ci-dessus).

Par exemple, essayez de naviguer sur https://vscode.dev/theme/sdras.night-owl.

Ici, vous pouvez découvrir le thème de couleur populaire Night Owl de @sarah_edo "en direct", sans avoir à passer par le processus de téléchargement et d'installation, juste pour voir si vous l'aimez. Aucune installation n'est nécessaire ! Si vous êtes un auteur de thème, vous pouvez même créer un badge dans votre README.md pour permettre aux utilisateurs de tester votre thème directement depuis la Marketplace (vous pouvz en savoir plus dans le guide de l'utilisateur de VS Code pour le Web).

« N'hésitez pas à utiliser cette URL pour partager vos thèmes préférés avec vos amis. Personnellement, je suis un grand fan du thème Cobalt2 de @wesbos, consultez https://vscode.dev/theme/wesbos.theme-cobalt2. Notez que l'URL du thème ne fonctionne qu'avec des thèmes entièrement déclaratifs (pas de code).

« Comme vous pouvez le voir, les URL vscode.dev sont un moyen puissant pour nous de proposer de nouvelles expériences légères. Un autre exemple est que les sessions invité Live Share seront également disponibles dans le navigateur via l'URL https://vscode.dev/liveshare. L'identifiant de session sera transmis à l'extension pour faire de l'adhésion une expérience transparente ».

Source : Microsoft

Et vous ?