As melhores dicas, temas e extensões para o VS Code

VS Code - Dicas, Extensões e Temas

As melhores dicas, temas e extensões para o VS Code

As melhores dicas, temas e extensões para o VS Code 1240 700 Bruno Brito

Se trabalhas com código com alguma frequência, provavelmente ja terás ouvido falar do Visual Studio Code – um editor de texto gratuito da Microsoft que surgiu há pouco tempo no mercado, mas que rapidamente se tornou numa aplicação indispensável para muitos programadores.

Quem me conhece, sabe que sou um enorme fã do SublimeText – um editor de texto apreciado não só pela sua velocidade, como pela quantidade de fantásticos atalhos de teclado e plugins disponíveis tanto para programação como para a escrita de artigos.

No entanto, tenho dado por mim a passar cada vez mais tempo no VS Code – tem alguns plugins (ou, como a Microsoft lhe chama, extensões) verdadeiramente indispensáveis, e uma enorme comunidade empenhada em transformar este editor de texto na melhor solução disponível.

Nesta viagem, tenho aprendido bastante sobre como personalizar e tirar o maior partido deste editor. É precisamente isso que vou partilhar hoje.

Vamos a isto!

Para quem vem do Sublime…

Se, como eu, estás demasiado habituado aos atalhos e ao look do SublimeText, sugiro que comeces por instalar o Sublime Keymap, uma extensão criada pela própria Microsoft que coloca os atalhos de teclado do VS Code idênticos aos do Sublime (estes são os meus atalhos preferidos, já agora ????).

Outros 2 bons companheiros que farão sentido instalar de imediato serão o Auto Close Tag e o Auto Rename Tag, porque de origem o VS Code não fecha as tags HTML que crias.

Se fores às definições do Code, vais encontrar uma coluna à direita onde podes inserir as tuas alterações às definições originais.

Aqui, recomendo fortemente que adiciones "editor.dragAndDrop": true para que possas seleccionar texto e depois movê-lo livremente com o rato e editor.multiCursorModifier": "ctrlCmd" para usares o mesmo atalho que o Sublime para inserir o cursor em várias posições diferentes e alterar tudo ao mesmo tempo.

Por fim, podes inserir "window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}" para ficares com o caminho completo do ficheiro na barra superior do programa.

Definições do VS Code

Extensões

Como trabalho sobretudo com frameworks JavaScript (como React), serão maioritariamente essas extensões que receberão destaque. Vamos conhecê-las!

Live Server

Muito útil para rapidamente “disparares” um servidor que automaticamente refresca a página após cada save. Uma espécie de BrowserSync sem configurações complicadas, que podes activar a qualquer momento clicando no botão do rodapé do editor.

Live Server para VS Code

Quokka

O Quokka é uma das melhores ferramentas para aprenderes (ou ensinares) JavaScript, porque para além de trazer um linter, corre o teu código à medida que o escreves, apresentando os resultados de imediato no editor.

Quokka para VS Code

A “Community edition” é gratuita e dá-te acesso às funcionalidades mais importantes. Se quiseres, podes adquirir a “Pro edition”, que instala packages de JavaScript por ti e importa outros ficheiros do teu projecto, entre outras funcionalidades.

A Pro Edition custa $100, mas podes experimentá-la sem restrições durante o tempo que quiseres – o único problema é que o teu editor terá ocasionalmente de ser reiniciado.

Prettier

Disponível para praticamente qualquer editor (para além de VS Code, existe para Atom, Sublime, WebStorm, vim e Emacs), o Prettier formata o teu código, para assegurar consistência no estilo – de momento, já oferece suporte para JavaScript (incluindo JSON, JSX, TypeScript e FLow), CSS, GraphQL e até Markdown.

Prettier logo

Poderás ter de passar algum tempo a configurar as definições, mas a partir daí, não terás de pensar mais em formatação – o Prettier pode até actuar após cada save, melhorando a legibilidade do teu código de imediato!

Import Cost

Uma extensão que te indica o custo de um import ou require em JavaScript. Assim, poderás reduzir o peso do teu bundle.

Import Cost para VS Code

O autor, que trabalha na Wix, explica as razões que o levaram a criar esta extensão neste artigo.

Debugger for Chrome

Esta é uma das extensões mais populares, e por um bom motivo – quando devidamente configurado, poupa-te muitas refrescadelas no Chrome, visto que consegues ver toda a informação necessária no debugger presente no VS Code.

Chrome Debugger para VS Code

Se estiveres com dificuldades em configurar esta extensão, este tutorial poderá ajudar-te!

Color Info

Esta extensão analisa as cores dos teus ficheiros CSS (ou Sass, ou LESS) e apresenta-te as cores nos seus vários formatos – seja hexadecimal, RGB, HSL ou CMYK. Bastante útil naquelas alturas em que tens de passar uma cor hexadecimal para RGB.

Color Info para VS Code

Markdown All in One e Word Count

Para artigos, é uma óptima ideia aprender a escrever em Markdown. Com o Markdown All in One, fica ainda mais fácil formatares texto, graças a atalhos como CMD + B para colocar o texto a Negrito ou CMD + I para itálico.

A extensão oferece-te também a possibilidade de exportar ficheiros Markdown em HTML ou PDF, Live Preview para visualizares de imediato o aspecto final, e um formatador de tabelas.

Markdown All in One para VS Code

No campo do blogging, outra extensão que te dará jeito será o Word Count, que como o nome indica, conta o número de palavras do teu artigo.

Temas e Tipos de Letra

Se passas muito tempo no teu editor de texto, escolher um bom tema é fundamental. Vai ficar tudo muito mais agradável à vista, o que se pode traduzir em maior produtividade junto ao computador! ????

Vario o tema consoante a ocasião, mas sou fiel a estes 3. Vê lá se algum é do teu agrado:

  • Firewatch: o meu tema habitual, visto que adoro tons de laranja!
  • Nova: um tema mais suave, com tons pastel, que é bem “levezinho” para a vista.
  • Material Theme: provavelmente, o tema mais popular da actualidade. Aqui, utilizo sobretudo a variação de cor “Light” nas alturas em que preciso que o editor tenha o fundo branco (por estar, por exemplo, ligado ao projector). A variação “Palenight” também é bem apelativa!

Firewatch para VS Code

Quanto aos Tipos de Letra, gosto bastante da CamingoCode, mas a Fira Code também merece alguma atenção, por suportar ligaduras tipográficas, úteis por exemplo para JavaScript.

Se quiseres utilizar esta última, para além de inserires "editor.fontFamily": "'Fira Code'" nas definições, deves adicionar ainda outra linha: "editor.fontLigatures": true.

Fira Code em JavaScript

Conclusão

O VS Code ainda é jovem, mas já apresenta um enorme leque de possibilidades para programadores. Seja pela enorme oferta de extensões/temas ou por suportar tipos de letra com ligaduras, é já um editor robusto que merece forte consideração da tua parte.

Com o passar do tempo, a previsão é que fique um editor ainda mais completo – pelo caminho surgirão, certamente, ainda mais extensões e truques para conhecer.

Se entretanto tiveres alguma dica a acrescentar, manifesta-te nos comentários! ????

Se quiser entrar em contacto comigo, pode enviar-me um e-mail para [email protected] ou preencher o formulário abaixo.

NOTA: Todos os campos são de preenchimento obrigatório.

As melhores dicas, temas e extensões para o VS Code

Tempo de Leitura: 6 min
0