VSCode mais Agradável
Este artigo abordará sobre o VSCode, e como torná-lo mais agradável para programação, personalizando sua aparência e ajustando alguns parâmetros interessantes.
1. Sobre o VSCode
1.1. Um pouco de história
Criado pela Microsoft, o Visual Studio Code é uma mistura de tecnologias open source baseadas na web, como o Chromium, o Electron app framework do GitHub, e próprio editor Monaco, da Microsoft.
Esta ferramenta tem crescido cada vez mais na comunidade e hoje é uma ótima opção para desenvolvimento. É um editor leve, mas poderoso, e está disponível para Windows, MacOS e Linux. Ele vem com suporte embutido para JavaScript, TypeScript e Node.js e possui um rico ecossistema de extensões para outras linguagens como C++, C #, Java, Python, PHP e Go.
1.2. Características
Os desenvolvedores que gostam do famoso Atom do GitHUB se sentirão em casa no VS Code, que também possui inúmeras extensões para aumentar ainda mais a produtividade no editor.
Como diferencial do VSCode, pode-se apontar:
- Grande quantidade de extensões existentes;
- Excelentes pacotes de IntelliSense para diversas linguagens;
- Velocidade (mesmo instalando diversos plugins);
2. Instalação e configurações
Usuários de qualquer sistema operacional podem fazer o download do programa e instalá-lo manualmente, visitando a página https://code.visualstudio.com e baixando o pacote apropriado.
2.1. Configurações gerais
O editor possui uma gama de parâmetros que podem ser usados para personalização de seu comportamento e aparência. Esses parâmetros podem ser acessados em File > Preferences > Settings.
2.2. Adicionando novas funcionalidades
O mecanismo de extensões do VSCode permite aumentar o “poder de fogo” do editor. Para instalá-las, acesse View > Extensions (ou pelo atalho Ctrl + Shift + X), escolha os pacotes desejados e clique no botão “Install”.
Uma dica preciosa é não instalar extensões demais, seja cuidadoso e instale apenas aquelas que realmente vai usar. Isso porque o VS Code pode consumir bastante memória dependendo do número de extensões e como elas foram implementadas.
3. Extensões para própósitos gerais
Algumas extensões melhoram nossa vida, independente da linguagem na qual queremos programar. Lembrando da dica anterior, listo a seguir as extensões que acho indispensáveis para qualquer projeto.
… não instale extensões demais, seja cuidadoso e prefira apenas aquelas que realmente vai usar!
3.1. Better Align (wwm)
Adiciona a possibilidade de alinhamento do código, facilitando a formatação de listas ou grupos de variáveis, por exemplo.
https://marketplace.visualstudio.com/items?itemName=wwm.better-align
3.2. GitLens — Git superchaged (Eric Amodio)
Permite diversas funcionalidades para facilitar o uso do VSCode com o versionador de código git.
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
3.3. Portuguese (Brazil) Language Pack (microsoft)
Para quem gosta de usar os programas em português, basta instalar este pacote oficial da Microsoft.
4. Extensões para programar em PHP
Atualmente, 80% do meu tempo é investido na linguagem PHP por conta da empresa na qual trabalho. Dessa forma, minhas dicas para uma maior produtividade nesta linguagem são enumeradas a seguir:
4.1. PHP Awesome Snippets (HakCorp)
Adiciona a possibilidade de usar snippets semelhantes aos da IDE PHP Storm.
Para facilitar ainda mais, deixo aqui uma dica preciosa que me ajuda muito na utilização deste plugin.
Digitando ‘po’ e pressionando a tecla ‘tab’, o VSCode irá gerar o seguinte trecho de código:
<?phpSe você é um programador moderno, quase sempre trabalhará com classes e em modo de tipagem estrita. Para facilitar a sua vida, após instalar o plugin Php Awesome Snippets, edite o arquivo :
/home/voce/.vscode/extensions/hakcorp.php-awesome-snippets-1.1.3/snippets/tag.json
Na seção “PHP open tag”, edite o conteúdo de “body”, deixando como abaixo:
..."PHP open tag": { "prefix": "po", "body": [ "<?php\n\ndeclare(strict_types=1);\n\nnamespace ${RELATIVE_FILEPATH/(\\\/[a-z]*\\.php)|(\\/)/\\\\/gi}${1};\n\n" ], "description": "PHP open tag"},...
Salvando este arquivo e reiniciando o VSCode, ao digitar ‘po’ e pressionar a tecla ‘tab’, o seguinte trecho de código será gerado:
<?phpdeclare(strict_types=1);namespace Namespace\De\Seu\Arquivo\;
Nota: A barra no final no namespace (\;) existe porque não encontrei uma forma fácil de removê-la através da expressão regular nos snippets do VSCode. Caso você descubra uma maneira, por favor, comente sua sugestão para que eu atualize este artigo. Serei imensamente grato!
4.2. PHP Intelephense (Ben Mewburn)
Provê uma gama de funcionalidades para aumentar a “inteligência” do VSCode ao analisar código PHP como dicas, sugestões, autocompletar e muito mais.
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
4.3. PHP Implementor (coozieki)
Implementa os métodos das assinaturas de classes abstratas e interfaces.
https://marketplace.visualstudio.com/items?itemName=coozieki.php-implementor
4.4. PHP Namespace Resolver (Mehedi Hassan)
Resolve o namespace e as importações de dependencias de classes, interfaces e traits com base nas configurações do arquivo composer.json.
https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver
4.5. Instalando tudo via linha de comando
Para quem gosta de agilidade, ao invés de usar a tela de Extensões do VSCode, é possível instalar todas as extensões de uma só vez usando comandos de terminal.
Basta entrar num terminal e usar os seguintes comandos:
code --install-extension wwm.better-align
code --install-extension eamodio.gitlens
code --install-extension hakcorp.php-awesome-snippets
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension coozieki.php-implementor
code --install-extension MehediDracula.php-namespace-resolver5. Aparência
Outra coisa muito interessante é mudar a aparência do VSCode, deixando-o mais “elegante”. Seguem minhas preferências:
5.1. Temas e cores
Os temas podem ser instalados através do mesmo painel de Extensões. Gosto particularmente de três:
Oceanic Next Italic (SintrumIT)
Fedora GNOME light & dark (Oliver Fink)
One Dark Pro (binaryify)
Para instalar os temas via linha de comando:
code --install-extension SintrumIT.theme-oceanic-next-italic
code --install-extension olifink.fedora-gnome-light-dark
code --install-extension zhuangtongfa.material-themeApós a instalação, para selecionar o tema desejado, basta acessar File > Preferences > Color Theme > Install Additional Color Themes.
5.2. Mudando os ícones
Outra coisa que deixa o editor bem agradável é alterar o tema de ícones. Costumo instalar o seguinte tema de ícones pelo painel de Extensões:
Quill Icons (Chad Donohue)
Pela linha de comando:
code --install-extension cdonohue.quill-icons6. Removendo distrações
6.1. Ajustando as coisas
Particularmente, prefiro o VSCode bem enxuto e com o mínimo de distrações, para promover maior concentração no código fonte.
Costumo fazer diversos pequenos ajustes diretamente no arquivo de configuração, usando Ctrl + Shift + p >Preferences: Open Settings (JSON).
A seguir, minhas configurações e uma explicação sobre cada ajuste:
{
"breadcrumbs.enabled": false, "editor.cursorStyle": "block",
"editor.cursorBlinking": "smooth",
"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": true,
"editor.fontSize": 13,
"editor.insertSpaces": true,
"editor.lineHeight": 30,
"editor.rulers": [
{
"column": 80,
"color": "#eeeeee11"
},
{
"column": 140,
"color": "#99ffff10"
},
],
"editor.tabSize": 4, "window.menuBarVisibility": "toggle",
"window.titleBarStyle": "custom",
"window.zoomLevel": 1, "workbench.activityBar.visible": false,
"workbench.colorTheme": "One Dark Pro Flat",
"workbench.iconTheme": "quill-icons-minimal",
"workbench.sideBar.location": "right"
}
6.2. Breadcrumbs
Os breadcrumbs mostram o caminho completo do arquivo dentro do projeto. Não tem muita utilidade para mim, então desativo-o.
6.3. Cursor
O cursor padrão é uma linha vertical. Acho um bloquinho é mais bonito :)
A animação do cursor quando pisca é simplesmente um “exibe/oculta”. Para melhorar isso, gosto de adicionar um efeito de “fadein/fadeout”.
"editor.cursorStyle": "block",
"editor.cursorBlinking": "smooth",6.4. Tipografia e aparência do texto
A tipografia é uma questão pesssoal, mas é aconselhável que seja uma fonte agradável de ler e que não cause cansaço. Por isso ela deve ser uniforme e com um bom acabamento. Minha predileta é a “Fira Code”.
Para instalar a “Fira Code” no Linux, pode-se usar diretamente o repositório da distribuição, bastando digitar o seguinte comando no terminal:
# Ubuntu
sudo apt -y install fonts-firacode# Fedora
sudo dnf -y install fira-code-fonts
Uma segunda opção, que serve para usuários de qualquer sistema operacional, é fazer o download da fonte e instalá-la manualmente, visitando a página https://github.com/tonsky/FiraCode.
Uma vez que a fonte está devidamente instalada no sistema, uso as seguintes configurações de texto:
"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": true,
"editor.fontSize": 13,
"editor.lineHeight": 30,
"window.zoomLevel": 1,Na configuração acima, vale um destaque para o atributo “fontLigatures” que ativa uns “desenhos” especiais nos símbolos usados na programação, como pode ser visto em vermelho na imagem abaixo.
6.5. Tabulação e espaços
Outra configuração importante é fixar um padrão “melhor” para o comportamento das tabulações. Quando uma tabulação é feita, grande parte das linguagens ficam elegantes com 4 espaços.
Para que o código fique sempre padronizado, também é importante nunca permitir que uma “tabulação real” aconteça, mas sim uma inserção de espaços com a mesma distância da tabulação.
"editor.tabSize": 4,
"editor.insertSpaces": true,6.6. Linhas delimitadoras
Outro ajuste muito útil é adicionar linhas de referência, para facilitar a identificação sobre a extensão horizontal do código.
Gosto de adicionar duas linhas, uma para um limite aceitável de 80 colunas e outra para um limite máximo de 100 colunas.
"editor.rulers": [
{
"column": 80,
"color": "#eeeeee11"
},
{
"column": 140,
"color": "#99ffff10"
}
],6.7. Barra de menu
Prefiro ocultar a barra de menus da aplicação para o editor ficar ainda mais limpo.
"window.menuBarVisibility": "toggle",Dessa forma, quando precisar acessar o menu, basta pressionar a tecla Alt para ocultá-lo/exibí-lo.
6.8. Barra de titulo da janela
Embora eu prefira trabalhar com sistemas Linux, gosto do formato da janela do VsCode do Windows, porque ela aproveita mais o espaço quando os menus da aplicação estão visíveis.
"window.titleBarStyle": "custom"
"window.titleBarStyle": "custom" (com menus visíveis)6.9. Barra lateral
Em relação à barra lateral, prefiro que seja localizada na direita e sem os ícones de atividade, para o editor ficar ainda mais limpo.
6.10. Resultado final
O resultado das configurações e ajustes é um VSCode super enxuto, que atente às minhas necessidades pessoais.
7. Atalhos de produtividade
Com a interface enxuta, utilizo alguns atalhos de teclado para acessar as funcionalidades que uso periodicamente. Basicamente, são elas:
- Abrir/fechar painel lateral: Ctrl + b
- Painel de Extensões: Ctrl + Shift + x
- Navegação de arquivos: Ctrl + Shift + e
- Ctrl + K, Ctrl + O: abrir novo arquivo/diretório
8. Conclusão
Embora as configurações de uma ferramenta de trabalho dependa do gosto de cada desenvolvedor, as descritas neste artigo tornam meu trabalho melhor, além de contribuir para uma maior produtividade.
Este é um ponto interessantíssimo no VSCode, pois é possível personalizar praticamente tudo. Só depende da criatividade de cada um.
Espero que este artigo tenha sido útil. Até a próxima!
