Meu VS Code
Tags: braziliandevs, vscode, beginners, productivity
Published: 2023-03-31 03:57:11

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](url)**

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.

![Imagem de como ficou meu VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnlber2xsnep41vsgggj.png)

---

## 🎨 Tema

Eu uso o tema da [**Ballerini**](https://github.com/Ballerini-Theme), o qual é extremamente fofo e você pode adicioná-lo ao seu VS Code [**clicando aqui**](https://marketplace.visualstudio.com/items?itemName=BalleriniServer.ballerini-theme).

![Imagem da página da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuvz7ag53fq6ht6zuv0c.png)

---

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](https://marketplace.visualstudio.com/items?itemName=leandro-rodrigues.fluent-ui-vscode)**, se você está usando Windows, ela harmoniza sua área de trabalho.

![Imagem da página da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbkiljwp37vu9hgyf1o7.png)

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**](https://marketplace.visualstudio.com/items?itemName=JonathanHarty.gruvbox-material-icon-theme) por ter tons pastéis.

![Imagem da página da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3dztkd26hoi7aeyk9fw.png)

---

## 📦 Extensões

A parte mais interessante!

[**vscode-pets**
](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets)
Dispensa apresentações, simplesmente fofo.

![Imagem descritiva da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tivmwm5uka1q6904xrp4.png)

---

[**Rubberduck - ChatGPT for Visual Studio Code**](https://marketplace.visualstudio.com/items?itemName=Rubberduck.rubberduck-vscode)

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

![Imagem de descrição da extensão](https://raw.githubusercontent.com/rubberduck-ai/rubberduck-vscode/main/asset/rubberduck-header-2.gif)

---

[**Tabnine AI**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)

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

![Imagem de descrição da extensão](https://raw.githubusercontent.com/codota/tabnine-vscode/master/assets/completions-main.gif)

---

[**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

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.

![Imagem de descrição da extensão](https://raw.githubusercontent.com/ritwickdey/vscode-live-server/428e01caf02bfa7ee75741df0f02fc9d2b5b0999/images/Screenshot/vscode-live-server-explorer-menu-demo-1.gif)

---

[**Auto Rename Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

Automaticamente renomeia a tag de abertura e fechamento do HTML.

![Imagem de descrição da extensão](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/f3039ed7263c5ab94c6e2fa9995d3ad265ebc822/images/usage.gif)

---

[**Code Spell Checker**](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

Corretor ortográfico porque errar é humano 🙂

![Imagem de descrição da extensão](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/main/images/example.gif)

---

[**Color Highlight**](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

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

![Imagem de descrição da imagem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ov9j8rox4nvt0m17wvsc.png)

---

[**Color the tag name**](https://marketplace.visualstudio.com/items?itemName=jzmstrjp.color-the-tag-name)

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

![Imagem de descrição da extensão, tem um cabelo colorido fazendo uma analogia às tags coloridas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv4vvz4lmw82s2r8um4s.png)

---

[**Discord Presence**
](https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode)

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

![Imagem de descrição da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbexafs1ul9pksbqaiww.png)

---

[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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.

![Imagem de descrição da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99syuraoxwrbp4v3fqus.png)

---

[**Image preview**](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

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

![Imagem de descrição da extensão](https://raw.githubusercontent.com/kisstkondoros/gutter-preview/master/images/sample.png)

---

[**Ident Rainbow**](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

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

![Imagem de descrição da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvlbu2bw6zqa73sbqr70.png)

---

[**Polacode**](https://marketplace.visualstudio.com/items?itemName=pnp.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

![Imagem de descrição da extensão](https://github.com/octref/polacode/raw/master/./demo/usage.gif)

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

---

[**Error Lens**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

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

![Descrição da extensão da imagem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mq6qjzwus9zqfn4bazj.png)

---

[**Git Extension Pack**](https://marketplace.visualstudio.com/items?itemName=donjayamanne.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.

![Imagem de descrição da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs1tgch4vtb4nmcsep0k.png)

---

[**Turbo Console Log**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.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.

![Imagem de descrição da extensão](https://image.ibb.co/dysw7p/insert_log_message.gif)

---

**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”.

![Imagem de descrição da extensão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyu44uxg1110tywp0ivx.png)

---

## 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:

![Imagem de descrição da opção](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gskwrmnwam9hh0wzc5pm.png)

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:

![Imagem de descrição da opção](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3mg75l63qoro097ws05.png)

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"**:

![Imagem de descrição da opção](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnsbubt2lgzid8j533s0.png)

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

![Imagem de descrição da opção](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5uomuebspqkr50t2wh9.png)

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

[**Aproveite para acessar meu site!**](https://vinisantana.netlify.app)