Extensões úteis de desenvolvimento no VSCode

O presente post apresenta as extensões que tenho no VSCode, que considero útil para o desenvolvimento de projetos em PHP, JS, Java, React Native, Flutter, entre outros que são na formatação de codificação e comunicação de containers dos ambientes Docker.

Auto Rename tag: Aumenta a produtividade na codificação através da IA Tabnine.

Path Intellisense: Autocompletar nomes de arquivos nos diretórios, onde está o projeto.

Prettier: Deixa o código fonte formatado, conforme o padrão estabelecido pelo time de desenvolvimento.

Quokka: Exibe o ícone das extensões dos arquivos.

Beautify: Habilita a execução de JavaScript de modo a customizar.

Live Server: Servidor local interno no VSCode para páginas estática (HTML, CSS, JS).

Javascript (ES6) Code Snippets: Atalhos de autocompletar do JavaScript.

ESLint: Verifica se código está no padrão, conforme a documentação da linguagem JavaScript exige.

Paste JSON as Code: Formata o JSON.

Remote – Containers: Comunica com os containers Docker/Podman.

GitLens: Visualiza o histórico de commits já realizado.

Markdown All in One: Formata e visualiza códigos em markdown.

Bookmarks: Marcador de linhas, como por exemplo TODOs no código.

Settings Sync: Sincroniza configurações do repositório remoto do GitHub, Bitbucket, Gitlab.

PHP IntelliSense: Autocompletar e verifica se está de acordo com a documentação do PHP.

Language Support for Java: Formata código Java.

Debugger for Java: Debugg de códigos Java.

Test Runner for Java: Execução de testes unitários e integrados.

Maven for Java: Gerenciador de dependências de bibliotecas do Java.

Project Manager for Java: Gerenciador de projetos Java.

React Native Tools: Integração de comandos e debug do React Native.

Flutter: Suporte e debug da linguagem Dart e Flutter.

Vistual Studio IntelliCode: Identifica a linguagem pela extensão do arquivo.

Existem outras extensões de desenvolvimento no VSCode, apenas compartilhei as extensões que costumo utilizar no VSCode. Caso utilize alguma extensão que não foi mencionada neste post, escreva nos comentários.

Feito!

Utilizando o MongoDB no VSCode

O presente post é explicar de forma simples como utilizar o MongoDB no VSCode.

Após instalar o VSCode, caso ainda não tenha instalado.

Na guia de extensão do VSCode, pesquise por "MongoDB for VSCode" e marque para instalar.

Adicione uma conexão na extensão que acabou de instalar, informe a URL e credenciais de acesso do MongoDB, pode ser o cluster atlas MongoDB (serviço cloud) ou no ambiente MongoDB na máquina local ou MongoDB no Docker.

Para desativar a mensagem de aviso toda vez que for executar, verique o ícone de uma engranagem da extensão e desmarque a opção de aviso.

Exemplo da minha collection, só para ilustrar um pouco da sintaxe do MongoDB, adapte com a sua collection, ok?

use('empresa');

db.functionarios.insertOne({_id:1, "nome": "Bjorn Cyril"})

db.funcionarios.find();

db.functionarios.insertOne({_id:2, "nome": "Zorzo"})

db.funcionarios.update({id_:2}, {
  $set: {
     "nome": "Zorzo Astrogildo"
  }})

Feito!

Configurando o VSCode para C e C++

O objetivo deste post é explicar que pode utilizar o editor VSCode para programar em C e/ou C++

Instalar o VSCode

No Linux (Debian/Ubuntu)

$ wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
$ sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
$ sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg]
https://packages.microsoft.com/repos/code stable main" < /etc/apt/sources.list.d/vscode.list'
$ sudo apt install apt-transport-https
$ sudo apt update
$ sudo apt install code

No Windows

Caso ainda não tiver instalado o VSCode Setup do VSCode

Instale o MinGW (GCC for Windows)

Adicione o MinGW no PATH

No editor de variáveis de ambiente do Windows, Propriedades do Sistema, Variáveis de Ambiente, selecione PATH, editar, novo e coloque o caminho C:\MinGW\bin e clique em OK.

