Melhorando a experiência com VSCode no Desenvolvimento Web

09 Fev 2018 · 3 min de leitura

Visual Studio Code é uma ferramenta incrível e sua adoção só vem aumentando. Por isso gostaria de trazer aqui uma lista de extensões que me ajudam bastante no dia-a-dia e espero que possa te ajudar também!

Separei as extensões em categorias pra você ir direto onde te interessa. Pra cada extensão adicionei uma breve descrição. Pretendo manter essa lista sempre atualizada com o que tem de melhor e em breve incluir novas categorias ;)

Categorias

  1. Uso Geral
  2. HTML, CSS e JS
  3. PHP
  4. Twig
  5. Markdown

Uso Geral

  • Settings Sync - Sincroniza todas as suas configurações, lista de extensões e customizações feitas no VSCode em um Gist no Github. Ótimo pra manter as configurações do seu editor sincronizada em casa e no trabalho, ou compartilhar suas configurações com os colegas!
  • GitLens - Pra ter um suporte decente ao Git dentro do VSCode. Recomendo ler atentamente a tela de configurações da extensão para deixar tudo bonitinho.
  • Better Comments - Estiliza as linhas dos comentários baseado no que tem no início de cada uma e também permite que você customize a estilização.
  • TODO Highlight - Para os casos onde você não quer configurar o Better Comments só pra ter um highlight no TODO...
  • SVG Viewer - Depois da 3 vez que você sair do editor pra ter abrir um SVG pelo gerenciador de arquivo, você vai querer instalar essa extensão.
  • Rainbown Brackets - Te poupa de ter que ficar navegando o cursor entre os parênteses, para identificar o outro parêntese correspondente, pois estiliza cada par diferentemente!

rainbow brackets

  • Path Intellisense - Simplesmente indispensável. Quando digitar "/" entre aspas ele lista todos os arquivos do diretório atual.
  • File Utils - Torna seu workflow um pouco mais rapido incluindo comandos e opções no menu de contexto para manipulação de arquivos. Com ele, você duplica arquivos facilmente e também cria arquivos em caminho de diretórios que ainda não existe.
  • Bookmarks - Chega de ficar memorizando linha e rolando pra cima e pra baixo! Com essa extensão você cria e navega facilmente entre os bookmarks definidos no arquivo.
  • DotENV - Pra os .env não ficar de fora do highlight :-)
  • EditorConfig for VS CODE - Sobrescreve as configurações do editor com as especificadas no arquivo .editorconfig do projeto aberto. Ótimo pra quem trabalhe em equipe.
  • Docker - Fornece uma série de comandos para interagir com Docker e um bem legal que gera todos os arquivos necessários para "dockernizar" seu projeto. Os arquivos já vem preenchidos para cada tipo de aplicação (Node, Go, Python, etc.).
  • file-icons - Gosto bastante do tema padrão "File Icons" que ajuda a diferenciar os arquivos no explorer.

HTML, CSS e JS

  • Auto Complete Tag - Meta-extensão que vai instalar outras duas: Auto Close Tag e Auto Rename Tag para ganhar mais produtividade ao trabalhar com tags.
  • Sorting HTML and Jade attributes - Para dar aquela organizada nos atributos das tags.
  • Color Highlight - Estiliza as referências de cores de acordo com cada cor (incluindo alpha), ex: #000000, rgba(0,0,0,.5).

highlight

Se você utiliza o JavaScript Standard Style tem duas extensões muito boas:

  • StandardJS - Javascript Standard Style into VS Code
  • JavaScript standardjs styled snippets

PHP

  • PHP Intelephense - Observe que essa é a PHP IntelePHense. Ela é menos popular mas traz alguns recursos a mais que a PHP IntelliSense.
  • PHP Namespace Resolver - Com ela você consegue importar os Namespaces de forma super prática e também ordena-los.
  • PHP DocBlocker - Resolve seu sofrimento com a criação de DocBlocks.
  • PHP Debug - Indispensável pra quem precisa debugar o código. Nas informações da extensão ele traz uma dica bem interessante pra configurar seu x-debug ;].
  • Format HTML in PHP - Pra te ajudar a entender o code spaghetti, daquele projeto super legado, que aceitou bravamente fazer manutenção! haha

Twig

Tentei várias e a que funcionou melhor pra mim foi a Twig Language. Se tiver problemas com a formatação do documento inteiro, tente selecionar todo o código e formatar apenas a seleção ;].


Markdown

A extensão que me ajudou na criação dessa postagem Markdown All in One. Ela permite coisas bem legais além do highlight, como autocomplete, formatação e atalhos.