Discussion :

[Olivier Famien]

Microsoft annonce accidentellement la sortie de la préversion de Visual Studio Code pour le Web,
certaines fonctionnalités comme le terminal, l’exécution de tâches, le débogage pourraient ne pas être intégrées

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. Il y a quelques jours, 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.

En attendant, dans sa première déclaration Microsoft avance que « tout le monde peut utiliser gratuitement VS Code pour le Web sur https://vscode.dev pour ouvrir et parcourir rapidement le code source hébergé sur GitHub et sur votre ordinateur local (et bientôt sur Azure Repos), et apporter et valider des modifications légères ».

Cependant, Microsoft informe que « Visual Studio Code pour le Web n’a pas accès aux ressources de calcul de votre ordinateur. Vous ne pourrez donc pas exécuter, déboguer ou construire votre application, ni utiliser le terminal intégré ». Si vous souhaitez donc avoir un éditeur plus complet, il va falloir vous tourner vers GitHub Codespaces, l’éditeur Web de GitHub, qui est disponible depuis moins d’un mois. Avec Codespaces, vous pourrez utiliser toute la puissance de la version desktop de Visual Studio Code, notamment l’éditeur, le terminal, le débogueur, GitHub Copilot, le contrôle de version, la synchronisation des paramètres et tout l’écosystème des extensions.

Par contre, avec Visual Studio Code basé sur le Web, vous aurez quand même droit à des fonctionnalités comme la coloration syntaxique, la recherche, l’édition de fichiers multiples la vue de contrôle de source et aussi la possibilité de modifier et parcourir le code dans le bac à sable de votre navigateur. Cela signifie que vous pourrez parcourir le code hébergé sur GitHub ainsi que sur votre machine locale.

Pour ceux qui se posent la question de savoir pourquoi ne pas directement utiliser Codespaces, l’éditeur de code GitHub basé sur le Web, il faut savoir que cet éditeur est conçu pour travailler spécifiquement sur les fichiers et les référentiels de code source à partir de GitHub. De même, certains pourraient se dire qu’étant donné que Visual Studio Code pour le bureau est également gratuit et beaucoup plus performant, quel est donc l’intérêt de VS Code pour le Web ? La réponse est évidente. 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, la construction, 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.

Après s’être rendu compte de l’erreur commise en publiant l’annonce avant la finalisation de l’outil, Microsoft a verrouillé la page vscode.dev. Toutefois, en disposant d’un compte Microsoft, il serait possible d’avoir accès à l’outil Web. Certaines personnes déclarent avoir eu accès à l’éditeur après avoir entré leurs identifiants de compte Outlook.

Source : Twitter, Visual Studio Code pour le Web (compte Microsoft exigé)

Et vous ?

En tant développeur, Visual Studio Code pour Web sera-t-il utile pour vous ?

En termes de satisfaction, qu’attendez-vous de cette version Web de VS Code ? Qu’il soit similaire, meilleur ou intègre juste le minimum par rapport à la version de bureau ?

Voir aussi

Visual Studio Code 1.59 est disponible. Cette version s’accompagne d’une amélioration de la vue Extensions ainsi que du suivi des processus enfants et des avertissements de fermeture
Visual Studio Code 1.58 est disponible et apporte des modifications aux commentaires des clients et la prise en charge des mathématiques dans l’aperçu de Markdown
Visual Studio Code 1.57 s’accompagne de Workspace Trust, une fonctionnalité de sécurité pour autoriser ou restreindre l’exécution automatique de code
Visual Studio Code avril 2021 (1.56) est publié avec Electron 12, cette version apporte la prise en charge de Wayland et de KaTeX dans les blocs-notes
L’équipe d’ingénierie de GitHub migre vers Codespaces, ce qui fait passer le temps de clonage de 20 minutes à 90 secondes

[Stéphane le calme]

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 leur ordinateur

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 ?

Que pensez-vous de VS Code pour le Web ?
En tant qu'utilisateur de VS Code, allez-vous l'essayer ?
Si oui, pouvez-vous faire un retour d'utilisation ?
Si non, pouvez-vous indiquer pourquoi ?

Voir aussi

Visual Studio Code 1.59 est disponible. Cette version s’accompagne d’une amélioration de la vue Extensions ainsi que du suivi des processus enfants et des avertissements de fermeture
Visual Studio Code 1.58 est disponible et apporte des modifications aux commentaires des clients et la prise en charge des mathématiques dans l’aperçu de Markdown
Visual Studio Code 1.57 s’accompagne de Workspace Trust, une fonctionnalité de sécurité pour autoriser ou restreindre l’exécution automatique de code
Visual Studio Code avril 2021 (1.56) est publié avec Electron 12, cette version apporte la prise en charge de Wayland et de KaTeX dans les blocs-notes
L’équipe d’ingénierie de GitHub migre vers Codespaces, ce qui fait passer le temps de clonage de 20 minutes à 90 secondes

[DjDeViL66]

C'est génial cela fonctionne très bien sur Chromium j'aime même envie que cela devienne celui par défaut (pour du vs code)

Comme Firefox est mon navigateur par défaut Chromium ne sert qu'à cela et de plus on gagne en hauteur et je suis sur nux - je sais Vs Code est sous nux également mais je dois dire là GG MS aller aller plus que MS Teams même s'il faut que j'installe ms edge sous nux

[grunk]

Autant je peux y voir un intérêt en terme d'intégration sur des outils comme Gitlab/Github autant pour du dév je reste assez dubitatif. Quel intérêt peut avoir un dév à passer par un tel outil plutôt que par une install sur sa machine ?

C'est génial cela fonctionne très bien sur Chromium j'aime même envie que cela devienne celui par défaut (pour du vs code)

Comme Firefox est mon navigateur par défaut Chromium ne sert qu'à cela et de plus on gagne en hauteur et je suis sur nux - je sais Vs Code est sous nux également mais je dois dire là GG MS aller aller plus que MS Teams même s'il faut que j'installe ms edge sous nux

Teams comme vscode fonctionnent parfaitement bien sous linux que ce soit en applicatif ou par navigateur (FF ou chromium) ...

[smarties]

Autant je peux y voir un intérêt en terme d'intégration sur des outils comme Gitlab/Github autant pour du dév je reste assez dubitatif. Quel intérêt peut avoir un dév à passer par un tel outil plutôt que par une install sur sa machine ?

Intérêts :
- tu n'est pas obligé d'installer tout sur ton poste : en télétravail, tu pourrais avoir un PC portable moins puissant mais avec un accès VPN
- tu n'est pas obligé de rapatrier les données sur ton poste donc en cas de crash ou autre problème, ça reste sur le serveur

[abstract123]

VS Code c'est un des meilleurs outils multiplate-forme.

S'ils pouvaient faire la même avec office ou au moins permettre l'ouverture et l'édition de fichier word et excel depuis n'importe où ce serait top.

[Fagus]

À 1ère vue j'étais impressionné, mais je suis vite tombé sur "run and debug is not available on the web, etc." (alors qu'il y a déjà des interpréteurs et des compilateurs en ligne, voire en mémoire).

Donc, bof bof.

Ce que j'aime bien dans vs code, c'est l'interface claire, l'intégration par plugin qui rend l'environnement fonctionnel en 1 clic. (Mais bon, ce qui reste compliqué, c'est tout la chaine de production d'artéfacts en aval qui un coup marche, un coup est cassée par une mise à jour.)