É fácil para um desenvolvedor subestimar a importância de seu ambiente de trabalho. Não, não estamos falando sobre sua cadeira, mesa e cor da parede. Estamos falando do seu ambiente de trabalho virtual.

Fazer com que seu editor de código do Visual Studio se sinta em casa é extremamente importante para a eficiência do seu trabalho. A fonte cobre uma grande parte da sensação geral do VS. Neste artigo, vamos ensinar como editar fontes em várias partes do editor do VS Code.
Como alterar a fonte no código VS
Mesmo que você seja um desenvolvedor que trabalha com o VS há muito tempo, talvez ainda não conheça as opções de alteração de fonte.
Se você não se importa com a importância de escolher sua própria fonte, pule direto para o tutorial alguns parágrafos abaixo. Tenha em mente, porém, que os motivos para alterar sua fonte (descritos abaixo) podem ajudar na sua decisão.
Por que as fontes são tão importantes no VS? Bem, se o aspecto estético não é suficiente para você (e confie em nós, depois de horas e horas gastas em um editor de código, isso começa a importar), na verdade também é sobre funcionalidade. Então, o que torna uma fonte “apropriada” para VS?
Principalmente, você deseja que a distinção entre caracteres semelhantes seja notável. Por exemplo, distinguir facilmente o número 1 e o L minúsculo pode acelerar significativamente sua codificação e economizar seu tempo.
Depois, há o fato de que alguns desenvolvedores gostam de usar ligaduras. As ligaduras são alguns símbolos unidos. Eles também são chamados de “glifos” e podem significar muito durante a codificação.
Sem mais delongas, veja como alterar a família de fontes no VS:
- Abra seu editor VS.

- Navegue até a parte superior da tela e selecione Arquivo .

- Agora, no menu suspenso, vá para Preferências > Configurações .

- Agora você verá a seção comumente usada com um menu no lado direito da tela. Você pode acessar a fonte nesta página ou seguindo a etapa abaixo.

- Ou clique em Editor de Texto > Fonte e procure a entrada padrão “editor.fontFamily”: “Consolas ”.

- Em seguida, em vez de “ Consolas ”, insira o nome de sua fonte preferida.

Isso deve alterar automaticamente a família da fonte.
Como alterar o tamanho da fonte no código VS
Mesmo se você tiver uma visão perfeita, você vai querer manter seus olhos o mais confortável possível ao escrever linhas de código. Assim como a discrepância entre caracteres semelhantes é importante ao escolher uma família de fontes, o tamanho da fonte é importante para tornar a codificação mais fácil de ver e ajudá-lo a trabalhar com mais eficiência.
Não existe uma fórmula mágica para o melhor tamanho de fonte para codificação. Idealmente, você deseja ver os caracteres da forma mais clara possível, mas também deseja que a linha caiba na janela do VS. Portanto, experimente diferentes tamanhos de fonte e encontre o perfeito que atenda às suas necessidades de codificação.
Veja como alterar o tamanho da fonte no VS Code:
- Navegue até o menu Configurações do usuário (etapa número 3 no tutorial de fonte).

- Procure a linha “editor.fontSize”: 15 , o tamanho da fonte pode ser diferente.

- Em seguida, em vez de 15 , insira o tamanho de fonte de sua preferência.

Como alterar a fonte do Explorer no VS Code
O recurso Explorer no VS Code funciona exatamente como o recurso explorer na maioria dos outros aplicativos. Ele é usado para gerenciar, navegar e abrir arquivos e pastas para trabalhar em seu projeto. Como o VS Code é baseado em pastas e arquivos, o Explorer torna mais fácil para você começar - basta abrir o arquivo/pasta usando o VS Code. É simples assim.
Você pode esperar usar bastante o VS Code Explorer. Se o tamanho da fonte do Explorer não for adequado para você, você ficará feliz em saber que pode alterá-lo.
- Vá para o menu Configurações do usuário novamente.

- Encontre a entrada “editor.fontSize”: 14 , o tamanho da fonte pode ser diferente.

- Altere para um tamanho de fonte de sua escolha, 18 é usado neste exemplo.

Como alterar a fonte do terminal no código VS
Em vez de alternar janelas ou fazer alterações no estado do terminal existente, o VS Code permite que você use um terminal integrado, encontrado na raiz do seu projeto/espaço de trabalho. Claro, você pode querer fazer alterações na fonte aqui para facilitar o uso. Veja como alterar a fonte do terminal VS Code:
- Navegue até a pasta raiz do seu projeto/espaço de trabalho.
- Abra o arquivo settings.json usando o VS Code. Como alternativa, no VS Code, pressione Ctrl + Shift + P (em vez de Ctrl , use Command para dispositivos Mac) e localize o arquivo settings.json .

