Nesta publicação e vídeo aula do canal webmundi.com, aprenderemos a instalar o Visual Studio Code, também conhecido como VSCode, no Windows e no Linux, além de conhecermos Dicas e Truques de Utilização.
O Visual Studio Code é um dos principais editores de código do mercado, preferido de muitos desenvolvedores de software em diversas linguagens de programação.
Nesta publicação e vídeo aula, vamos aprender a instalar e configurar o Vscode, conhecer a interface do software e suas funcionalidades como teclas de atalho que vão aumentar a sua produtividade no desenvolvimento de software.
Além disso, vamos aprender a instalar fontes, temas e extensões que vão ampliar os recursos desta ferramenta de desenvolvimento.
O que é o Visual Studio Code?
O Visual Studio Code ou Vscode é um editor de código-fonte que é gratuito e está disponível no Windows, Linux e macOS.
É desenvolvido e mantido pela Microsoft, inclui suporte para depuração, controle versão Git incorporado, realce de sintaxe, complementação inteligente de código, snippets e refatoração de código.
O Visual Studio Code é uma IDE ?
Muita gente acredita que o vs code é uma IDE, porém (assim como o Sublime Text 3), o vs code não é considerado uma IDE, mas sim um editor de texto.
Uma IDE (Integrated Development Environment) Ambiente integrado de desenvolvimento é um ambiente mais robusto, com mais recursos e em algumas vezes mais pesado.
O fato é que uma IDE, muitas vezes possui tantos recursos que o desenvolvedor de software pode nem utilizá-los dependendo de seu conhecimento ou necessidade.
O interessante do Visual Studio Code é que além de ser gratuito e bem leve, o usuário começa de forma simples e com o recurso de instalar extensões ou plugins, conforme sua necessidade e uso, o VSCode pode ficar tão bom quanto uma IDE.
Diferenças entre o VS Code e o Visual Studio IDE
Download Visual Studio Code : VSCode
Acesse a página da Microsoft para efetuar o download do Visual Studio Code
Vídeo Aula : Instalação VSCode : Visual Studio Code (Windows / Linux) + Dicas e Truques de Utilização
Instalação VSCode Windows
O processo de instalação do VSCode no Windows é bem simples, basta baixar o instalador do site.
Em seguida, execute o instalador baixado e siga as instruções na tela, não esqueça de marcar a opção “Add to Path” para adicionar o Visual Studio Code nas variáveis de ambiente.
Instalação Visual Studio Code Linux
O processo de instalação no Linux pode variar conforme a distribuição utilizada.
Instalar VSCode no Debian, Ubuntu e derivadas
A instalação no Linux é relativamente simples, basta acessar o site oficial do Visual Studio Code e fazer o Download da sua última versão, clicando no botão “Download for Linux”.
Para Debian, Ubuntu e derivadas, basta acessar o site do Visual Studio Code e fazer o download da última versão do pacote .deb
Abra um terminal, navegue até a mesma e execute o seguinte comando.
sudo apt install ./ARQUIVO_BAIXADO.deb
Pronto, a instalação do Visual Studio Code está realizada e ele já deve aparecer no menu de aplicativos para você.
Instalar VSCode no Red Hat, Fedora, CentOS ou derivadas
Caso sua distribuição seja Red Hat, Fedora, CentOS ou derivadas, o ideal é ler o documento de instalação.
No documento também existem comandos para instalação em outras distros como OpenSuse, Arch, etc…
Apesar do site oficial do Visual Studio Code apresentar a opção de download do RPM, para instala-lo via terminal com o comando em tela:
sudo dnf install ARQUIVO_BAIXADO.rpm
Isto não é recomendado, pois ao optar pela instalação manual via terminal, a atualização automática não funcionará a menos que o repositório seja instalado.
Processo recomendado instalacao VSCode Red Hat, Fedora, CentOS ou derivadas
Conforme o documento de instalacao da Microsoft, o recomendado é seguir o processo descrito abaixo:
Passo 1. Instalar a chave do repositório
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
Passo 2. Em seguida, atualize o cache do pacote e instale o pacote usando dnf
dnf check-update
sudo dnf install code
Versões mais antigas usando yum
yum check-update
sudo yum install code
Instalaçao fonte Firacode no Visual Studio Code
Repositório Download Firacode Github
Instalação Firacode Linux
Ubuntu, Debian e Derivadas
sudo apt install fonts-firacode
Fedora e Derivadas
dnf install fira-code-fonts
Após instalar a fonte no Windows ou Linux, adicione as configurações abaixo no arquivo settings.json.:
Configurações a serem adicionadas no arquivo settings.json:
// Configura tamanho e família da fonte
"editor.fontSize": 18,
"editor.lineHeight": 24,
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
Extensões Visual Studio Code
Neste Post / Aula apresentamos 10 extensões gratuitas de uso comum, ou seja, serve para praticamente qualquer desenvolvedor.
O VS Code conta com um marketplace que possui milhares de extensões para praticamente qualquer coisa que você precisar em desenvolvimento de software.
O que é uma Extensão VSCode ?
Com as extensões do VS Code você pode customizar e ampliar os recursos do editor de código de código, conforme sua necessidade ou linguagem de programação que utiliza.
Visual Studio IntelliCode
Esta extensão foi desenvolvida pela própria Microsoft e utiliza Inteligência Artificial para aumentar o fluxo de trabalho do desenvolvedor.
Fornece recursos de desenvolvimento assistido por IA como IntelliSense contextual, conclusão de argumentos, formatação de código e inferência de regra de estilo.
Server para desenvolvedores Python, TypeScript / JavaScript e Java no Visual Studio Code.
Fornece insights baseados na compreensão do contexto do código combinado com o aprendizado de máquina.
Beautify
A Beautify serve para identar e deixar seu código Javascript, HTML, JSON, CSS e Sass e HTML mais padronizado, legível e bonito.
BookMarks
Ele ajuda você a navegar em seu código, movendo-se entre posições importantes com facilidade e rapidez.
Sabe quando você precisa marcar uma determinada linha de código ou várias delas e não sabe como vai fazer?
O foco desta extensão é isso.
Com a Bookmarks não há mais necessidade de pesquisar o código.
Ela suporta um conjunto de comandos de seleção, o que permite selecionar linhas marcadas e regiões entre as linhas marcadas.
É muito útil para análise de arquivos de log.
Color HightLight
A extensão Color HightLight é muito boa para quem trabalha com Front-end.
Ela exibe as cores quando você está criando um css no seu documento.
Bracket Pair Colorizer
Extensão muito recomendada para quem trabalha com linguagens que fazem uso de colchetes, chaves e parênteses.
Quem nunca se perdeu para saber se um colchetes, chaves e parênteses foi de fato fechado?
Esta extensão mostra atraves cores se você fechou o par de colchetes, chaves e parênteses
Code spell Checker
Esta extensão é um verificador ortográfico para código-fonte (Inglês), ela mostra se você está digitando um comando em inglês de forma errada
Brazilian Portuguese – Code Spell Checker
Extensão do dicionário do português brasileiro para o Code Spell checker.
Auto Rename Tag
Esta extensão permite que você renomeie automaticamente a tag HTML / XML emparelhada.
Live server
Esta extensão implementa um servidor local de desenvolvimento com recurso de recarga ao vivo para páginas estáticas e dinâmicas.
Ou seja, com esta extensão você tem um “live reload” (recarregamento ao vivo), para páginas web estáticas ou dinâmicas.
Basicamente, essa extensão elimina a necessidade de dar um F5 a cada alteração feita em um arquivo do seu projeto (seja um .html, .css, etc)
Git lens
A GitLens amplia os recursos do Git integrados ao Visual Studio Code.
Ela tem como objetivo auxiliar o desenvolvedor a verificar quem alterou determinado arquivo ou até mesmo uma determinada linha no git.
Ele também ajuda o dev a obter insights valiosos por meio de comandos de comparação poderosos.
Settings Sync
Este plugin permite que você compartilhe e sincronize configurações suas configurações do VS Code entre diferentes computadores.
Ela compartilha e sincroniza itens como temas, ícones de arquivos, inicialização, atalhos de teclado, espaços de trabalho e extensões em várias máquinas usando GitHub Gist.
A Settings Sync é muito útil para você fazer um backup das suas configurações do VSCode e caso queira compartilhar a mesma com várias máquinas.
Materiais e leituras que recomendamos para você:
- Como Instalar MySQL + MySQL Workbench : Windows 10
- Como Instalar o Servidor XAMPP no Windows 10 – Localhost Apache MySQL PHP
- Como instalar o Linux Mint 20 no Virtualbox 6.1 : Windows 10
- DBeaver : Alternativa ao SQL Server Management Studio Linux
- Como Instalar o SQL Developer Oracle no Linux
- Instalação Oracle Database 18c XE Linux
Obrigado
Esperamos que esta publicação tenha lhe ajudado a aprofundar seus conhecimentos no Desenvolvimento de software.
Se você gostou deste post, compartilhe com seus amigos ou nos acompanhe pelas redes sociais.
Sabia que você pode nos ajudar a criar mais conteúdos como este ? Sabe como ?
Comprando em nossa Loja Virtual. Uma parceria do webmundi.com com as maiores plataformas de comércio eletrônico do Brasil.
Ao comprar em nossa loja, as lojas parceiras repassam um pequeno percentual ao WebMundi.com, e assim você apoia a criação de vídeos gratuitos aqui no site e em nosso canal do YouTube.
Prestigie também nossos apoiadores e anunciantes conhecendo seus produtos e serviços.
É simples e rápido e assim você ajuda a gente a crescer.
Obrigado e um grande abraço
