Dicas de Visual Studio Code: Git Graph e acessando repositórios Git no browser | pt6

Renato Groffe
4 min readJul 18, 2021

--

Neste quinto artigo da série com dicas e truques no uso do Visual Studio Code abordarei as extensões gratuitas Git Graph, GitLens e gitlink, úteis em interações com repositórios Git.

Os artigos anteriores desta série podem ser acessados por meio dos seguintes links:

Dicas de Visual Studio Code: integração com Git via Terminal e Kubernetes Templates | pt5

Dicas de Visual Studio Code: testes de APIs REST e integração com Azure DevOps | pt4

Dicas de Visual Studio Code: extensões para MongoDB e Git | pt3

Dicas de Visual Studio Code: extensões para Redis e geração de arquivos .gitignore | pt2

Dicas de Visual Studio Code: extensão para Kubernetes | pt 1

Git Graph

O Git Graph oferece uma visualização do histórico de alterações em um repositório Git no formato de um grafo. Trata-se de uma extensão gratuita e que pode ainda ser facilmente utilizada em conjunto com soluções de hospedagem de código como Azure DevOps, GitHub, Bitbucket e GitLab:

A próxima imagem traz um exemplo deste grafo listando as alterações executadas em um repositório Git no Azure DevOps. A extensão Git Graph disponibiliza inclusive funcionalidades que permitem a execução de ações como merges e criação de novas branches, por exemplo:

Clique nesta imagem para visualizar com uma melhor resolução

Uma vez instalado, podemos acessar o Git Graph a partir da barra inferior do Visual Studio Code:

Ou através de um botão (View Git Graph) dentro de Source Control:

Acessando repositórios Git no browser com GitLens e gitlink

Já discuti a utilização do GitLens anteriormente na parte 3 desta série.

Dentre suas inúmeras funcionalidades, o GitLens também oferece a possibilidade de acessar via browser um arquivo em seu repositório correspondente. Temos para isto as opções Open File on Remote e Open File on Remote From…:

Ao utilizar a opção Open File on Remote clicando sobre um arquivo será aberto no browser sua versão para a branch selecionada naquele momento (ajustes neste exemplo envolvendo um repositório do GitHub):

Clique nesta imagem para visualizar com uma melhor resolução

Com Open File on Remote From… definimos a branch do arquivo a ser aberto no browser (desta vez a própria main):

Clique nesta imagem para visualizar com uma melhor resolução

Já com a extensão gitlink podemos compartilhar um link que aponta para uma linha específica de código de um arquivo em uma branch específica ou, até mesmo, acessá-la via browser. Trata-se de uma capacidade muito interessante, sobretudo para o compartilhamento de códigos no trabalho em equipe (um link apontando para uma feature ou mudança específica pode ser facilmente postado em uma ferramenta de chat ou colaboração):

Estas 2 capacidades são oferecidas por meio das opções Goto Online Link e Copy Online Link:

Na próxima imagem podemos observar um exemplo de uso de Copy Online Link com um repositório do GitHub:

Clique nesta imagem para visualizar com uma melhor resolução

Já na imagem seguinte temos o equivalente com Goto Online Link:

Clique nesta imagem para visualizar com uma melhor resolução

Assim como no caso do Git Graph, as extensões GitLens e gitlink são totalmente compatíveis com soluções baseadas em Git como Azure DevOps, GitHub Actions, Bitbucket e GitLab.

--

--

Renato Groffe
Renato Groffe

Written by Renato Groffe

Microsoft Most Valuable Professional (MVP), Multi-Plataform Technical Audience Contributor (MTAC), Software Engineer, Technical Writer and Speaker

No responses yet