GRADUAÇÃO

TDS
Responsive Web Development
Prof. Alexandre Carlos : [email protected]

alecarlosjesus
 UTILIZANDO VS-CODE
- GIT
- GITHUB
- PYTHON
 ATENÇÃO

Para iniciarmos este estudo sobre as integrações do VS-CODE é necessário que se possua um
conhecimento prévio e básico sobre as tecnologias abaixo.

Qualquer dúvida que você tiver sobre os processos descrito nesta apostila você pode
procurar mais informações no site do desenvolvedor:

https://code.visualstudio.com/
Então vamos lá e bons estudos!
 INSTALL VS-CODE
Acesse o link abaixo e faça o download para sua plataforma.
https://code.visualstudio.com/
 INSTALL VS-CODE
Cross Platform #
O VS Code é um editor de código gratuito, executado nos sistemas operacionais macOS,
Linux e Windows.
O VS Code é leve e deve ser executado na maioria das versões de hardware e plataforma
disponíveis.

Update cadence#
O VS Code lança uma nova versão a cada mês com novos recursos e importantes correções
de bugs. A maioria das plataformas suporta atualização automática e você será solicitado a
instalar a nova versão quando ela estiver disponível. Você também pode verificar
manualmente as atualizações executando Ajuda > Verificar atualizações no Linux e
Windows ou executando Código > Verificar atualizações no macOS.
 VS-CODE
Tela Inicial #
 VS-CODE
Tela Inicial #explorador

O explorador deixa que você possa acessar os arquivo e

pastas dos projetos

Este botão dá a opção para ir até uma pasta de um

projeto existente ou uma pasta vazia para a criação de
um novo.

Agora temos por exemplo um botão para criar um

projeto Java, mas pode ser alterado nas configurações
gerais.
 VS-CODE
Itens gerais

#Pesquisar: Utilizado para pesquisar qualquer palavra seja no texto que está ativo ou
em outros arquivos do projeto.

#Controle do Código-Fonte: Esta opção é uma das mais utilizadas. O processo de

versionamento é contínuo e sempre que existirem alterações será aqui que elas
aparecerão.
#Executar e Depurar: Muito utilizado com as linguagens de programação para realizar
DEBUGs, ou seja, a visualização do código em tempo de execução para uma análise
mais afinada.
#Extensões: Apresenta as extensões instaladas na IDE, algumas recomendadas e
também configurações.
 INSTALL VS-CODE
Agora podemos partir para a instalação e utilização do VSCODE com o GIT integrado.

Cross Platform #
O VS Code é um editor de código gratuito, executado nos sistemas operacionais macOS,
Linux e Windows.
O VS Code é leve e deve ser executado na maioria das versões de hardware e plataforma
disponíveis.

Update cadence#
O VS Code lança uma nova versão a cada mês com novos recursos e importantes correções
de bugs. A maioria das plataformas suporta atualização automática e você será solicitado a
instalar a nova versão quando ela estiver disponível. Você também pode verificar
manualmente as atualizações executando Ajuda > Verificar atualizações no Linux e
Windows ou executando Código > Verificar atualizações no macOS.
 INSTALL VS-CODE
Extensões #
As extensões do VS Code permitem que terceiros adicionem suporte para:
Linguagens - C++ , C# , Go , Java , Python
Ferramentas - ESLint , JSHint , PowerShell
Depuradores - PHP XDebug e SCSS
Keymaps - Vim , Sublime Text , IntelliJ , Emacs , Atom , Brackets , Visual Studio , Eclipse

As extensões se integram à interface do usuário, comandos e sistemas de execução de

tarefas do VS Code para que você ache fácil trabalhar com diferentes tecnologias por meio
da interface compartilhada do VS Code. Confira a extensão do VS Code Marketplace para ver
o que está disponível.
 INSTALL VS-CODE
