Configurar o seu ambiente dev com Visual Studio Código

Concluído

Visual Studio Code foi eleito o ambiente de desenvolvimento web mais popular no inquérito Stack Overflow 2018. É gratuito, disponível em Windows, Linux e macOS, e tem suporte incorporado em Git, uma comunidade de apoio ativa, uma rica galeria de extensões, e IntelliSense para auto-prenunciação de código.

Configurar Visual Studio Código para trabalhar com a WSL

Visual Studio O Código contém uma linha de comando incorporada que se integra com a sua distribuição WSL Linux para estabelecer um fluxo de trabalho sem emenda entre o seu editor de código e a sua ferramenta Ubuntu e PowerShell.

Instale Visual Studio Código e Git para Windows

  1. Descarregue Visual Studio Código para Windows: https://code.visualstudio.com . Visual Studio O código também está disponível para o Linux, mas queremos instalar a versão Windows para podermos editar ficheiros de projeto a partir do Windows OS. Ainda poderá integrar-se com a linha de comando e ferramentas de distribuição do Linux.

  2. Quando abrires Visual Studio Código pela primeira vez, provavelmente terás um erro: o Git não foi encontrado. Instale-o ou configufique-o utilizando a definição 'git.path'. É necessário instalar o Git para alimentar o painel de controlo de origem no espaço de trabalho Visual Studio Código. Descarregue e instale o Git para Windows a partir do website git-scm utilizando o Assistente de Instalação incluído: https://git-scm.com/download/win .

Instale a extensão Visual Studio Code Remote - WSL

Em Visual Studio Código, abra a vista extensões (selecione > Ver Extensões ou Ctrl+Shift+X) e procure por "wsl". Escolha a extensão Remote – WSL como se vê abaixo (deve estar no topo da lista) e prima Instalar.

Extensão remota - WSL.

A extensão Remote - WSL permite-lhe utilizar o editor de Código Visual Studio no contexto da WSL com suporte total para funcionalidades linguísticas como IntelliSense, navegação por código, depurar e muito mais. Também pode optar por instalar o pacote de extensões de Desenvolvimento Remoto, que agrega as três extensões remotas Visual Studio Code para suportar o trabalho sobre sSH e dentro dos contentores Docker, além da WSL.

Altere a camada de terminais padrão para WSL

