Extensões do Visual Studio Code para um Front-end

Hoje vim trazer extensões do Visual Studio Code que eu uso e que me ajudam muito no dia a dia, esse post foi inspirado no post Extensões do Visual Studio Code para um SRE da Laryssa Araujo onde ela mostra as ferramentas que ela usa no dia a dia como uma SRE.

Não vou falar sobre todas as extensões que eu tenho instalado aqui, tenho algumas para mexer com Elixir/Phoenix, Docker e etc... vou falar apenas das que eu mais uso e que me ajudam no dia a dia como Front-end.

1. Auto Rename Tag: Essa extensão é muito útil para quem trabalha com HTML, ela renomeia a tag de abertura e fechamento automaticamente, evitando que você tenha que ficar renomeando as tags manualmente.

2. Code Spell Checker: Essa extensão é muito útil para corrigir erros de digitação, ela verifica a palavra e mostra se existe algum erro de digitação, exemplo quando escrevemos lenght ao invés de length, que acontece muito comigo.

3. Brazilian Portuguese - Code Spell Checker: Essa extensão é uma extensão da extensão anterior, ela adiciona um dicionário de palavras em português, para que a extensão anterior possa verificar as palavras em português.

4. Svg Preview: Essa extensão mostra uma prévia do SVG direto no VSCode, assim você não precisa abrir o arquivo no navegador para ver o svg.

5. Community Material Theme: Essa extensão é apenas o tema que eu mais gosto, gosto de usar a versão Material Theme Darker.

6. Material Icon Theme: Essa extensão é apenas o tema de ícones que eu mais gosto.

7. Import Cost: Essa extensão mostra o tamanho do pacote que você está importando, assim você pode ver se o pacote é muito grande e se vale a pena usar ele.

8. Git Lens: Essa extensão é bem completa, tem muita coisa, mas para falar a verdade eu uso muito ela para verificar quem fez a última alteração no arquivo direto no VSCode e também conseguir ir direto para o arquivo no GitHub ou Pull Request.

9. GitHub Copilot: Essa extensão não tem muito que dizer, é o famoso GitHub Copilot, tem me ajudado bastante a criar códigos que são mais repetitivos,e também funciona muito bem para documentação e comentários.

10. EditorConfig for VS Code: Essa extensão é muito útil para quem trabalha em projetos com várias pessoas, ela ajuda a manter o padrão de código, como por exemplo, indent_style, indent_size, insert_final_newline e etc... criamos um arquivo .editorconfig na raiz do projeto e configuramos o que queremos que seja o padrão.

Comments

[Nathan Ferreira]

Muito obrigado Richard, vou testa-las! :D

[Adriana Mucciolo]

Boas sugestões, conhecia a maioria. Github copilot é muito bom,mas pago… usei o trial de 2 meses e achei uma boa alternativa grátis, o Codeium. Vale testar.