2

VSCode | O "diferentão" e o "Igualzão"

#Programação para Internet #JavaScript #CSS
Clovis Costa
Clovis Costa

No passado, num dos bootcamps que estava fazendo, percebi que o mestre usava um "diferentão" e um "igualzão" no código dele. E ficava muito legal. Então fui atrás para descobrir como é que o doutor fazia aquilo.


Quando estamos programando em Javascript, normalmente precisamos comparar os valores de duas variáveis. Se é preciso comparar só o valor, usamos dois sinais. Para ver se são iguais usamos "==", para diferentes "!=".


Em muitos casos, porém, precisamos comparar não só os valores das variáveis mas, também o tipo das mesmas, se são strings, int, float, etc.... Nestes casos acrescentamos mais um sinal de "=" para verificar valores e tipos. Para igualdade "===" e para diferença "!==".


É daí que saiu a expressão "diferentão" e "igualzão". Utilizando uma propriedade chamada "Font Ligatures", dentro do JSON de configuração do VSCode, podemos alterar a forma como visualizamos estes sinais na tela. Veja como fica:



Para alterar estas propriedades foi preciso instalar a fonte "Fira Code", que pode ser baixado no link no final do artigo. Depois de instalada, você clica:


1 - Naquela roldana de engrenagem no canto inferior do VSCode;

2 - Em Configurações (Settings);

3 - Depois em Editor de Texto (Text Editor);

4 - Clica em Fonte (Font);

5 - Depois, no meio da tela, em "Edit in settings.json";

6 - Daí, substitua o conteúdo do arquivo json pelos valores abaixo e salve:


{
    "workbench.colorTheme": "Monokai",
    "workbench.iconTheme": "material-icon-theme",
    "editor.fontWeight": "500",
    "editor.fontSize":16,
    "editor.lineHeight":24,
    "editor.fontFamily":"Fira Code",
    "editor.fontLigatures":true,
}


Perceba que no código acima também se altera o tema do editor para Monokai e o tema dos ícones, que são os que eu prefiro e é exibido na imagem no final do artigo. Se desejar manter seu tema preferido, altere apenas as linhas abaixo:


 "editor.fontFamily":"Fira Code",
 "editor.fontLigatures":true,


Segue abaixo o link para a baixar a fonte Fira Code e a imagem do meu VSCode com as alterações acima, mais as alterações do meu outro artigo "VSCode | Extensões para aumentar a produtividade".


Fonte Fira Code


Imagem do VSCode com todas as customizações:


Tenho sentido muito mais prazer ao programar deixando a IDE do jeito que mais me agrada. Espero que você também encontre a sua configuração ideal. Não existe certo e errado. O que realmente importa é que nos impulsione para o próximo nível.


#portugolnoprezinho

6
133

Comentários (6)

0
D

Douglas Pires

25/03/2021 00:20

obrigado pela dica, começando agora por esta área.

0
Clovis Costa

Clovis Costa

19/12/2020 13:55

Valeu pessoal! Sucesso na jornada para todos vocês.

0
R

Raniere Rocha

19/12/2020 10:59

Olá Clovis e colegas,


Atualmente estou usando o FireCode iScript, é uma fonte bem agradável de trabalhar. Vou estar deixado uma print em baixo de como ela é.



eu gosto particularmente de trabalhar em HTML usando essa font...


pra quem quiser experimentar também, o link para o repositório deles no github onde tem as explicações de como instalar tudo direitinho esta aqui fiquem a vontade :D

0
Cristiane Marinho

Cristiane Marinho

19/12/2020 05:53

Excelente explicação Clovis! Obrigada por compartilhar.

0
Lucas Magalhães

Lucas Magalhães

19/12/2020 00:43

Já me questionei sobre isso. Valeu!

0
Francisca Santos

Francisca Santos

18/12/2020 23:58

Valeu pela dica 👏👏

https://www.linkedin.com/in/clovisdaniel

Brasil