MAIS Extensões MARAVILHOSAS para o Vscode!

Autorizado! Já fiz mais um post sobre extensões se quiser dar uma olhada, so clicar aqui

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.