Instalando as extensões necessárias para a linguagem C e C++ no VSCode

No menu da barra lateral (item 5 no canto esquerdo) do VSCode, pesquise a extensões C/C++ IntelliSense, C/C++ Compile Run

Pronto, seu VSCode está habilitado para programar em C e C++

Teste na prática

Agora com as extensões C e C++ adicionadas, vamos compilar um código em C no VSCode

Crie um arquivo e salve com a extensão .c

hello-world.c

#include <stdio.h>
#include <stdlib.h>
int main() 
{
  printf("Hello World em C no VS Code!");
  return 0;
}

Tecle F6 para compilar e gerar o executável. Depois no terminal interno do VSCode, execute o nome do executável gerado que é o mesmo nome do arquivo, só executar no terminal.

Feito!

Configurando o VSCode para Java

Na postagem Configurando ambiente de desenvolvimento Java no Linux foi detalhado a instalação e configurado do setup Java na máquina. O objetivo deste post é explicar que pode utilizar o editor VSCode para programar em Java. Então, considerando que o seu setup Java está já funcional, caso contrário, verifique no link da postagem anterior, ok?

Instalar o VSCode

No Linux (Debian/Ubuntu)

$ wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg

$ sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/

$ sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" < /etc/apt/sources.list.d/vscode.list'
$ sudo apt install apt-transport-https

$ sudo apt update

$ sudo apt install code

Habilitar as extensões

Com o VSCode instalado, abre em seguida e vai em "Extensions" (Ctrl+Shift+K) e pesquise as extensões que ajudam ao programar em Java para instalar.

Extensões: Java Extension Pack,Spring Boot Extension Pack, Spring Boot Dashboard, lombok

Se versiona o projeto com Git, então a extensão "Git Blame" não deve faltar. 😂

Criar projeto Java pelo VSCode

Pressione o atalho Ctrl+Shift+P digite Java overview

Para Projeto Java simples com JUnit, escolha maven-archetype-quickstart

Para Projeto Java Web com Maven, escolha maven-archetype-webapp

Para Projeto Java com Spring Boot, Ctrl+Shift+P Ctrl+Shift+P, digite Spring "Initializr: Generate a Maven Project" OU "Spring Initializr: Generate a Grandle Project"segue os passos normalmente.

Adicionar e remover dependências no projeto rapidamente

No arquivo pom.xml aberto, clica com botão direito, seleciona "Edit starters" e escolhe as dependências que deseja adicionar ou remover.

Tomcat

No Java overview instalar a extensão Tomcat

Adicionar o caminho do diretório Tomcat em TOMCAT SERVERS

clicar em "+" e adicionar o diretório do Apache Tomcat

clicar com botão direito em apache-tomcat e iniciar

Em MAVEN PROJECTS, verifique em war

war
  war:war clicar na seta ->

Verificar em target que foi gerado o arquivo.war

Clicar com botão direito do arquivo.war e "Run on Tomcat Server"

Clicar com botão direito do arquivo.war e "Open on Browser"

Irá abrir o browser default na URL http://localhost:8080/ContextoProjeto

OBS: No lugar de "ContextoProjeto" corresponde ao nome do projeto

Referências

https://code.visualstudio.com/docs/java/extensions

Feito!

Instalando o VSCode no Linux

O que é VSCode?

O Visual Studio Code é um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS. Ele inclui suporte para depuração, controle Git incorporado, realce de sintaxe, complementação inteligente de código, snippets e refatoração de código.

Instalação do VSCode
Primeiro faça o download conforme a distro e arquitetura 32 bits ou 64 bits no https://code.visualstudio.com/download

OBS:

Até a presente data de publicação desta postagem, a versão do VSCode é 1.33.1, então verifique o arquivo .deb ou .rpm no download na instalação que segue substituindo pela versão atual.

Debian e Ubuntu:
$ sudo dpkg -i code_1.33.1-1554971066_amd64.deb

CentOS e Fedora:
$ sudo rpm -i code-1.33.1-1554971173.el7.x86_64.rpm

Após instalar o VSCode, o atalho para abrir pelo terminal é: code.

Feito!