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.