🎆 COMO PERSONALIZAR SEU VSCODE E TERMINAL WINDOWS!!! 🎆
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
🗂️- Í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!
🅰️- 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!
⌨️ - 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!!
🖥️- 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!