Nesse post irei comentar sobre as extensões e configurações que utilizo no meu VS Code
Segundo a última pesquisa da Stack Overflow, o Visual Studio Code continua sendo o IDE preferencial em todos os desenvolvedores com mais de 70% de preferencia dos usuários.
Você pode configurar o Visual Studio Code ao seu gosto por meio de suas várias configurações. Quase todas as partes do editor, da interface do usuário e do comportamento funcional do VS Code têm opções que você pode modificar.
Começado pelo tema, eu pessoalmente sou fã do Noctis Obscuro.
Mas a dica que eu passo é o site VS Code Themes, onde você pode ver uma demonstração dos temas disponíveis no VS Code, veja todos ou filtre entre Dark e Light.
Escolha um e clique no botão VS Code, ele irá abrir o VS Code já selecionando a extensão do tema escolhido.
Já a fonte eu recomendo a Fira Code disponível no GitHub no link, ela é uma fonte monoespaçada livre contendo ligaduras, quando vários caracteres são representados por um único símbolo ou glifo.
Extensões para VS Code
Estas são as extensões que estou utilizando no momento, principalmente referente à programação em JavaScript/TypeScript.
Material Icon Theme
Material Icon Theme — Visual Studio Marketplace
O Material Icon Theme é uma excelente extensão para uma organização visual dos seus arquivos e pastas no VS Code. Ele possui inúmeros ícones para cada tipo de arquivos, linguagens e pastas, onde cada item será identificado por um desses ícones.
O legal é que ele identifica grande parte de libs e ferramentas mostrando os ícones de acordo com a linguagem utilizada.
Todo Tree
Todo Tree — Visual Studio Marketplace
Essa extensão pesquisa rapidamente seu espaço de trabalho em busca de marcas de comentário como TODO e FIXME e as exibe na forma de árvore na barra de atividades. Ótimo para quem mostrar todas as tarefas pendentes dentro de um determinado projeto.
Quando implementado corretamente, ele permite que você navegue pelo seu código como um desenvolvedor profissional e pule seções facilmente.
Color Highlight
Color Highlight — Visual Studio Marketplace
Esse plugin mostra a cor exata de todos RGB’s ou HEX no código, muito útil para quem trabalha com CSS ou SASS.
GitLens — Git supercharged
GitLens — Git sobrealimentado — Visual Studio Marketplace
O GitLens simplesmente ajuda você a entender melhor o código. Vislumbre rapidamente quem, por que e quando uma linha ou bloco de código foi alterado. Volte pela história para obter mais informações sobre como e por que o código evoluiu. Explore sem esforço a história e a evolução de uma base de código.
Import Cost
Import Cost — Visual Studio Marketplace
Esta extensão mostra o tamanho de uma biblioteca de terceiros importada no momento em que você a importa (ou vários momentos depois).
Markdown All in One
Markdown All in One — Visual Studio Marketplace
Apesar do VS Code ter suporte básico para Markdown pronto para uso, aconselho a extensão para escrever e ler Markdown, muito útil para documentações o README’s do Github, ela é bem completa e com vários recursos funcionais como visualização ao vivo e destaque de sintaxe.
Code Spell Checker
Code Spell Checker — Visual Studio Marketplace
Para quem, que como eu, esta iniciando no inglês, segue um corretor ortográfico básico que funciona bem com código e documentos.
Ela nos ajuda a escrever um código com a sintaxe correta, especialmente se você está escrevendo tudo em inglês. Algo bem interessante dessa extensão é que você pode baixar os dicionários de forma independente, podendo inclusive usar vários dicionários ao mesmo tempo.
Outro exemplo com sugestões:
Segue o link da versão em português do Brasil: Brazilian Portuguese — Code Spell Checker — Visual Studio Marketplace
Além das extensões, recomendo algumas configurações para facilitar a legibilidade e edição do código, veja como ficou o meu settings.json.
{
// Link com as configurações
// https://code.visualstudio.com/docs/getstarted/settings
// Define o tema do VS Code
"workbench.colorTheme": "Noctis Obscuro",
//Configura tamanho e família da fonte
"editor.fontSize": 12,
"editor.lineHeight": 22,
"editor.fontFamily": "Fira Code",
// Habilita as ligaduras
"editor.fontLigatures": true,
// Aplica um sinal visual na esquerda da linha selecionada
"editor.renderLineHighlight": "gutter",
// Aplica linhas verticais para lembrar de quebrar linha em códigos muito grandes
"editor.rulers": [
100,
120
],
// Define a fonte do terminal
"terminal.integrated.fontSize": 12,
// Altera visualização da arvore de pastas
"explorer.compactFolders": false,
// Habilita a barra de navegação acima de seu conteúdo
"breadcrumbs.enabled": true,
// Configurações das extensões
"workbench.iconTheme": "material-icon-theme",
// Configuração de linguagem do Code Spell
"cSpell.language": "en,pt,pt_BR",
// Configuração do Todo Tree
"todo-tree.general.tags": ["NOTE", "TODO", "FIXME", "DOC", "BUG"],
"todo-tree.highlights.defaultHighlight": {
"type": "tag",
"fontWeight": "bold",
"foreground": "#000000",
"opacity": 90
},
"todo-tree.highlights.customHighlight": {
"NOTE": {
"background": "#FFA500",
"iconColour": "#FFA500",
"icon": "file"
},
"TODO": {
"background": "#FFD703",
"iconColour": "#FFD703",
"icon": "tasklist"
},
"FIXME": {
"background": "#FF01FF",
"iconColour": "#FF01FF",
"icon": "bug"
},
"DOC": {
"background": "#157EFB",
"iconColour": "#157EFB",
"icon": "tag"
},
"BUG": {
"background": "#ff000080",
"iconColour": "#ff000080",
"icon": "flame"
}
},
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
}
Você pode abrir o seu a partir do comando Preferences: Open Settings (JSON).
Espero que você tenha gostado desse post, se tiver alguma dica para melhorar ainda mais o meu ambiente, deixe aqui nos comentários. Em caso de dúvidas deixe sua pergunta nos comentários ou me procure no LinkedIn.
Abraço!
Top comments (0)