Configuração do Visual Studio Code
Tags: vscode, vscodeextension
Published: 2023-02-16 13:47:04

---
title: Configuração do Visual Studio Code
published: true
date: 2023-02-15 19:08:32 UTC
tags: vscode,vscodeextension
canonical_url: https://medium.com/@HenriqueSimoes/configura%C3%A7%C3%A3o-do-visual-studio-code-29c29ddb3acf
---

#### Nesse post irei comentar sobre as extensões e configurações que utilizo no meu VS Code

Segundo a última [pesquisa da Stack Overflow,](https://survey.stackoverflow.co/2022/#integrated-development-environment) o Visual Studio Code continua sendo o IDE preferencial em todos os desenvolvedores com mais de 70% de preferencia dos usuários.

Você pode configurar o Visual Studio Code ao seu gosto por meio de suas várias configurações. Quase todas as partes do editor, da interface do usuário e do comportamento funcional do VS Code têm opções que você pode modificar.

Começado pelo tema, eu pessoalmente sou fã do [Noctis ](https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis)Obscuro.

![Exemplo de uso do Tema Noctis Obscuro](https://cdn-images-1.medium.com/max/560/1*Xd7bQXMFwX09U223-c804g.png)

Mas a dica que eu passo é o site [VS Code Themes](https://vscodethemes.com/), onde você pode ver uma demonstração dos temas disponíveis no VS Code, veja todos ou filtre entre Dark e Light.

![Vários exemplos de temas do site https://vscodethemes.com/](https://cdn-images-1.medium.com/max/1024/1*Ymow3sdABr2-vSTuMbZC_g.png)

Escolha um e clique no botão VS Code, ele irá abrir o VS Code já selecionando a extensão do tema escolhido.

![Imagem contendo o botão a ser clicado para instalação do tema selecionado.](https://cdn-images-1.medium.com/max/949/1*iTv21jNlyuTrPjyjvKoTlA.png)

Já a fonte eu recomendo a [Fira Code](https://github.com/tonsky/FiraCode) disponível no GitHub no link, ela é uma fonte monoespaçada livre contendo ligaduras, quando vários caracteres são representados por um único símbolo ou glifo.

![Exemplo de uso da fonte Fira Code](https://cdn-images-1.medium.com/max/826/1*rbqjIdLlSaI-bu_6PZSw9g.png)

### Extensões para VS Code

Estas são as extensões que estou utilizando no momento, principalmente referente à programação em JavaScript/TypeScript.

#### Material Icon Theme

[Material Icon Theme — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

O Material Icon Theme é uma excelente extensão para uma **organização visual dos seus arquivos e pastas** no VS Code. Ele possui inúmeros ícones para cada tipo de arquivos, linguagens e pastas, onde cada item será identificado por um desses ícones.

O legal é que ele identifica grande parte de libs e ferramentas mostrando os ícones de acordo com a linguagem utilizada.

![Exemplo de uso da extensão Material Icon Theme](https://cdn-images-1.medium.com/max/737/1*oAClo-BkNtnCVV8SQfnOMw.png)

#### Todo Tree

[Todo Tree — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Essa extensão pesquisa rapidamente seu espaço de trabalho em busca de marcas de comentário como TODO e FIXME e as exibe na forma de árvore na barra de atividades. Ótimo para quem mostrar todas as tarefas pendentes dentro de um determinado projeto.

Quando implementado corretamente, ele permite que você navegue pelo seu código como um desenvolvedor profissional e pule seções facilmente.

![Exemplo de uso da extensão Todo Tree](https://cdn-images-1.medium.com/max/1024/0*PTO7BFToen5yczh7.png)

#### Color Highlight

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

Esse plugin mostra a cor exata de todos RGB’s ou HEX no código, muito útil para quem trabalha com CSS ou SASS.

![Cores destacadas pela extensão Color Highlight](https://cdn-images-1.medium.com/max/83/1*VERs83yqKIcmzW_4vOjDGg.png)

#### GitLens — Git supercharged

[GitLens — Git sobrealimentado — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

O GitLens simplesmente ajuda você a entender melhor o código. Vislumbre rapidamente quem, por que e quando uma linha ou bloco de código foi alterado. Volte pela história para obter mais informações sobre como e por que o código evoluiu. Explore sem esforço a história e a evolução de uma base de código.

![Exemplo de uso da extensão GitLens — Git supercharged](https://cdn-images-1.medium.com/max/747/0*mXvie6IpuAPJvCXf.gif)

#### Import Cost

[Import Cost — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

Esta extensão mostra o tamanho de uma biblioteca de terceiros importada no momento em que você a importa (ou vários momentos depois).

![Exemplo de uso da extensão Import Cost](https://cdn-images-1.medium.com/max/838/0*Fz9nornbuvoKcvj-)

#### Markdown All in One

[Markdown All in One — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

Apesar do VS Code ter suporte básico para Markdown pronto para uso, aconselho a extensão para escrever e ler Markdown, muito útil para documentações o README’s do Github, ela é bem completa e com vários recursos funcionais como visualização ao vivo e destaque de sintaxe.

![Exemplo de uso da extensão Markdown All in One](https://cdn-images-1.medium.com/max/1024/0*PpVDzF-9nC5unNkl.gif)

#### Code Spell Checker

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

Para quem, que como eu, esta iniciando no inglês, segue um corretor ortográfico básico que funciona bem com código e documentos.

Ela nos ajuda a escrever um código com a sintaxe correta, especialmente se você está escrevendo tudo em inglês. Algo bem interessante dessa extensão é que você pode baixar os dicionários de forma independente, podendo inclusive usar vários dicionários ao mesmo tempo.

![Exemplo de uso da extensão Code Spell Checker](https://cdn-images-1.medium.com/max/745/0*g3Cu60hjw5Z_7P5M.gif)

Outro exemplo com sugestões:

![Exemplo de uso da extensão Code Spell Checker](https://cdn-images-1.medium.com/max/736/0*r_VTycElDdKPGyuW.gif)

Segue o link da versão em português do Brasil: [Brazilian Portuguese — Code Spell Checker — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-portuguese-brazilian)

Além das extensões, recomendo algumas configurações para facilitar a legibilidade e edição do código, veja como ficou o meu [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settingsjson).

```
{
    // Link com as configurações
    // https://code.visualstudio.com/docs/getstarted/settings
    // Define o tema do VS Code
    "workbench.colorTheme": "Noctis Obscuro",
    //Configura tamanho e família da fonte
    "editor.fontSize": 12,
    "editor.lineHeight": 22,
    "editor.fontFamily": "Fira Code",
    // Habilita as ligaduras
    "editor.fontLigatures": true,
    // Aplica um sinal visual na esquerda da linha selecionada
    "editor.renderLineHighlight": "gutter",    
    // Aplica linhas verticais para lembrar de quebrar linha em códigos muito grandes
    "editor.rulers": [
        100,
        120
    ],   
    // Define a fonte do terminal
    "terminal.integrated.fontSize": 12,
    // Altera visualização da arvore de pastas
    "explorer.compactFolders": false,    
    // Habilita a barra de navegação acima de seu conteúdo
    "breadcrumbs.enabled": true,
    // Configurações das extensões
    "workbench.iconTheme": "material-icon-theme",
    // Configuração de linguagem do Code Spell
    "cSpell.language": "en,pt,pt_BR",
    // Configuração do Todo Tree
    "todo-tree.general.tags": ["NOTE", "TODO", "FIXME", "DOC", "BUG"],
    "todo-tree.highlights.defaultHighlight": {
      "type": "tag",
      "fontWeight": "bold",
      "foreground": "#000000",
      "opacity": 90
    },
    "todo-tree.highlights.customHighlight": {
      "NOTE": {
        "background": "#FFA500",
        "iconColour": "#FFA500",
        "icon": "file"
      },
      "TODO": {
        "background": "#FFD703",
        "iconColour": "#FFD703",
        "icon": "tasklist"
      },
      "FIXME": {
        "background": "#FF01FF",
        "iconColour": "#FF01FF",
        "icon": "bug"
      },
      "DOC": {
        "background": "#157EFB",
        "iconColour": "#157EFB",
        "icon": "tag"
      },
      "BUG": {
        "background": "#ff000080",
        "iconColour": "#ff000080",
        "icon": "flame"
      }
    },
    "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
}
```

Você pode abrir o seu a partir do comando Preferences: Open Settings (JSON).

Espero que você tenha gostado desse post, se tiver alguma dica para melhorar ainda mais o meu ambiente, deixe aqui nos comentários. Em caso de dúvidas deixe sua pergunta nos comentários ou me [procure no LinkedIn](https://www.linkedin.com/in/henrique-simoes/).

Abraço!