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.
Nossa cara, mt obrigado, era exatamente isso que eu precisava!