Desenvolva sites com Visual Studio Code

O Visual Studio Code é uma ferramenta de desenvolvimento multiplataforma. Ele é leve, possui recursos como highlight (destaque para palavras especiais do código) e possui integração com o Git, repositório para controle de versões de código.

Outro recurso presente também no Visual Studio Code é tarefas de depuração de código e a possibilidade de intregação com o Node.js para execução de Javascript.

Instalando o Visual Studio Code

desenvolva-sites-com-visual-studio-code-multiplataformaPara instalar o Visual Studio Code, você deve baixar e executar o instalador através do site https://code.visualstudio.com/Download. Ele está disponível em diferentes plataformas (Linux, Mac OS X e Windows).

Conhecendo o Visual Studio Code

O Visual Studio Code permite que você trabalhe com arquivos individuais ou com uma pasta contendo vários arquivos. Quando desenvolvemos Sites, o ideal é abrirmos a pasta raiz do site de onde teremos acesso a todos os nossos arquivos.

Tela Inicial do Visual Studio Code
Tela Inicial do Visual Studio Code

Para abrir uma pasta, clique em “Open Folder” ou acesse o item de menu “File” > “Open Folder”. E quando abrimos a pasta, já é mapeado todo conteúdo da pasta no Visual Studio Code:

Pasta Selecionada no Visual Studio Code
Pasta Selecionada no Visual Studio Code

Note que na parte inferior da ferramenta são exibidas informações sobre o arquivo aberto no editor. Se clicarmos nessas opções, o Visual Studio Code irá exibir outras opções possíveis. Para nosso exemplo acima, as informações exibidas são:

  1. Linha e coluna do local onde está o ponteiro de edição. No nosso caso é Linha 1 e Coluna 16.
  2. Codificação de caracteres do arquivo. No nosso caso é UTF-8.
  3. Sequência de código para término de linha. No nosso caso é CLRF.
  4. Tipo do arquivo mostrado no editor. No nosso caso é HTML. Aliás isso permite identificar quais palavras serão destacadas (highlight) no texto. Nesse site você pode verificar quais linguagens são suportadas pelo Visual Studio Code.
  5. Por fim tem ainda uma carinha (smile) que permite a você dar sua opinião sobre a ferramenta.

    O Visual Studio Code ainda está em uma versão preview. Portanto, qualquer opinião é relevante para aperfeiçoar ainda mais a ferramenta.

No lado esquerdo da ferramenta temos também as opções:

  1. Explore: para exibir ou esconder a árvore de arquivos e diretórios contidos na pasta aberta na ferramenta.
  2. Search: para busca de informações. Essa busca envolve tanto nome de arquivos e pastas como também o conteúdo dos arquivos. Por exemplo, se procurarmos por img, o Visual Studio Code irá exibir todos os arquivos que contém o texto img.

    Busca dentro do Visual Studio Code
    Busca dentro do Visual Studio Code
  3. Git: Quando a pasta que abrimos no Visual Studio Code é a pasta raiz de um repositório Git, aqui teremos opções para executar comandos Git como Pull, Push e Commit.

    Integração com Git
    Integração com Git
  4. Depuração: Permite definir como iremos testar nosso conteúdo. Aqui podemos configurar, por exemplo, uma aplicação em Javascript e executá-la via Node.js para poder testar nosso conteúdo da pasta. Essa configuração é feita através do arquivo launch.json.

    Depuração no Visual Studio Code
    Depuração no Visual Studio Code

Testando nosso Site num servidor Web local

Uma etapa importante no desenvolvimento de sites é termos disponível um servidor HTTP para testar nosso site. Para tanto, precisamos que a ferramenta de desenvolvimento nos ajude a publicar nossas páginas no servidor.

O Visual Studio Code permite configurar a tarefa de execução do conteúdo da pasta. E podemos fazer isso usando qualquer comando externo de linha de comando ou até scripts Javascript executados no Node.js.

