primeiros passos com o Visual Studio Codespaces – Nuvem IDE

O Visual Studio Codespaces (anteriormente Visual Studio Online / VSO) web-based IDE agora está disponível para ser usado. Baseado no popular editor de código Visual Studio, ele oferece uma sensação familiar e espaço de trabalho para escrever e trabalhar com código fonte.. Isso também oferece a extensibilidade de suportar extensões de código Visual Studio, embora neste momento não sabemos quantas ou quais extensões de código VS serão suportadas.



Criando seu primeiro Visual Studio Codespace & Plano de Faturamento

Aqui está uma visão geral do registo no Visual Studio Codespaces (baseado em Nuvem IDE da Microsoft) e começar a usar as ferramentas.

  1. comece por abrir um navegador web e navegar para https://online.visualstudio.com
  2. uma vez ligado, pela primeira vez, verá um ecrã que mostra que não tem quaisquer ambientes, com um botão Criar espaço de codificação.
    começar com espaços de código Visual Studio - Cloud IDE 1
  3. carregue no botão Criar o espaço de codificação.
  4. Isto irá abrir a área de criação de um plano de facturação. Você vai usar isso para especificar um novo plano Visual de faturamento de Codespaces de estúdio para criar dentro de sua assinatura Azure.
     começar com espaços de código Visual Studio-Cloud IDE 2
    especifique os seguintes valores nesta área:
    • Subscrição: escolha a Assinatura Azure que o seu utilizador tem acesso a que gostaria de criar o novo plano de facturação dentro.
    • localização: Escolha a região Azure para hospedar o plano de faturação.
  5. opcionalmente, poderá expandir as opções avançadas para revelar a seguinte configuração:
    • nome do Plano: indique o nome do plano de facturação a criar dentro da sua assinatura Azure.
    • grupo de recursos: indique o nome do grupo de recursos para colocar o novo plano de facturação dentro.
  6. preencha os seus valores desejados, em seguida, clique em Criar.
  7. com o plano de faturamento recentemente criado, ele irá abrir automaticamente a área de criar Codespace.
  8. para criar o seu primeiro espaço de codificação, preencha os valores necessários, em seguida, clique em Criar. Você pode usar os seguintes valores para tentar isso pela primeira vez.
    • nome do espaço de codificação: Indique um nome para o novo espaço de codificação. Você deve usar um nome que se assemelha ao projeto ou tarefa que você vai usar este ambiente para.
    • repositório Git: opcionalmente, indique um repositório Git para este codificador clonar. Isto pode ser indicado em dois formatos diferentes:
      • URL do projecto GitHub: poderá indicar o URL completo da página inicial de um projecto GitHub. Tais como https://github.com/build5nines/az-kung-fu.
      • forma curta do GitHub: poderá indicar uma barra delimitada do nome do repositório do GitHub formatado no formato organization/repo; como por exemplo build5nines/az-kung-fu.
    • tipo de instância: especifique o núcleo do CPU e a configuração da memória que será provisionada para o Codespace Visual Studio.
    • suspender o espaço de codificação inactivo após…: indicar o período de tempo até que o espaço de codificação seja suspenso automaticamente quando não estiver a ser utilizado.
      começar com espaços de código Visual Studio - Cloud IDE 3
  9. o Codespace Visual Studio que foi criado agora vai abrir para o editor de código on-line / IDE.

começar com espaços de códigos visuais em estúdio - Cloud IDE 4
Screenshot: O Visual Studio IDE Codespaces


Editar, Consolidar, uma Sincronização de Alterações de Código usando o Visual Studio Codespaces

