Cara mt maneiro esse post, instalei algumas dessas extensões aqui no meu vscode. Tu n tem algumas recomendações de tema tbm?
Quanto a temas amigo, o pessoal geralmente gosta bastante do Dracula. Tem também o Nord, Monokai Pro, Spotify Theme, One Dark Pro e assim por diante. Se você pesquisar por temas nas extensões do vscode, vai achar bastante.
O problema é que as vezes a gente até gosta de algum tema, mas alguns aspectos dele podem não nos agradar ou até cansar a vista. Nesse caso, se você quiser, é possível pegar um tema como base e modificar partes dele. Para isso, você pode acessar o arquivo settings.json
(um jeito fácil de fazer isso é usando a paleta de comandos com Ctrl + Shift + P
e digitar user settings) e adicionar algumas configurações.
Seguem abaixo alguns links que podem ajudar a saber que configurações colocar:
- https://code.visualstudio.com/api/extension-guides/color-theme
- https://code.visualstudio.com/api/references/theme-color
- https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme
- https://code.visualstudio.com/docs/getstarted/settings
Mas resumidamente, você consegue editar um tema através de duas chaves nesse arquivo json. workbench.colorCustomizations
e editor.tokenColorCustomizations
. Você pode especificar qual tema quer customizar e que cores e estilos deseja mudar. Seguem abaixo alguns exemplos para ficar mais claro.
workbench.colorCustomizations
"workbench.colorCustomizations": {
"[Dracula]": {
"editor.background": "#ff0000",
"editorGutter.background": "#00ff00",
"sideBar.background": "#0000ff",
"activityBar.border": "#ffffff"
}
},
workbench.colorCustomizations
é usado para mudar as cores de coisas do próprio editor, como a cor de fundo, a cor do terminal, as bordas, etc. No exemplo acima, estamos mudando as cores do tema Dracula
, fazendo com que o fundo do vscode fique vermelho, o fundo do gutter (coluna que mostra os números das linhas) fique verde, a barra lateral fique azul e a borda da barrinha que fica na parte debaixo fique branca.
Existem muitas outras coisas que dá para customizar. Na documentação mostra o que é cada coisa, mas é bem grande e pode ser bem chatinho de encontrar. Então se você assim desejar, pode usar Ctrl + Espaço
e ir vendo quais são as opções.
editor.tokenColorCustomizations
"editor.tokenColorCustomizations": {
"[Dracula]": {
"textMateRules": [
{
"scope": [
"entity.name.tag",
"entity.name.tag.js.jsx",
"entity.name.tag.js",
"entity.name.tag.html",
"keyword",
"keyword.operator.assignment",
"keyword.control",
"keyword.operator.logical",
"keyword.operator",
"keyword.other.unit",
"keyword.other.special-method.dockerfile",
"punctuation.separator.slice",
"punctuation.separator.key-value",
"punctuation.definition.keyword",
"punctuation.definition.template-expression.begin",
"punctuation.definition.template-expression.end",
"punctuation.definition.entity.css",
"punctuation.separator.annotation",
"punctuation.separator.inheritance",
"storage.type",
"storage.modifier",
"constant.character.escape",
"meta.at-rule",
],
"settings": {
"foreground": "#5500aa"
}
}
{
"scope": [
"variable.parameter",
"meta.type.parameters entity.name.type"
],
"settings": {
"foreground": "#ffff00",
"fontStyle": "italic"
}
}
]
},
editor.tokenColorCustomizations
já serve para mudar os highlights dos textos, palavras chave e símbolos. No exemplo acima estamos mmodificando algumas configurações do tema Dracula
. Note que foi aberta uma outra chave, chamada textMateRules
. O valor dela deve ser um array de objetos, cada um com scope
(o que vai ser modificado) e settings
(qual é a cor e o estilo de fonte que vai ser aplicado).
Agora um detalhe, como saber quais valores esse scope
deve receber? De onde vem essas strings
"entity.name.tag"
, "punctuation.definition.template-expression.begin"
e assim por diante? Até certo ponto, com Ctrl + Espaço
dá para descobrir muita coisa. Mas muitas vezes não.
Nesses casos, para descobrir isso, basta abrir algum arquivo qualquer com código. Em seguida abrir a paleta de comandos (Ctrl + Shift + P
) e procurar por Editor Tokens and Scopes. Daí é só ir clicando nos trechos do código que você quiser, e vai aparecee um pop up mostrando vários detalhes, entre eles, quais são os text mate scopes
daqueles trechos.
Espero ter ajudado.