Personalização do código VS

Visual Studio Code
personalização
temas do editor de código
Personalização do código VS cover image

Introdução

O Visual Studio Code (VS Code) é um dos editores de código mais populares na indústria tecnológica, uma vez que oferece funcionalidades robustas e um design leve que o tornaram o editor de código preferido dos programadores de todo o mundo. A sua popularidade pode ser atribuída, em parte, à sua aparência personalizável, que nos permite criar espaços de codificação extravagantes e apelativos. Neste artigo, vamos explorar como personalizar a aparência do vs code de acordo com as suas preferências, incluindo temas do editor de código, temas de ícones e alterações de cor da barra de ferramentas.

Temas de ícones

Embora os ícones predefinidos do Visual Studio Code sejam bons, porquê limitar-se a eles quando pode ter um banquete visual? Pode alterar o aspeto do seu explorador de ficheiros com temas de ícones, que melhoram tanto o seu aspeto visual como a sua usabilidade.

Uma das escolhas mais populares entre os programadores é a extensão Material Icon Theme. Com esta extensão, o seu explorador de ficheiros terá uma coleção de ícones coloridos e bem organizados, inspirados no Material Design da Google. Cada tipo de ficheiro tem o seu próprio ícone distinto e imediatamente identificável, o que melhora o aspeto geral do seu espaço de trabalho.

Para instalar a extensão Material Icon Theme, siga estes passos:

  1. Abra o Visual Studio Code.

  2. Aceda à vista Extensões clicando no ícone Extensões na barra de ferramentas do lado esquerdo da janela.

  3. Procure o "Material Icon Theme" e clique em instalar.

Após a instalação, clique no ícone da engrenagem no canto inferior esquerdo e seleccione "File Icon Theme" (Tema do ícone do ficheiro) para escolher o Material Icon Theme (Tema do ícone do material).

Temas do editor de código

Agora que o explorador de ficheiros tem bom aspeto, vamos concentrar-nos no próprio editor de código. Embora os temas claros e escuros predefinidos do VS Code sejam óptimos, há ocasiões em que gostaria de algo um pouco mais personalizado e elegante.

Uma boa opção como tema, especialmente para aqueles que preferem codificar no escuro, é a extensão de tema Night Owl. O Night Owl, que foi criado a pensar no contraste e na legibilidade, tem um esquema de cores calmante que ajuda a aliviar a tensão ocular durante sessões de programação prolongadas.

Para instalar a extensão do tema Night Owl:

Navegue até à vista Extensões.

Procure por "Night Owl" e clique em instalar.

Após a instalação, escolha Night Owl como tema abrindo a paleta de comandos (Ctrl Shift P no Windows/Linux, Cmd Shift P no macOS), seleccionando "Tema de cor" e escolhendo Night Owl na lista de temas instalados no seu editor de código.

Cor da barra de ferramentas

Agora que a aparência e a sensação do seu editor de código estão perfeitas, vamos personalizar a cor da barra de ferramentas para colocar a cereja no topo do bolo. É aqui que a extensão peacock entra em ação.

Graças à extensão Peacock, pode personalizar o seu espaço de trabalho alterando a cor da barra de ferramentas na parte lateral do seu editor de código. Não só é esteticamente agradável, mas se tiver várias instâncias do VS Code abertas, também pode ajudar a distinguir entre elas.

Para instalar a extensão Peacock:

  1. Aceda à vista Extensões.

  2. Procure "Peacock" e clique em instalar.

Após a instalação, pode personalizar a cor da barra de ferramentas abrindo a paleta de comandos, procurando por "Peacock: Introduza uma cor" e, em seguida, coloque o valor hexadecimal da cor que pretende definir para a sua barra de ferramentas de código vs.

Conclusão

Personalizar o código do Visual Studio é mais do que apenas mudar as cores. Também é necessário criar um ambiente de codificação que corresponda ao seu estilo e aumente a produtividade. Por isso, sinta-se à vontade para brincar e criar uma área de codificação que estimule a sua imaginação em termos de aparência, bem como explorar outras funcionalidades sofisticadas do fantástico VS Code. Boa programação!


Career Services background pattern

Serviços de carreira

Contact Section background image

Vamos manter-nos em contacto

Code Labs Academy © 2024 Todos os direitos reservados.