Por padrão, o estilo do Visual Studio Code é um fundo cinza escuro com ícones coloridos. Pode ser que esse não seja muito o seu estilo, ou que esse padrão esteja te atrapalhando a ver os detalhes do código. Mas, é possível estilizar o programa? Sim! Vamos aprender nesse artigo como configurar o estilo do Visual Studio Code.
Tema
Para mudar as cores do editor, devemos primeiro abrir a barra de pesquisas usando o comando Ctrl + Shift + P (no Windows e Linux) ou Shift + Command + P (no macOS). Em seguida, digite “Theme” na barra de pesquisas:
Feito isso, veremos as seguintes opções:
- Color Theme
- File Icon Theme
- Product Icon Theme
- Developer: Generate Color Theme From Current Settings
Vamos entender cada uma.
Color Theme
Essa opção mostra uma lista de cores para o editor. Você pode navegar por elas usando as setas direcionais e ver um preview de como o editor vai ficar.
Além disso, nessa opção você pode também modificar a cor das declarações do código. Alguns são mais monocromáticos e outras parecem um verdadeiro carnaval!
File Icon Theme
A opção File Icon Theme permite que você mude a miniatura dos ícones dos arquivos, podendo tirar completamente com a opção None: Disable all icons, ou com uma opção mais minimalista, onde todos os arquivos ficam com aquele ícone de página nova.
Uma dica que eu dou é: escolham uma cor que agrada vocês e que seja fácil de olhar. Afinal, o estilo deve permitir que você diferencie as cores das declarações com facilidade. Imagina o quanto você ia demorar para achar um erro se as declarações fossem de cores muito parecidas? Ficaria cansativo demais!
Digo isso porque às vezes ficamos horas encarando um código e pode ser cansativo olhar para uma tela que seja de um azul ou vermelho vibrante. Certamente, após um certo período olhando para a tela, você pode ter reações como dores de cabeça e vista cansada.
Generate Theme From Current Settings
Podemos ainda criar nossos próprios temas com a opção Developer: Generate Theme from Current Settings. Para ajudar na escolha das cores, recomendo o site Paletton, que permite selecionar as cores que melhor se complementam ou cumprem as necessidades do usuário.
Extensões
As extensões são usadas para aumentar a utilidade do Virtual Studio Code, como já mostramos em outros artigos. Uma dessas extensões é a Code Runner, responsável por rodar uma enorme gama de projetos em diferentes linguagens.
A extensão IntelliCode mostra sugestões para completar o código enquanto este é digitado. Por meio de uma inteligência artificial, essa extensão mostra a opção mais relevante para auto-completar o código, de modo que não é necessário circular pelas opções em ordem alfabética.
Outra que pode ser bem útil é a Beautify, que padroniza a identação do código. É usada comumente com HTML, CSS, JS e JSON. Essa extensão procura deixar os códigos dentro de um padrão de formatação, melhorando a legibilidade.
Ícones
Algumas extensões podem modificar os ícones dos diferentes arquivos do VSCode, modificando, por exemplo, suas cores e ícones. Mas é importante salientar que, se isso acontecer, não quer dizer que há algo errado entre um editor e outro, ou que há diferenças no código em si.
Product Icon Theme
Além de extensões úteis que modificam os ícones, existem as que fazem apenas isso, como uma “continuação” da File Icon Theme. A Product Icon Theme permite a modificação de ícones como os da barra de status, breakpoints e os de visualização. Essa opção, embora disponível, ainda está em preview, ou seja, pode ser modificada a qualquer momento.
Fontes
Para personalizar ainda mais o Visual Studio Code, outra opção é o uso de outras fontes. O critério da escolha de fonte é o mesmo da escolha dos temas: escolha uma que seja facilmente legível e não se torne cansativa depois de muito tempo.
A fonte FiraCode é uma das mais conhecidas, além da Lucida Console – que é a fonte utilizada no Prompt de Comando do Windows – ou, ainda, a Consolas, a Space Mono e várias outras. É necessário atentar que algumas dessas fontes são gratuitas para baixar, enquanto outras não.
O jeito mais fácil de instalar uma nova fonte, que pode ser inclusive utilizado nos três sistemas operacionais (Windows, Linux e Mac) é procurando o link para download das fontes e instalá-las manualmente.
Conclusão
Espero que agora você já esteja familiarizado com possibilidades de estilização do Visual Studio Code. Agora você pode melhorar a experiência do usuário e deixá-lo com seu estilo.