Aqui está uma visão geral de abrir o Visual Studio Codespaces editor, fazendo algumas alterações no código, e comprometendo-se as alterações de volta para o Repositório no GitHub para um Codespace.

  1. dentro da área de trabalho no lado esquerdo da tela, clique em um arquivo no projeto para abri-lo dentro do editor.

    Visual Studio Codespaces baseado em Web Editor

    o Visual Studio Codespaces baseado em Web Editor
  2. Fazer algumas alterações para o arquivo, em seguida, salve-os clicando no hambúrguer de menu no canto superior esquerdo, e seleccionar o Ficheiro e, em seguida, Salvar.

    Codespaces Visuais De Estúdio-Menu Gravar Ficheiros

    Codificadores Visuais De Estúdio-Menu Gravar Ficheiros

    Nota: Você pode ver que existem várias opções de menu disponíveis no Visual Studio Codespace editor, e que é a mesma experiência VS estilo de código que você cresceu a amar.

  3. para enviar as suas alterações para o repositório Git “local” do Visual Studio Online (que foi clonado a partir do GitHub), clique na página de controle de origem do lado esquerdo da janela, em seguida, use a UI para adicionar alterações e enviá-las.

    Visual Studio Codespaces - Separador Controlo de Origem

    o Visual Studio Codespaces - Separador Controlo de Origem
  4. uma Vez que as alterações são confirmadas, você pode sincronizá-los para o Repositório no GitHub clicando nas reticências (…) no separador Controlo de Origem e, em seguida, selecionando a opção de Sincronização.

    Visual Studio Codespaces - Controle de Origem guia - Sync Menu

    o Visual Studio Codespaces - Controle de Origem guia - Sync Menu
  5. Você será solicitado com uma confirmação de que você quer “empurrar e puxar compromete-se a e a partir de ‘a origem/o mestre'”. Carregue em OK para prosseguir com a acção de sincronização.

    Visual Studio Codespaces - Confirmar a Sincronização

    o Visual Studio Codespaces - Confirmar a Sincronização
  6. A primeira vez que você fizer isso, o Visual Studio Online irá abrir uma nova guia do navegador para o GitHub Autorização de página, então você pode autorizar o Visual Studio Codespaces, com as necessárias permissões necessárias contra o GitHub para a sua conta.

    Visual Studio Codespaces de linha de comandos para o GitHub permissões

    o Visual Studio Codespaces de linha de comandos para o GitHub permissões
  7. Clicando em Autorizar o botão autorizar o Visual Studio Codespaces para acessar sua Conta do GitHub.

  8. após o Visual Studio Codespaces ser autorizado, ele vai completar a operação de sincronização contra o repositório GitHub. Agora você pode navegar para o GitHub para ver que o commit foi realmente sincronizado.


Instalar as Extensões de dentro do Visual Studio Codespaces

O Visual Studio Codespaces baseado na web editor é construído sobre a base de Código do Visual Studio (VS Código). Como tal, ele compartilha muitas coisas, incluindo uma interface / experiência familiar do Usuário, e a capacidade de instalar vs extensões de código. Isto permite-lhe essencialmente usar o mesmo editor de código VS com extensões instaladas a partir do seu navegador web, em qualquer dispositivo!

você pode instalar extensão em Codespaces de estúdio Visual da mesma forma que instalar extensões em VS Código.

  1. abra a página de extensões, carregando no ícone do lado esquerdo do editor
  2. Procure e localize a(s) Sua (s) extensão (s) de escolha.
  3. clique no botão Instalar para a extensão para instalá-lo dentro do Editor Visual Studio Codespaces.
começar com espaços de códigos de estúdio Visual - Cloud IDE 5
Screenshot: Instalar Extensões no Visual Studio IDE Codespaces


o Visual Studio Codespaces Recursos em seu Azure Assinatura

Quando você criar um Visual Studio Codespaces Plano de Faturamento, o plano é cobrado contra o Azure Assinatura. Isto significa que o plano de faturamento é criado dentro de sua assinatura Azure, e reside ao lado de todos os seus outros recursos Azure.

  • introdução com o Visual Studio Codespaces - Nuvem IDE 6
    VS Codespaces Plano de Faturamento dentro Azure
  • introdução com o Visual Studio Codespaces - Nuvem IDE 7
    VS Codespaces Plano de Faturamento dentro do Grupo de Recursos


Enrole

Como você pode ver, o Visual Studio Codespaces (anteriormente Visual Studio On-line), é bastante fácil de começar a usar. Além disso, usando o Visual Studio Code IDE interface de usuário e experiência faz com que o editor de Codespaces VS familiar para usar. Você pode até mesmo instalar extensões em espaços de Codespaces visuais de estúdio!

Happy coding!

P. S. originalmente anunciado em maio de 2019 como Visual Studio Online (VSO), é incrível finalmente ter acesso público e ser capaz de começar a experimentar / usar espaços de Codespace Visual Studio.

Sobre o Autor

Microsoft MVP

Chris é o Fundador da Build5Nines.com e um Microsoft MVP em Azure & IoT com 20 anos de experiência projetando e construindo Cloud & sistemas empresariais. Ele também é certificado pela Microsoft: Azure Solutions Architect, developer, Microsoft Certified Trainer (MCT), e Cloud Advocate. Ele tem uma paixão pela tecnologia e compartilhar o que ele aprende com os outros para ajudá-los a aprender mais rápido e ser mais produtivo.

Deixe uma resposta

O seu endereço de email não será publicado.