Extensões #
As extensões do VS Code permitem que terceiros adicionem suporte para:
Linguagens - C++ , C# , Go , Java , Python
Ferramentas - ESLint , JSHint , PowerShell
Depuradores - PHP XDebug e SCSS
Keymaps - Vim , Sublime Text , IntelliJ , Emacs , Atom , Brackets , Visual Studio , Eclipse

As extensões se integram à interface do usuário, comandos e sistemas de execução de

tarefas do VS Code para que você ache fácil trabalhar com diferentes tecnologias por meio
da interface compartilhada do VS Code. Confira a extensão do VS Code Marketplace para ver
o que está disponível.
 INSTALL VS-CODE
Extensões #
As extensões do VS Code permitem que terceiros adicionem suporte para:
Linguagens - C++ , C# , Go , Java , Python
Ferramentas - ESLint , JSHint , PowerShell
Depuradores - PHP XDebug e SCSS
Keymaps - Vim , Sublime Text , IntelliJ , Emacs , Atom , Brackets , Visual Studio , Eclipse

As extensões se integram à interface do usuário, comandos e sistemas de execução de

tarefas do VS Code para que você ache fácil trabalhar com diferentes tecnologias por meio
da interface compartilhada do VS Code. Confira a extensão do VS Code Marketplace para ver
o que está disponível. Utilize o botão lateral para acessar.
GIT VS-CODE
Antes de qualquer coisa é necessário que se possua instalado na máquina o software git-
bash, que é um terminal que emula o sistema.

Acesse o link abaixo e tenha maiores informações de como realizar a instalação do bash.
https://carldesouza.com/installing-git-on-windows-using-git-scm/
GIT VS-CODE
Acessando o VS-CODE sem nenhuma pasta aberta vamos ter acesso a esse botão.

Clicando em Abrir Pasta você vai ver o gerenciador de arquivos para Abrir a Pasta.
GIT VS-CODE
Depois que se seleciona a pasta a janela se parece com a imagem abaixo.
GIT VS-CODE
Clique no botão Controle de Código Fonte:
Então teremos acesso ao botão de:
Que quando clicado inicializa a pasta como repositório git local.
GIT VS-CODE
Assim que arquivos forem adicionados ao repositório, estes serão rastreados.

Com o controle de código instaurado,

qualquer alteração no(s) arquivo(s) será
mostrada, ao lado do arquivo indicada por
uma letra, no ícone lateral indicando que
existe uma alteração não salva da mesma
forma na aba no arquivo aparece um
ponto branco e no source-control vai
aparecer somente depois que as
alterações forem salvas.

Agora sempre que realizarmos alguma alteração em nossos arquivos, as modificações

serão apresentadas aqui!
GIT VS-CODE
Commits:
Após salvarmos nossas alterações podemos guardar estas em versões do nosso projeto
realizando os commits.
Botão de disparo do COMMIT.
Campo onde é obrigatório criar a
mensagem do COMMIT.

Este botão adiciona os arquivos

Esta alteração do arquivo já foi
alterados na área de STAGE.
adicionada na área de STAGE.

STATUS dos arquivos.

U = Não Rastreado
M = Modificado
A = Adicionado
D = Deletado

Arquivos alterados e salvos, esperando para serem enviados para a área de

STAGE.
GIT VS-CODE
Foi visto até o momento o processo de realização dos processo do GIT com VS-CODE local,
vamos ver agora o processo para clonar um repositório remoto.

1 – Criar o repositório remoto ou já possuir um e este já deve estar inicializado.

1
GIT VS-CODE
2 – Copie o endereço remoto do repositório, lembrando que estamos trabalhando com o
protocolo HTTPS.

2
GIT VS-CODE
3 – Clique no botão Clone Repository e depois cole a URL do repositório remoto no campo
indicado na figura abaixo.

3
GIT VS-CODE
4 – Após colar a URL do repositório remoto no campo aparece uma nova opção de clonagem
com o nosso endereço e é onde devemos clicar.

