Meu VS Code

Vini Santana 👽 — Fri, 31 Mar 2023 03:57:11 +0000

Opa devs!

Antes de começar penso ser importante dar os créditos das cores utilizadas no banner do artigo, feito com as cores do ballerini theme

Nesse artigo compartilharei com vocês a organização do meu VS Code. Configurações que eu considero essenciais, o tema, os ícones e as extensões que eu uso.

🎨 Tema

Eu uso o tema da Ballerini, o qual é extremamente fofo e você pode adicioná-lo ao seu VS Code clicando aqui.

Além do tema, estou usando uma extensão que modifica a interface do VS Code inspirada no UI design do Windows 11 chamada Fluent UI, se você está usando Windows, ela harmoniza sua área de trabalho.

Importante: para ativar essa extensão você deve pressionar F1 e selecionar a opção "Fluent UI: Enabled".

🗂️ Ícones

Para os ícones uso o Gruvbox Material Icon Theme por ter tons pastéis.

📦 Extensões

A parte mais interessante!

vscode-pets

Dispensa apresentações, simplesmente fofo.

Rubberduck - ChatGPT for Visual Studio Code

Com essa extensão o chatGPT te ajuda no seu desenvolvimento diretamente da sua IDE.

Tabnine AI

Um robô que te da sugestões do que colocar no seu código, fazendo com que você economize muito tempo.

Live Server

Te da muita praticidade na hora de desenvolver para a web, essa extensão atualiza a página que você está desenvolvendo simultaneamente.

É melhor se combinada com uma configuração que deixarei no final do artigo.

Auto Rename Tag

Automaticamente renomeia a tag de abertura e fechamento do HTML.

Code Spell Checker

Corretor ortográfico porque errar é humano 🙂

Color Highlight

Cores no seu código CSS mais visíveis, melhorando a organização.

Color the tag name

Não é apenas bonitinho, também te ajuda a identificar a tag de abertura e a de fechamento.

Discord Presence

Mostra sua atividade do VS Code no seu perfil do Discord.

ESLint

Uma ferramenta que ajuda a encontrar problemas no seu código javascript, e com essa extensão, você pode te-la em seu VS Code.

Image preview

Te permite visualizar as imagens utilizadas e onde elas estão sendo usadas no código.

Ident Rainbow

Te ajuda a visualizar a posição das linhas identadas.

Polacode

Uma maneira bonita de tirar capturas de códigos

Após instalar a extensão você pode apertar F1 e digitar polacode, depois copie o código que deseja capturar e cole no bloco de código

Error Lens

Destaca os erros do seu código com cores e te mostra o que está errado diretamente no código.

Git Extension Pack

Um pacote de extensões para melhorar o uso do git integrado no VS Code.

Adiciona funcionalidades como:

Ver o histórico do git log, arquivo e linha do tempo
alternar entre projetos facilmente
Adiciona suporte a linguagem de arquivos .gitignore

E algumas outras melhorias.

Turbo Console Log

Permite que você crie console.log's apertando ctrl + alt + L
muito útil quando você precisa fazer testes rápidos no js.

Extensões para linguagens

Algumas linguagens só funcionam no VS Code com extensões, como por exemplo o Python. Algumas extensões melhoram a usabilidade delas.

Eu não vou colocar todas as extensões para linguagens detalhadamente aqui, eu recomendo que quando forem utilizar alguma nova tecnologia no VS Code, vocês procurem por pacotes de extensão, como “Python Extension Pack”.

Configurações do VS Code

Salvamento automático

Abra as configurações do seu VS Code e procure por "Auto Save" e deixe desse jeito:

Assim, você nunca perde seu trabalho :)
Essa configuração trabalha muito bem com a extensão Live Server que citei acima.

Quebra automática de coluna

Essa configuração resolve o problema da linha do código passar da barra lateral.

Você pode ativar essa configuração procurando por "wrap" nas configurações:

Este número é o tamanho máximo que a linha vai ter, ajuste conforme a largura da sua tela.

Tamanho da fonte, estilo da fonte, e outras configurações

Você pode editar algumas propriedades do VS Code apertando F1 e digitando "configurações do usuário":

Clique na opção acima, você vai abrir este arquivo:

Você pode apertar ctrl + F e procurar por "font", você vai encontrar algumas propriedades de fonte.

Eu particularmente prefiro a fonte do editor grande.

Altere como desejar, você também pode explorar as outras propriedades desse arquivo.

É isso!

Espero que tenham tirado algum proveito;

Sinta-se livre para me corrigir, dar alguma sugestão ou adição a esse artigo!

Obrigado por ler até aqui e