Esse post também está dispobível em forma de Thread no Twitter aqui e no dev.toaqui (em inglês)

⭐O QUE FAREMOS???

Neste Post, passaremos por temas, configurações de vscode, fontes, ícones, paleta de cores, estilo de terminal no Windows, TUDO QUE VOCÊ PODE IMAGINAR

🎆 - TEMA VS CÓDIGO

O tema que estou usando se chama "Min Theme", que é bem simples, mas muito bom!

Se quiser usar um tema mais animado, tem o "Shades of Purple" que eu já usei por muito tempo! Além do “Andromeda”, “Tokyo Night” e o famoso “Drácula” que você já conhece!

Aqui estão os links, escolha o que você preferir! Todos são incríveis

Min Theme

Shades of Purple (Super Dark)

Andromeda

Tokyo Night

Dracula

🗂️- ÍCONES DE ARQUIVO

Atualmente estou usando "vscode-icons", que gosto muito! Porém, um que combina MUITO com esse tema é o "Symbols", que segue a estética minimalista!

Esses dois são os que eu recomendo! Cabe a você escolher!

vscode-icons

Symbols

🅰️- FONTES VSCODE

Esta é a MELHOR FONTE que encontrei, chamada "JeiBrains Mono"!

É uma fonte bem completa para devs, contendo TUDO que você precisa, como fontLigatures, Nerd Fonts, etc...

Outra fonte boa é a Geist Mono, lançado pela Versel, que também contém TUDO ISSO

Você escolhe!

JetBrains Mono

Geist Mono

⌨️ - CONFIGURAÇÕES GERAIS

É aqui que tudo vai mudar! Vou mostrar como tornar o VSCode realmente seu!

Pressione Ctrl + Shift + P no VsCode e pesquise “Preferências: Abrir configurações do usuário (JSON)”

Este é o JSON que entra em todas as configurações do VS CODE! Tem muita coisa para colocar aqui, então aqui está um link para o vídeo do Rocketseat explicando tudo!

Se você quiser apenas obter as configurações, pode dar uma olhada no repositório dele no github, na descrição deste vídeo

Se quiser deixar EXATAMENTE como o meu é só ler aqui, que é uma versão mais simples que personalizei, mas não é muito diferente!

{
    "symbols.hidesExplorerArrows": false,
    "tabnine.experimentalAutoImports": true,
    "workbench.colorTheme": "Dracula",
    "workbench.iconTheme": "symbols",
    "editor.fontFamily": "JetBrains Mono",
    "vscode-pets.theme": "forest",
    "editor.fontSize": 14,
    "editor.lineHeight": 1.8,
    "workbench.startupEditor": "newUntitledFile",
    "editor.renderLineHighlight": "gutter",
    "editor.fontLigatures": true,
    "workbench.editor.labelFormat": "short",
    "explorer.compactFolders": false,
    "editor.semanticHighlighting.enabled": false,
    "breadcrumbs.enabled": false,
    "editor.minimap.enabled": false,
    "workbench.statusBar.visible": false,
    "apc.electron": {
        "titleBarStyle": "hiddenInset",
        "trafficLightPosition": { "x": 11, "y": 10 },
        "frame": false
    },
    "window.commandCenter": false,
    "apc.header": {
        "height": 36
    },
    "apc.stylesheet": {
        ".title-label > h2": "display: none",
        ".editor-actions": "display: none",
        ".nosidebar .inline-tabs-placeholder": "width: 75px",
        ".pane-header": "padding: 0 8px",
        ".pane-body": "padding: 8px",
        ".split-view-view:first-child .pane-header": "display: none !important;",
        ".monaco-list-row": "border-radius: 4px;",
        ".monaco-workbench .monaco-list:not(.element-focused):focus:before": "display: none;"
    },
    "apc.listRow": { "height": 24 },
    "explorer.fileNesting.enabled": true,
    "explorer.fileNesting.patterns": {
        "*.ts": "${capture}.js",
        "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
        "*.jsx": "${capture}.js",
        "*.tsx": "${capture}.ts",
        "tsconfig.json": "tsconfig.*.json",
        "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb"
    },
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "JetBrainsMono Nerd Font",
    "window.density.editorTabHeight": "compact"
}

