Dominando o VS Code

30 de abril de 2018 · Leitura de 3 minutos

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.
Gitmoji - Facilita adição do padrão gitmoji.
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.

Plugins​

Settings​

Plugins

Settings