Para nosso exemplo aqui, vamos usar o Node.js para publicar o conteúdo da pasta num servidor HTTP local.

  1. Instalar no Node.js.

    Instalando o Node.js
    Instalando o Node.js
  2. Abrir o console (prompt de comando) e executar o seguinte comando:

    npm install http-server -g

  3. Para testar, especificar o seguinte comando:

    http-server .

    Será iniciado um servidor HTTP por padrão na porta 8080 publicando o conteúdo da pasta onde o comando `http-server` foi executado.

  4. De volta no Visual Studio Code, vamos agora configurar a tarefa para executar nosso site no servidor HTTP disponibilizado pelo Node.js. Para tanto, pressionar as teclas CTRL+SHIFT+P. Será exibida uma caixa de busca. Escrever o texto “Configure” para selecionar a opção Configure Task Runner:

    Configurando tarefa de execução
    Configurando tarefa de execução
  5. Será então criado o arquivo tasks.json dentro de .vscode, criado na pasta que abrimos no Visual Studio Code. No arquivo vamos colocar o seguinte conteúdo:
    {
    	"version": "0.1.0",
    
    	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    	"command": "http-server",
    
    	// The command is a shell script
    	"isShellCommand": true,
    
    	// Show the output window only if unrecognized errors occur.
    	"showOutput": "silent",
    
    	// args is the HelloWorld program to compile.
    	"args": [".", "-p 8081"]
    }
    

    Note que estamos configurando a tarefa para executar o comando Shell http-server. Podemos ainda passar argumentos. No caso acima, estamos configurar o servidor HTTP para iniciar na pasta corrente e na porta 8081.

    Arquivo tasks.json criado.
    Arquivo tasks.json exemplo.
  6. Para testar, basta agora pressionar as teclas CTRL+SHIFT+B. Será iniciado o servidor HTTP na porta 8081.
    Executando o comando para iniciar o servidor HTTP
    Executando o comando para iniciar o servidor HTTP

    Pode ser necessário reiniciar o Visual Studio Code após a instalação do http-server para que o mesmo possa ser executado dentro da ferramenta.

  7. Podemos agora abrir o nosso site usando um browser através de um dos endereços mostrados no Visual Studio Code. Exemplo: http://localhost:8081/:

    Abrindo o site no servidor HTTP
    Abrindo o site no servidor HTTP

Quer obter mais dicas e sugestões? Comente aqui ou faça uma pergunta no Stack Overflow em Português com a tag “microsoft-edge”. E continue nos acompanhando no talkitbr.

Anúncios

4 comentários

  1. Olá Tudo bem?

    1- Seria possível este servidor local com o NodeJs comunicar com um banco de dados SQL Server 2014 Management Studio (obs: estou usando autenticação do Windows mesmo para conectar ao banco)? E se possível desenvolver um tutorial?
    Gostei muito da dica. Se possível juntamente com o AngularJs. Um exemplo simples de cadastro de nome e telefone. e uma consulta. A principal se consigo conectar com o banco.

    2- Aproveitando, neste poderia mostrar como funciona do Debugging do VSCode, juntamente com este servidor no Node (usando qualquer navegador, mas se possível Edge, Firefox)? Ex: quando há um erro para salvar no banco, ou a função de um botão gerar um erro para executar a ação.

    3- Seria também possível usar o banco usando o live-server do Nodejs?

    4- E uma sugestão para outro tutorial é dicas de quais extensões poderiamos usar e como as mesmas funcionam no Visual Studio Code.

    Desde já agradeço.

    Curtir

    • Olá, tudo bem? Bom, vou seguir a sua numeração para responder a cada pergunta:
      1- Sim, tem um cliente do Microsoft SQL Server para NodeJS.
      2- No artigo https://talkitbr.com/2016/02/26/crie-aplicacoes-javascript-com-typescript-no-visual-studio-code/, descrevo como faz para fazer debug de Typescript no VSCode. E recentemente escrevi outro artigo que mostra como acessar o MongoDB usando Typescript no Node.JS
      3- Acredito que sim. Não vejo porque não funcionaria.
      4- Legal a dica, valew! Agora estou focado em escrever a série com Typescript no VSCode. Ainda pretendo descrever como desenvolver apps com Typescript usando o ExpressJS e o Angular2. E no final de tudo fazer um bem bolado com MongoDB, ExpressJS, Angular2 e NodeJS, usando Typescript e VSCode. Mas depois eu prossigo fazendo revisões das extensões principais.

      Abraços e continue mandando dicas e sugestões. Valew!

      Curtir

      • Obrigado pelas respostas.

        Sobre o debugging->
        1- Eu já tinha visto este arquivo, mas eu usaria a mesma configuração para o AngularJS? No caso estou usando o Angular 1. (ps: estou bem no ínicio)
        2- Outra coisa é, eu consigo marcar o para Debugar no VSCode e executar minha aplicação pelo browser?(Ex: marcava em um ponto da function para verificar se está indo “pelo caminho certo”). – Não sei conseguir explicar corretamente- Ou isso ainda não é possível? Ou teria que usar uma extensão especifica?

        De qualquer maneira, obrigado!

        Curtir

      • Olá,

        1- Sim, acredito que a configuração pode ser a mesma.
        2- Você tem algumas opções de fazer o Attach do Browser com o VSCode. Tem por exemplo o Debugger For Chrome (https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome). Tem também o Debugger for Edge (https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge). Para tanto:
        – Pressione “F1”
        – Digite “ext Install Extensions”
        – Depois pressione “F1” e depois “debug” e então selecione a opção “Debugger For Chrome”

        Espero que tenha ajudado.

        Abraços,
        Joao

        Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s