vscode.dev (!)
20 de outubro de 2021 por Chris Dias,
@chrisdias
Em 2019, quando o domínio .dev foi aberto, nós o pegamos vscode.dev e o estacionamos rapidamente, apontando para nosso site code.visualstudio.com (ou, se você for da área de Boston como eu, nós o "empacotamos"). Como muitas pessoas que compram um domínio .dev, não tínhamos ideia do que faríamos com ele. E certamente não previmos que isso acabaria sendo o cumprimento de uma missão em construção ao longo de uma década.
Trazendo o VS Code para o navegador
Avance até hoje. Agora, ao acessar
https://vscode.dev, você verá uma versão leve do VS Code em execução integral no navegador. Abra uma pasta em sua máquina local e comece a codificar.
Não é necessário instalar.
Com a disponibilidade do vscode.dev, começamos finalmente a realizar nossa visão original de construir uma ferramenta de desenvolvimento que pode ser executada totalmente sem servidor no navegador. Para uma lição de história completa, confira a palestra de Erich Gamma sobre o VS Code Day
"VS Code: An Overnight Success ... 10 Years in the Making".
Então, o que você pode fazer no VS Code para a Web? Bastante, na verdade ...
Desenvolvimento local com ferramentas em nuvem
Navegadores modernos que suportam a
API de acesso ao sistema de arquivos (Edge e Chrome hoje) permitem que as páginas da web acessem o sistema de arquivos local (com sua permissão). Este gateway simples para a máquina local abre rapidamente alguns cenários interessantes para usar o VS Code para a Web como uma ferramenta de desenvolvimento local de instalação zero, como:
- Visualização e edição de arquivos locais. Faça anotações rapidamente (e visualize!) no Markdown. Mesmo se você estiver em uma máquina restrita onde não pode instalar o VS Code completo, você ainda poderá usar o vscode.dev para visualizar e editar arquivos locais.
- Crie aplicativos HTML, JavaScript e CSS do lado do cliente em conjunto com as ferramentas do navegador para depuração.
- Edite seu código em máquinas de baixa potência, como Chromebooks, onde você não pode (facilmente) instalar o VS Code.
- Desenvolva no seu iPad. Você pode fazer upload / download de arquivos (e até mesmo armazená-los na nuvem usando o aplicativo Arquivos), bem como abrir repositórios remotamente com a extensão integrada GitHub Repositories.
E, se o seu navegador não suportar APIs de sistema de arquivos local, você ainda poderá abrir arquivos individuais fazendo upload e download deles através do navegador.
Uma experiência de peso leve
Como o VS Code for the Web é executado completamente no navegador, algumas experiências serão naturalmente mais restritas, quando comparadas ao que você pode fazer no aplicativo de desktop. Por exemplo, o terminal e o depurador não estão disponíveis, o que faz sentido, pois você não pode compilar, executar e depurar um aplicativo Rust ou Go na caixa de proteção do navegador (embora tecnologias emergentes como Pyodide e contêineres da web possam algum dia mudar isso).
Um pouco mais matizadas são as experiências de edição de código, navegação e navegação, que, no desktop, geralmente são alimentadas por serviços de linguagem e compiladores que esperam um sistema de arquivos, tempo de execução e ambiente de computação. No navegador, essas experiências são alimentadas por serviços de linguagem
executados totalmente no navegador (sem sistema de arquivos, sem tempos de execução) que fornecem tokenização de código-fonte e colorização de sintaxe, completações e muitas operações de arquivo único.
Como resultado, quando no navegador, as experiências geralmente se enquadram nas seguintes categorias:
Bom: para a maioria das linguagens de programação, vscode.dev oferece colorização de sintaxe de código, completações baseadas em texto e
colorização de par de colchetes. Usando uma
árvore de sintaxe
Tree-sitter , podemos
fornecer experiências adicionais, como
Outline / Go to Symbol e
Symbol Search para linguagens populares como C/C++, C#, Java, PHP, Rust e Go.
Melhor: as experiências TypeScript, JavaScript e
Python são todas alimentadas por serviços de linguagem que são executados nativamente no navegador. Com essas linguagens de programação, você obterá a experiência "
Boa ", além de completações completas de arquivo único, realce semântico, erros de sintaxe e muito mais.
Melhor: para muitas linguagens "webby", como JSON, HTML, CSS e LESS, a experiência de codificação em vscode.dev é quase idêntica à da área de trabalho (incluindo visualização Markdown!).
Extensões
A maioria das extensões de personalização da UI, como temas, mapas principais e snippets, funcionam em vscode.dev e você pode até habilitar roaming entre o navegador, a área de trabalho e os Codespaces do GitHub por meio da
sincronização de configurações.
As extensões que executam o código Node.js que usam módulos específicos do sistema operacional ou abrem para executáveis locais ainda aparecem nos resultados da pesquisa, mas são claramente marcadas como indisponíveis.
Dito isso, há um número crescente de extensões que foram atualizadas para funcionar no navegador, com mais extensões chegando todos os dias.
Por exemplo, a extensão
Luna Paint - Image Editor permite editar imagens raster diretamente no VS Code. A extensão traz ferramentas de design ricas (por exemplo, ferramentas de camada e mistura) para o VS Code e, claro, você pode salvar imagens em seu disco local.
A extensão
GitHub Issue Notebooks traz a experiência do Notebook para GitHub Issues. Com isso, você pode intercalar consultas, resultados e até Markdown descrevendo o propósito das consultas, juntos em um único editor.
GitHub
Muitas extensões para VS Code funcionam com código-fonte armazenado no GitHub. Por exemplo, a extensão
CodeTour permite criar
percursos guiados de uma base de código e a extensão
WikiLens transforma o VS Code e seu repositório em uma ferramenta poderosa para fazer anotações (com link bidirecional). Para facilitar o acesso ao seu código no GitHub, o VS Code for the Web vem com os
repositórios GitHub,
Codespaces e extensões de
solicitação de pull integrados. Você pode fazer edições rápidas, revisar PRs e
continuar para um clone local ou ainda melhor, para um
Codespace GitHub, se você deseja experiências de linguagem mais poderosas ou precisa construir, executar e testar as alterações antes de mesclar os commits.
Uau, soa muito parecido com github.dev, não é? Eles são diferentes? O mesmo? Por que dois?? !!
Boa (s) pergunta (s)! github.dev é uma instância personalizada do VS Code para a Web que está profundamente integrada ao GitHub. O login é automático, o formato da URL segue o /organization/repomodelo do github.com para que você possa simplesmente mudar o .com para .dev para editar um repo e é personalizado para o GitHub com os temas claro e escuro.
Além dos repositórios no GitHub, o VS Code for the Web oferece suporte a Azure Repos (parte do Azure DevOps). Para trabalhar com ambos, o VS Code for the Web oferece suporte a duas rotas, vscode.dev/github e vscode.dev/azurerepos. Você não precisa se lembrar disso, simplesmente prefixe qualquer URL que você tenha com "vscode.dev".
Por exemplo, mude
https://github.com/microsoft/vscodepara 'https://
vscode.dev/github.com/Microsoft/vscode'.
Para Azure Repos, faça o mesmo. Mude
https://dev.azure.com/…para 'https://
vscode.dev/dev.azure.com/…'.
Hoje, o suporte para Azure Repos está no modo de visualização para leitura de repositórios, mas estamos trabalhando muito para trazer recursos completos de leitura/gravação assim que possível.
Se você não estiver no GitHub ou no Azure DevOps, o suporte para serviços adicionais de hospedagem de repositório pode ser fornecido por meio de extensões, assim como na área de trabalho. Essas extensões, conforme observado acima, precisarão ser totalmente compatíveis com a execução no navegador.
Por falar em URLs…
Como no desktop, você pode personalizar o VS Code para a Web por meio de um rico ecossistema de extensões que oferecem suporte a quase todos os back-end, linguagens e serviços. Ao contrário do desktop, é fácil para nós fornecer experiências personalizadas com extensões pré-instaladas por meio de URLs vscode.dev exclusivas (como vscode.dev/github e vscode.dev/azurerepos conforme mencionado acima).
Por exemplo, tente navegar para
https://vscode.dev/theme/sdras.night-owl.
Aqui você pode experimentar o popular tema de cor
Night Owl de
@sarah_edo "ao vivo", sem ter que passar pelo processo de download e instalação, apenas para ver se você gosta. Não é necessário instalar! Se você for um autor de temas, poderá até criar um emblema em seu README.md para permitir que os usuários testem seu tema diretamente do Marketplace (saiba mais no guia do usuário do
VS Code para a Web).
Sinta-se à vontade para usar este URL para compartilhar seus temas favoritos com amigos. Pessoalmente, eu sou um grande fã do tema de
@wesbos,
Cobalt2, veja
https://vscode.dev/theme/wesbos.theme-cobalt2. Observe que a URL do tema só funciona com temas totalmente declarativos (sem código).
Como você pode ver, as URLs vscode.dev são uma forma poderosa de oferecer experiências novas e leves. Outro exemplo é que as sessões de convidados do Live Share também estarão disponíveis no navegador por meio da
https://vscode.dev/liveshareURL. O sessionId será passado para a extensão para tornar a adesão uma experiência perfeita.
As possibilidades com as URLS vscode.dev são infinitas e temos muitas ideias que estamos ansiosos para compartilhar com você nos próximos meses.
O que vem em seguida?
Trazer o código VS para o navegador é a concretização da visão original do produto. É também o início de um completamente novo. Um editor efêmero que está disponível para qualquer pessoa com um navegador e uma conexão com a Internet é a base para um futuro onde podemos realmente editar qualquer coisa em qualquer lugar.
Fique ligado para mais ...
Happy Coding,