🎲- MELHORIAS GERAIS

Para melhorá-lo ainda mais, vá até cada painel que você não gosta, clique com o botão direito e selecione "Oculto"

Faça isso com "Overview" no Explorer, por exemplo, com "Problems" no terminal, "Timeline", etc...

😺- VS CODE PETS

Ela acrescenta ANIMAIS DE ESTIMAÇÃO QUE FICAM COM VOCÊ! São vários animais diferentes, você pode trocar a ninhada, brincar com eles, jogar bola, TUDO!!!

MELHOR EXTENSÃO DE TODAS! Deixa a estética INCRÍVEL!!

vscode-pets

🖥️- AGORA NO TERMINALLLL

Aqui, estilizarei o terminal WINDOWS com base neste vídeo , DESCULPE AQUELES QUE USAM MAC/LINUX FOI MAL

Se você quiser assistir o vídeo, eu recomendo fortemente! Vídeo MUITO bom!

🎨- PALETA DE CORES DO TERMINAL

Para ver um tema, basta escolher um de sua preferência no site Windows Terminal Themes

No meu caso estou usando o tema "JetBrains Drácula", mas quando o terminal estiver dentro do VS Code não fará diferença mesmo kkkk

INSTRUÇÕES:

Ao encontrar o tema que você gosta no site, clique no botão "Obter Tema", para copiar o tema

No terminal, clique na seta -> configurações -> Abrir arquivo JSON (última opção) e procure o valor “esquemas”

Depois é só colar o tema que você copiou no final do Array e selecioná-lo nas opções! APROVEITAR!

🅰️- NERD FONTSSS

Uma "Nerd Font" é uma fonte que contém símbolos de desenvolvimento, como o símbolo do node, etc... o que REALMENTE melhora a estética do terminal

Para a fonte do terminal, usarei a fonte FiraCode Nerd, mas você pode encontrar várias outras aqui! (Se quiser, você pode até usar o JetBrains Mono que já está instalado!)

Para instalar a fonte, procure-a no github, baixe e instale a fonte clicando com o botão direito + instalar em todas elas

Depois, basta ir ao terminal e pressionar a seta -> configurações -> Padrão -> Aparência e selecionar a fonte que você instalou!

Basta reiniciar o terminal e ser feliz!

🎆- TEMAS TERMINAIS (BOA PARTE)

Para colocar esses temas no terminal, usaremos o Oh-My-Posh!

As instruções para fazer tudo são um pouco mais extensas, mas basta ler a documentação e você vai pegar o jeito! De qualquer forma, você pode ver o vídeo de configuração acima!

Oferece VÁRIOS temas para o seu terminal! O que estou usando é um simples, chamado "neko", é só instalar e correr para o abraço

Certifique-se de que o WinGet esteja instalado primeiro, caso contrário, basta instalar o "App Installer" procurando por "WinGet" na Microsoft Store

Se você tiver algum problema ao inicializar o arquivo de configuração do tema, uma postagem que me ajudou foi essa aqui, on StackOverflow!

🎲- OUTRAS CONFIGURAÇÕES

Para melhorar um pouco mais o terminal, você pode fazer algumas configurações gerais na seta -> Configurações -> Aparência

Depois, você pode colocar uma imagem de fundo (Padrão->Aparência), deixar a barra de navegação transparente (modo acrílico), colocar um tema claro, entre MUITAS outras coisas

Então cabe a você explorar!

😄- OBRIGADO!

Essa foi a Thread, espero que tenha gostado e achado uma boa customização para o seu VS Code!

Se você tiver alguma dúvida, basta me mandar um DM no Twitter! Estou sempre disponível!

Minhas redes sociais: Twitter GitHub

Meus projetos: DayKeeper better-format

OBRIGADO!