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
Para 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.
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:
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:
- Linha e coluna do local onde está o ponteiro de edição. No nosso caso é Linha 1 e Coluna 16.
- Codificação de caracteres do arquivo. No nosso caso é UTF-8.
- Sequência de código para término de linha. No nosso caso é CLRF.
- 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.
- 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:
- Explore: para exibir ou esconder a árvore de arquivos e diretórios contidos na pasta aberta na ferramenta.
- 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 textoimg
. - 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.
- 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
.
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.
- Instalar no Node.js.
- Abrir o console (prompt de comando) e executar o seguinte comando:
npm install http-server -g
- 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.
- 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: - 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 porta8081
. - Para testar, basta agora pressionar as teclas
CTRL+SHIFT+B
. Será iniciado o servidor HTTP na porta 8081.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. - 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/
:
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.
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.
CurtirCurtir
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!
CurtirCurtir
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!
CurtirCurtir
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
CurtirCurtir