Extensões do Visual Studio Code para um Front-end
Tags: frontend, vscode
Published: 2023-09-13 01:36:17

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](https://dev.to/laryssa/extensoes-do-visual-studio-code-para-um-sre-2nj5) da [Laryssa Araujo](https://dev.to/laryssa) 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](https://marketplace.visualstudio.com/items?itemName=formulahendry.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](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.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](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-portuguese-brazilian): 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](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.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](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-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](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme): Essa extensão é apenas o tema de ícones que eu mais gosto.

7. [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-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](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens): 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](https://marketplace.visualstudio.com/items?itemName=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](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig): 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.