📂 Contexto

Nesta Publicacao irei falar sobre as principais extensoes, na minha opiniao, para Desenvolvimento Web

🧱 HTML

Auto Close Tag

Como o nome ja diz, serve para completar com o fechamento da tag que voce esta utilizando. Por exemplo:
Caso voce digite <tag>, automaticamente ele ira completar com o fechamento <tag></tag>

Auto Rename Tag

Como o nome ja diz, serve para renomear a tag sem precisar trocar no inicio dela e no fechamento. Isso facilita muito em arquivos .html grandes. Por Exemplo:
Caso voce troque o comeco <tag> -> <tag2>, automaticamente o fechamento da tag vai trocar.
Nao funciona muito bem com Auto Imports, outra extensao focada em JavaScript.

Inline Fold

Caso voce utilize Frameworks CSS como o Tailwind, que deixam os seus atributos de class ou className gigantescos, ela automaticamente ira transformar todo o conteudo desses atributos em ... ficando <tag class="..."> e para voce visualizar o que esta dentro eh so clicar em cima

Live Share

Serve para criar um servidor local do seu arquivo HTML. Clique com o botao direito no seu arquivo .html e selecione Abrir com o Live Server.

🔠 JavaScript / TypeScript

Auto Import

Como o nome ja diz, eh uma extensao que facilita sua vida em relacoes a Imports. Ela da auto complete, encontra os caminhos, faz parse e muito mais.

ESLint

Serve para integrar o ESLint para JavaScript no VSCode. Normalmente vem acompanhada com algumas Configuracoes no proprio VSCode, mas eh modernamente utilizada nos projetos com o arquivo de configuracao proprio, como o .eslintrc

Prettier

Serve para Formatar, Alinhar e Organizar seus codigos nos arquivos. Isso ajuda a manter um padrao entre desenvolvimentos com multiplas pessoas ou nao. Lembre-se de ativar o Prettier no seu VSCode atraves da Configuracao de Formatador Padrao (Default Formatter).

JavaScript (ES6) code snippets

Como o nome ja diz, eh uma extensao que nos da snippets para JavaScript. Por exemplo:
Caso voce escreve no seu editor imp, ele ira completar com import moduleName from 'module'

Import Cost

Como o nome ja diz, coloca o tamanho em Kb's dos imports no seu arquivo. Isso nos ajuda a prestar atencao nos tamanhos, pois isso pode prejudicar a performance do nosso projeto. O tamanho ira aparecer na mesma linha do Import.

Quokka.js

Uma extensao que roda seus arquivos JavaScript diretamente no VSCode, sem precisar do Node instalado ou extensoes como code runner. Ela roda o seu arquivo em tempo real, sem auxilio do terminal e tudo fica nas proprias linhas do VSCode, entao voce consegue colocar console.log() que iram aparecer instantaneamente sem precisar rodar o arquivo a cada alteracao

Wallaby.js

Funciona como o Quokka.js mas para testes unitarios. Ela roda o arquivo em tempo real e mostra os resultados nas linhas do proprio VSCode, sem auxilio do Terminal.

TypeScript Hero

Em principio, ela organiza e ordena seus imports nos arquivos, e tambem remove imports nao utilizados e muito mais.

🟨 DotEnv

DotEnv

Ajuda no Syntax Highlight para arquivos como .env

📂 Git & Github

Git Graph, GitLens -- supercharged, Git History

Todas essa sao extensoes que ajudam na manipulacao do seu projeto que utiliza o Git para versionamento. Nao vou falar tudo que elas mostram, pois a documentacao eh bem completa.

⚙️ Geral

Code Spell Checker

Serve como um corretor de texto que nos indica se a palavra faz parte da lingua selecionada ou nao.

CodeSnap

Serve para tirar prints bonitos do seu codigo sem precisar sair do VSCode. Apenas utilize F1 ou CTRL+P para abrir o Command Pallete e procure por CodeSnap. Apos Abrir uma Aba do CodeSnap, seleciona o code em questao.

Error Lens

Uma das melhores, ela da mais visibilidade em Errors, Warnings, Suggestions no seu Codigo. Ela pinta a linha da cor especifica para o tipo e coloca a informacao logo apos ao termino da linha em questao.

Live Share

Voce consegue abrir um servidor do seu projeto e compartilhar com os outros para voces codarem em tempo real e juntos.

Path Intellisense

Faz Autocompletes de nomes de arquivos quando voce esta tentando acha-los com ./pasta/arquivo por exemplo

Versions Lens

Simplesmente mostra as Versoes mais atuais das dependencias do seu package.json, ajuda a saber se voce esta atualizado ou nao.

🌐 React

ES7+ React/Redux/React-Native snippets

Serve para nos dar Snippets para o React. Por Exemplo:
Caso voce escreva imr, automaticamente ira virar import React from 'react'

Console Ninja

Parecido com o Quokka.js e Wallaby.js, faz em tempo real os console.log() do seu arquivo React.