Em Visual Studio Código, selecione > Ver Terminal (ou selecione Ctrl+', utilizando o caracteres de backtick). Uma janela de linha de comando (ou concha terminal) abrir-se-á na parte inferior da janela do código Visual Studio. Esta janela permite-lhe executar Node.js e outras ferramentas de linha de comando sem deixar Visual Studio Código. O terminal predefinido é PowerShell.

Para alterar o desabrilho de terminais de código Visual Studio predefinido, abra o terminal de entrega e escolha Select Default Shell. Abrir-se-á uma janela de definições com uma lista de conchas disponíveis. Selecione WSL Bash na lista. (Também pode abrir o seletor de terminais predefinido a partir da Paleta de Comando, selecione a tecla F1 e introduza o Terminal: Selecione Predefinido .)

Screenshot de personalizar a concha em Visual Studio Código.

Onde armazenar ficheiros de projetos

Como aprendeste na Unidade 3 deste curso, os ficheiros Windows e Linux estão armazenados em diferentes diretórios. Recomendamos guardar ficheiros de projetos no seu Windows diretório de casa de utilizadores. Esta configuração permite que Windows aplicações, incluindo Visual Studio Código, acedam e manipulam esses ficheiros, permitindo ainda aceder aos mesmos a partir do seu terminal Linux.

Quaisquer ficheiros armazenados C:\Users\<windows-user-name>\ mapeiarão para este local no seu distro WSL: /mnt/c/Users/<windows-user-name> .

Importante

Nunca deve editar ficheiros dentro da raiz da WSL a partir de aplicações Windows.

Atualize a sua app de Node.js em execução no Linux e acompanhe as alterações com o Git

Git é um sistema de controlo distribuído de código aberto. Basicamente uma ferramenta para armazenar ficheiros que mantém um histórico de mudanças, permite que vários desenvolvedores trabalhem em código em paralelo. Também trata da distribuição dos ficheiros através de máquinas locais e de um repositório remoto (GitHub). Se você está interessado em aprender mais sobre Git, consulte a ligação para mais informações sobre os recursos no final deste curso.

  1. A partir de um Windows Comando Prompt, crie um diretório para armazenar o seu projeto no seu diretório de casa de utilizador: mkdir GitHub\HelloWorld .

  2. Navegue para a pasta que criou: cd GitHub\HelloWorld . Inicialize o diretório como um git repo: git init .

  3. Abra o seu projeto em Visual Studio Código executando code . Este começa uma nova instância de Visual Studio Código aberto à sua pasta em Windows. Se tiver Visual Studio Código já em execução, pode utilizar o comando do menu pasta > 'Ficheiro' para abrir a pasta HelloWorld.

  4. Utilizando o Visual Studio Code File Explorer ou File > New File, crie um ficheiro com o conteúdo .gitignore abaixo para impedir que o Git rastreie os ficheiros de dependência de Node.js do seu projeto e construa a saída:

    bin
    node_modules
    

    Pode saber mais sobre .gitignore ficheiros a partir da documentação do Git e através da revisão do Node.gitignore, que adiciona outros ficheiros e pastas comuns Node.js que poderá querer excluir.

    Guarde o ficheiro > 'Guardar ficheiros' (Ctrl+S). Visual Studio A função de poupança automática do Código (File > Auto Save) guarda automaticamente as alterações após um atraso ajustável (predefinido 1000 ms).

  5. Com a configuração inicial do Git feita, reabra a pasta em WSL utilizando a extensão Visual Studio Code Remote - WSL executando Remote-WSL: Reabre a pasta em WSL a partir da Paleta de Comando (F1). Isto reiniciará Visual Studio Código ligado à WSL, conforme indicado na Barra de Estado.

    Indicador remoto da barra de estado WSL.

    Se clicar no indicador Remote - WSL Status Bar, apresenta uma lista dos comandos Remote-WSL.

    Comandos remotos da WSL.

  6. Abrir um novo terminal em Visual Studio Código (Ver > Terminal Ctrl+'). Agora que Visual Studio Código está a funcionar no contexto da WSL, verás que o terminal está a usar bash ou a tua concha Linux padrão.

  7. Crie uma aplicação web com o Express entrando express --view=pug e npm install depois. Inicie a aplicação num servidor local utilizando npm start . Abra o seu navegador de internet e vá ao local local:3000.

  8. Utilizando o Explorador de Ficheiros, abra o index.pug ficheiro na views pasta.

  9. Em Visual Studio Código, altere o index.pug ficheiro para que pareça este código:

    extends layout
    
    block content
      h1 #{title}
      p I'm over the moon!
      img(src="https://docs.microsoft.com/learn/media/crescent-timeline.png", alt="Moon Photo", srcset="")
    

    Nota

    Opcional: Tente adicionar outra imagem começando a escrever img. A funcionalidade Visual Studio Code IntelliSense fornecerá opções autocompletas, incluindo img:srcset. Selecione essa opção e insira https://docs.microsoft.com/learn/media/Moon-full-minus1.png como fonte.

  10. Guarde as alterações e, em seguida, refresque o seu navegador (F5). As suas alterações, incluindo a imagem que adicionou, devem agora aparecer. Sempre que escoar alterações adicionais no ficheiro, guarde o ficheiro e refresque o navegador. As alterações serão refletidas enquanto o seu servidor estiver em funcionamento.

  11. Deixe o servidor de http dentro do seu terminal selecionando Ctrl+C.

  12. Introduza git status no seu terminal para ver todos os ficheiros que foram criados ou alterados na pasta do projeto. Você pode encontrar links para mais informações sobre como usar Git com Visual Studio Código na secção de recursos no final deste curso.