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.
Extensões
Como trabalho sobretudo com frameworks JavaScript (como React), serão maioritariamente essas extensões que receberão destaque. Vamos conhecê-las!
#1: 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.
#2: 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.
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.
#3: 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.
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!
#4: Bracket Pair Colorizer
Uma extensão muito útil se programas em linguagems com muitos parêntesis, como por exemplo JavaScript.
Com esta extensão instalada, cada parêntesis terá uma cor, o que facilita a tua vida na altura de perceber se está tudo devidamente fechado. Poupa algum tempo no despiste de problemas, acredita!
Aqui fica um exemplo meu, com código React.
E falando em React… vamos ao próximo!
#5: Reactjs code snippets
Se programas em React, saberás que é sempre preciso criar algum código repetitivo quando criamos um novo componente, por exemplo.
Este conjunto de snippets foi feito precisamente para te ajudar a ser mais produtivo. Existem vários plugins deste género, mas este foi o primeiro que usei, pelo que já me habituei aos seus triggers.
Por exemplo, ao escreveres rsc seguido da tecla TAB, eis o que acontece:
Independentemente da linguagem, deves sempre procurar um bom plugin de snippets para acelerar o teu workflow, ou criar tu próprio os teus.
#6: 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.
O autor, que trabalha na Wix, explica as razões que o levaram a criar esta extensão neste artigo.
#7: 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.
Se estiveres com dificuldades em configurar esta extensão, este tutorial poderá ajudar-te!
#8: 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.
#9: 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.
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.
#10: Text Pastry
Esta extensão é muito útil quando queres acrescentar um número crescente em cada linha seleccionada de uma multi-selecção.
Pode parecer trivial, mas é algo que utilizo todos os dias, na hora de enumerar algo durante o processo de escrita de um artigo. Podes até optar entre começar a lista no 0 ou no 1.
Aqui fica um exemplo:
#11: Polacode
O objetivo desta extensão é tirar fotos atrativas ao teu código, para que depois o possas partilhar (nas redes sociais, por exemplo).
Depois de correr o Polacode com o habitual comando CMD + SHIFT + P, podes seleccionar o texto que pretendes que fique na foto, redimensionar a imagem e finalmente gravar como PNG.
Este é um exemplo de resultado final:
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!
Os meus Temas preferidos VS Code
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!
Os Tipos de Letra que utilizo
Há já vários meses que uso a font Victor Mono em todos os meus projetos. É gratuita, open-source, suporta ligaduras tipográficas (úteis para quem programa em JavaScript) e tem vários pesos disponíveis.
Antes de optar por este tipo de letra, utilizava outras que ainda hoje gosto bastante, como a CamingoCode e a Fira Code – ambas merecem a tua consideração.
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.
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!
