Recent posts

Dominando o VS Code

Já tem alguns anos que adotei o Visual Studio Code como minha IDE principal para desenvolvimento web. Neste artigo vou mostrar como eu o turbinei com plugins e configurações para ser muito mais produtivo.

Plugins

Utilidade gerais:

  • vscode-icons – ícones para arquivos e diretórios do explorer, deixa muito mais fácil a navegação.

  • Dracula Official – Tema dark.

  • EditorConfig – integração do VS Code com o EditorConfig, que é uma forma de manter a configuração entre diferentes IDE’s do mesmo projeto, mas para isso o projeto precisar ter seu próprio arquivo .editorconfig.

  • Code Spell Checker – Um corretor ortográfico que funciona bem com o código camelCase, ótimo para evitar erros de digitação.

  • Brazilian Portuguese – Code Spell Checker – Dicionário pt-BR para o Spell Checker.

  • Coverage Gutters – Se você é um bom programador e gosta de cobrir todo seu código por testes, este plugin vai te ajudar a ver quais são as linhas cobertas ou não direto no VS Code.

  • SVG Viewer – Visualizar de imagens SVG.

  • GitLens – Adicionar alguns recursos extras para o Git.

  • Emoji – Uma forma de adicionar emojis no texto.

  • Bookmarks – Torna possível marcar como favorito linhas em arquivos. Eu uso muito para arquivos que uso muito e sempre tenho dificuldade de achar, em casos de projetos grandes.

  • Markdown All in One – Habilita suporte para Markdown.

  • Auto Rename Tag – Sincroniza a alteração da tag HTML da abertura com o fechamento.

  • CodeSnap – Tira screenshots do seu código, do arquivo todo ou só da parte que você selecionar.

Específicos para front-end:

Settings

Configurações do ambiente:

{
/* Exibe uma linha para que ajuda a demarcar o limite de caracters.
80 é o valor padrão do Prittier */
"editor.rulers": [80],
/* Alguns arquivos são inconvenientes na hora de realizar uma busca,
então eu removo algumas extensões. */
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/.DS_Store": true,
"build/**/*.*": true,
"coverage/**/*.*": true
},
/* O VSCode exibe o conteúdo quando clico no arquivo, isso me atrapalha muito,
então eu deixo desabilitado */
"explorer.autoReveal": false,
/* Remove espaço a direita de todas as linhas ao salvar o arquivo */
"files.trimTrailingWhitespace": true,
/* Formata o arquivo ao salvá-lo */
"editor.formatOnSave": true,
/* Habilita o plugin de ícones (link acima) */
"workbench.iconTheme": "vscode-icons",
/* Habilita o EMMET */
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
/* Habilita o breadcumb */
"breadcrumbs.enabled": true
}

Você pode deixar isso como configuração pessoal ou você pode colocar como configuração do projeto no arquivo .vscode/settings.json na raiz do seu projeto.

Eu separei minha lista de snippets em outro post.