MAIS Extensões MARAVILHOSAS para o Vscode!

Autorizado! Já fiz mais um post sobre extensões se quiser dar uma olhada, so clicar [aqui](https://www.tabnews.com.br/josevictormoreno/5-extensoes-maravilhosas-para-o-vscode)

Quanto a temas amigo, o pessoal geralmente gosta bastante do [Dracula](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula). Tem também o [Nord](https://marketplace.visualstudio.com/items?itemName=arcticicestudio.nord-visual-studio-code), [Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode), [Spotify Theme](https://marketplace.visualstudio.com/items?itemName=oguhpereira.spotify-color-theme), [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) 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 ```json "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 ```json "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.