4
GIT VS-CODE
5 – Depois de clicar na seleção de clonagem é aberto o gerenciador de arquivos do Windows
que solicita um local para colocar a pasta do repositório. Depois que escolher o local basta
clicar no botão Selecionar Localização do Repositório.

5
GIT VS-CODE
6 – Finalizando o clone de repositórios remotos o VS-CODE pode te perguntar se você
gostaria de abrir o repositório clonado, seria uma boa idéia e também ele pode perguntar se
você confia nos autores dos arquivos nesta pasta, se você tem certeza, basta marcar o
checkbox e clicar no botão Sim, confio.

6
PYTHON VS-CODE
Para o estudo a seguir é necessário ter instalado na máquina o Python.
O Python pode ser baixado a partir de:

https://www.python.org/downloads/
PYTHON VS-CODE
Após a instalação do Python em sua máquina abra o VS-CODE vamos vamos até o menu
Arquivo e depois Novo Arquivo.
PYTHON VS-CODE
No arquivo que foi criado vamos digitar uma linha de código Python.

Salve o arquivo com o nome de teste.py.

PYTHON VS-CODE
Agora vamos executar este arquivo para ver se o compilador do Python está Ok e roda no
VS-CODE.
Vá até o menu Terminal e vá até a opção Novo Terminal.
PYTHON VS-CODE
No terminal, navegue até onde o arquivo se encontra.
Rode o arquivo e veja o resultado.
PYTHON VS-CODE
Agora que já temos certeza de que o compilador está funcional e está tudo Ok podemos
partir para as nossas extensões. Clique no ícone lateral do MarketPlace.
Na campo de busca digite python, a primeira extensão que aparece é a Python a mais
popular dentre todas. E vamos instalar também a Code Runner que além de rodar Python
também dá suporte à outras linguagens.
PYTHON VS-CODE
Com as extensões instaladas. Podemos abrir a pasta do nosso arquivo python ou projeto.
PYTHON VS-CODE
Selecionando a versão do Interpretador.
O atalho CTRL+SHIFT+P é universal dentro do VS-CODE ele dá acesso a barra de navegação
de configurações e para o Python podemos por exemplo alterar a versão do Interpretador
que está rodando:
PYTHON VS-CODE
Selecionando a versão do Interpretador.
PYTHON VS-CODE
Pylint
Pylint é um verificador de bugs e qualidade de código fonte para a linguagem de
programação Python. Ele segue o estilo recomendado pelo PEP 8, o guia de estilo do
Python.[2]
É similar ao Pychecker mas inclui (porém não é limitado a) as seguintes funcionalidades:
Verifica o comprimento de uma linha de código
Verifica se nomes de variáveis estão bem formatados de acordo com seu padrão de
codificação
Verifica se interfaces declaradas estão verdadeiramente implementadas, e assim por
diante.[3]
O Pylint é altamente configurável e pode ser personalizado quando necessário. Também é
equipado com o módulo Pyreverse que permite que diagramas UML sejam gerados do
código Python.

fonte: https://pt.wikipedia.org/wiki/Pylint
PYTHON VS-CODE
Ativando o Pylint.
Mais uma vez vamos utilizar o atalho CTRL+SHIFT+P para podermos ativar este verificador e
dar um ganho de qualidade em nossos códigos.
PYTHON VS-CODE
Em seguida podemos clicar em pylint.

Caso você não tenha Pylint o VS-CODE te avis e pede para instalar, clique em install.
PYTHON VS-CODE
Em seguida podemos clicar em pylint.

Caso você não tenha Pylint o VS-CODE te avis e pede para instalar, clique em install.
PYTHON VS-CODE
Após a instalação repita o processo de ativação do Pylint e agora veja o código sendo
verificado pelo analisador.
As marcações indica onde o Pylint realiza as análises e encontrou algum problema.
Copyright © 2015 - 2023 Prof. Alexandre Carlos de Jesus
Todos direitos reservados. Reprodução ou divulgação total ou parcial deste documento é expressamente
proíbido sem o consentimento formal, por escrito, do Professor (autor).