Olá, pessoal!

Recentemente estava instalando meus programas no mac depois que ele voltou do conserto e ao instalar as extensões do VSCode e sempre aparece alguém perguntando quais extensões eu uso e hoje resolvi fazer um post pra deixar claro pra vocês quais uso atualmente (Janeiro/2020).

ESLint

ESLint by Dirk Baeumer

ESLint by Dirk Baeumer

ESLint do Dirk Baeumer é uma exetensão que irá checar se o seu código está escrito de acordo com as regras do seu arquivo .eslintrc.
Com esse plugin você irá ser “lembrado” de escrever um código seguindo os padrões definido por você ou seu time. Um bom estilo de código a se seguir em projetos JavaScript é o coding style do AirBnB.
Lembrando que você precisa ter a biblioteca eslint em seu projeto ou de forma global em sua máguina

Prettier – Code formatter

Prettier - Code formatter

Prettier – Code formatter

Prettier do Esben Petersen como o próprio nome ja diz é uma extensão que formata seu código. Bem similar ao ESLint ele também define como seu código será formatado e também formata o código pra você (quando o Format on Save tá habilitado). Para isso você precisa configurar o .prettierrc e ter biblioteca “prettier” instalada.

GitLens

GitLens

GitLens

GitLens do Eric Amodio é uma outra biblioteca que eu acho essencial quando se trabalha em equipe, pois ela mostra em qual commit cada linha foi alterada. É uma espécie de gitblame disponível em seu código em tempo real.

Import Cost

Import Cost

Import Cost

Import Cost do Wix é uma outra que eu acho muito interessante, pois quando você faz um import ou require ele te mostra o tamanho da biblioteca que você está importando e caso ela seja muito grande irá aparecer em vermelho, te lembrando que é uma biblioteca que pode pesar o seu bundle.

Live Server

Live Server

Live Server

Live Server do Ritwick Dey é uma mão na roda. Vamos supor que você esteja testando alguma coisa rapidinha em html/css/js estático e não quer criar um server pra ver o projeto rodando, o LiveServer cria um server pra você e traz de bonus um “live reload” que recarrega a página automaticamente quando você altera/salva o arquivo.

Bonus

Gostaria de falar também sobre algumas outras extensões que eu uso.

Filesize mostra o tamanho do arquivo atual

Filesize mostra o tamanho do arquivo atual

styled-components deixa a syntax dos styled components de forma mais legível.

styled-components

styled-components deixa a syntax dos styled components de forma mais legível.

vscode-icons coloca ícones nos arquivos de acordo com os seus tipos, facilitando a visualização.

vscode-icons

vscode-icons coloca ícones nos arquivos de acordo com os seus tipos, facilitando a visualização.

Obrigado pela leitura, compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!
Não se esqueça de nos seguir nas redes sociais, por que você não pode ficar de fora!

  1. Faça parte da nossa lista de Desenvolvedores ?
  2. Se inscreva em nosso canal do Youtube ?
  3. Curta nossa página no Facebook ?
  4. Não perca as atualizações no Twitter ?
  5. Veja as dicas no Instagram ?
  6. Siga nossos repositórios no Github ⌨️

@emersonbroga

Programador há mais de 15 anos, sou formado em Desenvolvimento de Sistemas pela Faculdade Pitágoras e pós-graduado em Gestão Estratégica de Marketing pela PUC Minas. Trabalhei em diversas agências de publicidade e desenvolvimento de software e atualmente trabalho em projetos internacionais como FOX.com, FXNetworks.com, NatGeo.com entre outros. Estou atualmente dedicando meu tempo a ensinar programação em meu blog e redes sociais. Saiba mais em https://emersonbroga.com/e/sobre/.