- Altere as três linhas correspondentes para isto:
Observe que D2Coding é um exemplo. Você também pode escolher qualquer outra fonte de sua preferência.
“terminal.external.osxExec”: “iTerm.app”,
“terminal.integrated.shell.osx”: “/bin/zsh”,
“terminal.integrated.fontFamily”: “D2Coding”,
- Salve as configurações quando terminar.
Para alterar o tamanho da fonte do terminal, navegue até a entrada “terminal.integrated.fontSize”: e defina-a como de sua preferência.
Como alterar a fonte dos comentários no código VS
As entradas de comentários de código são, por padrão, na mesma fonte que o resto do código. Alterar isso os destaca, o que muitas vezes pode evitar horas de trabalho desperdiçadas (é fácil perder um comentário quando está na mesma fonte de todo o resto no VS). Por mais simples que esse tipo de coisa possa parecer, a solução é um pouco mais complexa do que você esperaria. Além disso, os resultados podem não ser ideais, pois isso pode causar alguns problemas de alinhamento. Ainda assim, não custa tentar:
- Vá para a pasta de instalação raiz do VS Code no seu dispositivo.
- Navegue até a entrada touch style.css no terminal. Isso criará uma folha de estilo.
- Agora, é hora de adicionar a regra da fonte. Aqui está um exemplo de estilo:
.mtk3 {
font-family: "iosevka";
font-size: 1em;
font-style: italic;
}
- Abra settings.json e adicione esta entrada:
"vscode_custom_css.imports":
"file:///Users/username/.vscode/style.css"],
- Agora, baixe o plug-in Custom CSS and JS Loader .
- Depois de instalado, use o comando Ctrl + Shift + P e verifique se o plug-in está ativado.
- Reinicie o código VS.
- Os comentários agora devem ter uma nova fonte.
Como alterar o tamanho da fonte da barra lateral no código VS
Não há configuração no VS Code que permita ao usuário alterar o tamanho da fonte do terminal. No entanto, existe uma solução alternativa e envolve o plug-in Custom CSS e JS Loader mencionado.
- No plug-in, navegue até os detalhes da extensão e siga atentamente a seção do tutorial.
- Use a seguinte lógica:
"vscode_custom_css.imports": ["[insert custom file URL]"]
- Faça isso para cada arquivo personalizado.
O resultado deve resultar em uma barra lateral do VS Code muito melhor e esteticamente agradável.
Como alterar a fonte usando diferentes sistemas operacionais
Se estiver codificando no VS, você está usando um computador com Windows, um Mac ou um sistema Linux. Embora esses três não sejam idênticos em termos de VS, as diferenças se resumem principalmente à opção de tecla Ctrl / Cmd e aos locais padrão dos arquivos do VS Code. Portanto, o princípio de alteração de fonte no VS Code permanece praticamente o mesmo em todos os dispositivos.
Perguntas frequentes adicionais
Por que não consigo alterar a fonte no VS Code?
Há muitos erros que você pode cometer no VS Code, e alterar a fonte não é tão simples quanto fazê-lo no MS Word. Como você usará muita codificação para alterar a fonte real do VS Code, você deve saber sobre o descuido mais comum que as pessoas cometem. Certifique-se de que cada entrada esteja entre aspas. Por exemplo, “vscode_custom_css.imports”: [“file:///Users/username/.vscode/style.css”] , não funcionará a menos que você use as aspas. Além disso, certifique-se de usar espaços entre os comandos.
Qual fonte é usada para código no VS Code?
Por padrão, a fonte usada para codificar no VS Code é Consolas. Se você seguir este guia, poderá alterar a maioria das fontes no VS Code, seja sobre o código em si, o terminal, os comentários ou o recurso do explorer.
No entanto, se você está falando sobre a fonte encontrada nas imagens do site oficial do VS Code, ninguém pode dizer qual foi usada. A menos que os desenvolvedores do VS Code revelem explicitamente qual fonte foi usada, não há como descobrir.
Como hackear uma fonte do VS Code?
Originalmente, hack significava modificar, mas, se com isso você quer dizer adicionar a fonte Hack ao VS, você pode adicioná-la através do site do Hack . Baixe a fonte TrueType do Hack. Extraia o arquivo zip baixado. Instale os arquivos extraídos. Em seguida, vá para Ferramentas, seguido de Opções. No menu Opções, selecione Ambiente e navegue até Fontes e cores. Abra o menu suspenso Fonte e selecione a entrada Hack.
Qual fonte os hackers usam?
Como regra geral, todo codificador, incluindo hackers, usa uma fonte de sua preferência. Um bom exemplo de uma fonte popular que supostamente é uma “escolha do hacker” seria a Ray Bluetens, também conhecida como Lawn Dart Fonts.
Alterando as opções de fonte no código VS
Lidar com as opções de fonte no VS Code definitivamente não é tão simples quanto alterar as fontes em um programa de edição de texto. No entanto, considerando que estamos falando de software de codificação aqui, o VS oferece uma ampla variedade de opções em comparação com a concorrência. Siga as instruções deste artigo e torne sua experiência de codificação a mais personalizada, fácil de usar e tranquila possível.
Você conseguiu editar suas configurações de fonte no VS Code? Você encontrou algum problema? Role para baixo e confira nossa seção de comentários abaixo. Está repleto de bons conselhos. Não se abstenha de fazer uma pergunta ou iniciar uma discussão. Nossa comunidade está mais do que feliz em ajudar.