A extensão que vai transformar a forma como você usa o VSCode com o Docker!
Tags: docker, vscode, extension, productivity
Published: 2020-04-03 16:17:56

_Photo por Guillaume Bolduc no Unsplash_

Se você é dev, como eu, então provavelmente você já deve ter trabalhado com o [Docker](https://www.docker.com/) em algum momento da sua vida. O Docker é uma ferramenta incrível de desenvolvimento porque ela permite que você não se preocupe em instalar algumas coisas no seu próprio computador, por exemplo, você pode subir um contêiner do MongoDB sem muito esforço. Além disso, utilizando contêineres, nós temos a capacidade de empacotar nossas aplicações e ter certeza de que elas vão funcionar da melhor forma possível em todos os sistemas que precisarmos.

Porém, um dos problemas que muitas pessoas enfrentam é ter que gerenciar o runtime do Docker através da linha de comando enquanto faz seu trabalho em outras ferramentas, como é o caso, por exemplo, de um desenvolvimento de aplicações usando o [VSCode](https://code.visualstudio.com/?WT.mc_id=blog-devto-ludossan), se você é uma dessas pessoas, então eu tenho uma excelente notícia.

[Recentemente](https://devblogs.microsoft.com/visualstudio/visual-studio-code-docker-extension-1-0-better-than-ever/?WT.mc_id=devto-blog-ludossan) a [extensão do Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker&WT.mc_id=blog-devto-ludossan) para o [VSCode](https://code.visualstudio.com/?WT.mc_id=blog-devto-ludossan) saiu do status de preview e entrou na versão 1.0, que é o que chamamos de GA (_General Availability_), quando um sistema fica aberto para uso público! Se você não conhece essa extensão, vamos conversar um pouco sobre ela e entender como ela pode te ajudar __muito__.

![](https://devblogs.microsoft.com/visualstudio/wp-content/uploads/sites/4/2020/03/Docker-GA-768x167.png)

# Para que serve?

A [extensão do Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker&WT.mc_id=blog-devto-ludossan) para o [VSCode](https://code.visualstudio.com/?WT.mc_id=blog-devto-ludossan) é uma caixa de ferramentas muito bem elaborada que contem a maioria das coisas que você precisa para manipular contêineres e imagens do Docker sem sair do [VSCode](https://code.visualstudio.com/?WT.mc_id=blog-devto-ludossan) por um minuto sequer.

Ela facilita não só a criação de novos contêineres mas também o gerenciamento de imagens, conexões, volumes e muito mais, vamos passar pelas principais funcionalidades da [extensão](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker&WT.mc_id=blog-devto-ludossan) e mostrar o que há de novo na versão 1.0.

## Dockerfiles do jeito certo!

Uma das funcionalidades que, para mim, é um grande salvador de vidas é a capacidade de adicionar o famoso intellisense do [VSCode](https://code.visualstudio.com/?WT.mc_id=blog-devto-ludossan) para arquivos do tipo [Dockerfile](https://docs.microsoft.com/virtualization/windowscontainers/manage-docker/manage-windows-dockerfile?WT.mc_id=blog-devto-ludossan), ou seja, você não precisa decorar todos os comandos que um Dockerfile tem para poder criar seus contêineres de forma rápida e prática.

![](https://github.com/microsoft/vscode-docker/raw/master/resources/readme/dockerfile-intellisense.png)

Todos que usam o Docker sabem que o Dockerfile é uma parte indispensável do pipeline de desenvolvimento porque ele permite que você descreva seus contêineres de forma declarativa e execute com um simples `docker build`.

Além disso a [extensão](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker&WT.mc_id=blog-devto-ludossan) também permite que criemos Dockerfiles para uma série de runtimes e frameworks de forma rápida e prática, basta abrir a _Command Palette_ do [VSCode](https://code.visualstudio.com/?WT.mc_id=blog-devto-ludossan) através do `F1` ou `CTRL/CMD + Shift + P` para criar o seu Dockerfile:

![](https://s5.gifyu.com/images/Apr-03-2020-12-15-31.gif)

Além disso, como é possível ver na animação, a [extensão](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker&WT.mc_id=blog-devto-ludossan) já cria um `docker-compose` para debug e também final, além de criar as tasks necessárias no [VSCode](https://code.visualstudio.com/?WT.mc_id=blog-devto-ludossan) para podermos iniciar o nosso contêiner tranquilamente.

### Docker-Compose também!

Além de prover o intellisense para o Dockerfile, os arquivos `docker-compose` também ganham mais inteligência, tendo seu próprio autocomplete contextual:

![](https://github.com/microsoft/vscode-docker/raw/master/resources/readme/dockercomposeintellisense.png)

Além do intellisense de comandos, temos também o intellisense de imagens diretamente do repositório, mostrando uma lista das imagens mais recentes e mais usadas:

![](https://github.com/microsoft/vscode-docker/raw/master/resources/readme/dockercomposeimageintellisense.png)

Ao pressionarmos `CMD/CTRL + .` vamos mostrar o peek das imagens mais populares no DockerHub, porém se continuarmos digitando, iremos buscar a imagem que queremos:

![](https://github.com/microsoft/vscode-docker/raw/master/resources/readme/dockercomposesearch.png)

## Docker View

Ao instalar a [extensão](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker&WT.mc_id=blog-devto-ludossan), vamos ter uma série de paineis que serão mostrados na lateral do nosso editor, Estes paineis são completamente editáveis e mostram as imagens e os contêineres que temos criados na nossa máquina

> __Importante__: Para que a extensão funcione da forma correta é necessário que você tenha o Docker instalado e rodando na sua máquina.

![](https://github.com/microsoft/vscode-docker/raw/master/resources/readme/docker-view-context-menu.gif)

Além disso ela também mostra as imagens presentes no seu Hub do Docker:

![](https://s5.gifyu.com/images/Apr-03-2020-12-31-29.gif)

Com isso você pode dar um _pull_ ou abrir as imagens diretamente no navegador.

A [extensão](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker&WT.mc_id=blog-devto-ludossan) também permite que você adicione outros registros além do Docker Hub, podendo ser um registro pessoal, um [registro na Azure](https://docs.microsoft.com/azure/container-registry/?WT.mc_id=blog-devto-ludossan) ou qualquer outro tipo de local

![](https://github.com/microsoft/vscode-docker/raw/master/resources/readme/container-registry.png)

> Da mesma forma, a [extensão](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker&WT.mc_id=blog-devto-ludossan) já possui uma integração muito boa com o [Azure CLI](https://docs.microsoft.com/cli/azure/get-started-with-azure-cli?view=azure-cli-latest&WT.mc_id=blog-devto-ludossan#sign-in), permitindo que você possa controlar e integrar seus contêineres e registros diretamente do editor.

## Comandos do Docker direto no VSCode

A maioria dos comandos que temos no Docker como, por exemplo, `inspect`, `pull` e muito outros acabam sendo presentes no nosso _Command Palette_ dentro do [VSCode](https://code.visualstudio.com/?WT.mc_id=blog-devto-ludossan):

![](https://github.com/microsoft/vscode-docker/raw/master/resources/readme/command-palette.png)

## Debug direto do editor

Podemos também debugar uma aplicação [Node.js](https://docs.microsoft.com/azure/javascript/?WT.mc_id=blog-devto-ludossan) ou [.NET](https://docs.microsoft.com/dotnet/?WT.mc_id=blog-devto-ludossan) diretamente de dentro do contêiner.

Veja a [página de documentação](https://code.visualstudio.com/docs/containers/debug-common?WT.mc_id=blog-devto-ludossan) e também a [página de configuração da extensão](https://code.visualstudio.com/docs/containers/reference?WT.mc_id=blog-devto-ludossan). Se precisar de ajuda veja as ["receitas" de como iniciar um debug com Node.js](https://code.visualstudio.com/docs/nodejs/debugging-recipes?WT.mc_id=blog-devto-ludossan).

# O que veio de novo na 1.0

## Suporte a Python

A versão 1.0 da extensão trouxe melhorias principalmente para desenvolvedores Python, da mesma forma que podemos criar Dockerfiles para Node e outras linguagens, agora também podemos fazer o mesmo para Python:

![](https://devblogs.microsoft.com/visualstudio/wp-content/uploads/sites/4/2020/03/Docker-GA-Release-Scaffold-3.gif)

E isso também se estende para a criação dos arquivos `docker-compose`:

![](https://devblogs.microsoft.com/visualstudio/wp-content/uploads/sites/4/2020/03/Python-Debugging-1024x496.png)

## Custommização de comandos

Quando executamos um comando direto da _palette_ ou nos menus de contexto do explorer, a extensão executa estes comandos direto para o Docker em nosso nome. Agora é possível customizar a maioria destes comandos, veja a [documentação](https://code.visualstudio.com/docs/containers/reference?WT.mc_id=blog-devto-ludossan#_command-customization) para saber como fazer isso!

## Comandos em múltiplos contêineres ou imagens

Esta é uma das melhores atualizações, pois permite que você execute um comando sobre diversos recursos ao mesmo tempo, isso é muito útil quando queremos limpar o nosso computador de imagens ou contêineres antigos, isso não é possível no Docker CLI sem um pouco de scripting.

![](https://s5.gifyu.com/images/Apr-03-2020-13-09-29.gif)

Podemos fazer o mesmo com imagens:

![](https://s5.gifyu.com/images/Apr-03-2020-13-12-56.gif)

Podemos também iniciar ou realizar qualquer comando diretamente em vários recursos:

![](https://devblogs.microsoft.com/visualstudio/wp-content/uploads/sites/4/2020/03/MultiSelect-1024x787.png)

# Fique ligado!

Fora estas atualizações, temos mais [uma lista](https://devblogs.microsoft.com/visualstudio/visual-studio-code-docker-extension-1-0-better-than-ever/?WT.mc_id=devto-blog-ludossan) de outras novidades que vieram na versão mais nova, então fique ligado e não deixe e atualizar o seu editor para usufruir das melhores extensões :D


Você tem outras sugestões de extensão? Usa outras ferramentas? Conta nos comentários! Ou então me chama nas minhas redes sociais :D

Não deixe de acompanhar mais do meu conteúdo no [meu blog](https://blog.lsantos.dev/?utm_source=devto&utm_medium=article&utm_campaign=docker_vscode) e se [inscreva na newsletter](https://blog.lsantos.dev/signup?utm_source=devto&utm_medium=article&utm_campaign=docker_vscode) para receber notícias semanais!

| [Website](https://lsantos.dev) | [GitHub](https://github.com/khaosdoctor) | [Facebook](https://fb.com/lsantos.dev) | [LinkedIn](https://linkedin.com/in/lhs-santos) | [Twitter](https://twitter.com/_staticvoid)
|---|---|---|---|---