Ambiente Javascript: Dicas, VSCode e terminal
Uma das grandes dúvidas de maior interesse pelos desenvolvedores, não só de Javascript, mas de todas linguagens é quanto ao ambiente de desenvolvimento, melhores práticas, configurações, snippets, atalhos, etc.
Nesse post vou explicar como configurei meu Visual Studio Code, terminal e outras ferramentas que utilizo para aumentar minha produtividade com Javascript desenvolvendo projetos em ReactJS, React Native e NodeJS.
Um adendo antes de continuarmos, se você usa Windows para programar recomendo seriamente repensar sobre isso e fazer no mínimo um Dual Boot com Ubuntu ou outra distribuição do Linux para melhorar sua produtividade.
Ah, no fim ainda vou deixar umas playlists que escuto no Spotify 😀
Visual Studio Code
Atualmente estou utilizando o Visual Studio Code e se você ainda não teve a oportunidade de testar recomendo muito tirar um tempo pra isso. Eu sou sujeito a dizer pois já passei pelo Sublime Text, Atom, Vim, NetBeans, WebStorm e até bloco de notas e dentre eles o Visual Studio Code me atendeu melhor até agora.
O que eu mais defendo no VSCode é sua cara de editor como no Sublime Text sem perder funcionalidades de IDE como debug integrado com breakpoints, integração nativa com Git e autocomplete muito rápido.
Além disso se você segue padrões de código e instala uma biblioteca como ESLint vai entender que no VSCode simplesmente as coisas são mais rápidas. O terminal integrado também ajuda muito principalmente quem programa em notebook.
Chega de papo furado, vamos às minhas configurações do VSCode.
Plugins
Abaixo segue a lista de plugins que tenho instalado:
- Color Highlight – Esse plugin mostra a cor exata de todos RGB’s ou HEX em seu código, muito útil para quem trabalha com CSS ou SASS;
- DotEnv – Plugin que utilizo para ter suporte à sintaxe .env, muito útil para quem trabalha com NodeJS, ReactJS ou qualquer outro tipo de projeto web;
- Dracula Official – Tema que utilizo no meu VSCode e em todos outros editores/terminais, pra mim foi o tema que mais me agradou durante mais tempo e olha que já usei muitos;
- EditorConfig – Plugin utilizado para padronizar quebra de linha, indentação, espaços e tabs entre desenvolvedores de um mesmo projeto;
- ESLint – Plugin utilizado para padronizar código entre desenvolvedores como utilização de pontos e vírgulas, tamanho máximo de caracteres em linhas e todo outro tipo de padronização. Recomendo muito a utilização desse plugin junto aos guias de estilo do AirBnB;
- Markdown All in One – Plugin que utilizo para escrever e ler Markdown dentro do VSCode, muito útil para documentações o README’s do Github;
- Material Icon Theme – Utilizo para exibir os ícones de acordo com a linguagem utilizada na minha sidebar. Fica muito legal mesmo pois esse plugin identifica a grande parte de libs e ferramentas.
Configurações
Além dos plugins, recomendo algumas configurações para facilitar a legibilidade e edição do código. Para aplicar essas configurações você precisa acessar suas preferências.
{ // Define o tema do VSCode "workbench.colorTheme":"Dracula", // Configura tamanho e família da fonte "editor.fontSize":16, "editor.lineHeight":24, "editor.fontFamily":"Fira Code", "editor.fontLigatures":true, // Aplica linhas verticais para lembrar de quebrar linha em códigos muito grandes "editor.rulers": [ 80, 120 ], // Aplica um sinal visual na esquerda da linha selecionada "editor.renderLineHighlight":"gutter", // Aumenta a fonte do terminal "terminal.integrated.fontSize":14, // Define o tema dos ícones na sidebar "workbench.iconTheme":"material-icon-theme" }
Dicas
Agora que já configuramos nosso editor, vamos às dicas:
1. Utilize sempre que possível o terminal integrado apertando CTRL+` (ou CMD+` no Mac), isso facilitará não ter que trocar de janela. Você pode clicar no ícone de divisão de tela para ter mais de uma tela de terminal;
2. Utilize a integração com Git na terceira aba da sidebar do VSCode para fazer os commits sempre que possível, fica muito fácil e prático fazer commits, voltar atrás, realizar amends, etc;
3. Utilize o debug integrado do VSCode, sério. Você pode adicionar breakpoints no código e saber todos dados de variáveis e dados que estão setados até aquele ponto, inclusive detectar erros que não foram manipulados pela aplicação. Chega de console.log!!
4. Para conseguir utilizar ainda melhor o autocomplete do VSCode, utilizar alguma biblioteca de tipagem como TypeScript ou Flow pode ajudar muito 🙂
5. Procure dar uma olhada nos atalhos do teclado do VSCode, tem muita coisa lá interessante pra utilizar e seria importante você adaptá-los conforme sua necessidade;
Terminal
Apesar de utilizar muito o terminal integrado do VSCode, meu terminal ainda possui algumas modificações que julgo bem legal.
Oh My Zsh (apenas mac e linux)
Um dos melhores pacotes que você vai poder ter para dar um boost no seu terminal. Essa biblioteca te permite configurar plugins, temas e diversas outras coisas dentro do terminal. Eu atualmente estou utilizando o tema avit e o plugin do git.
Hyper Term
Se você estiver interessado em um terminal ainda mais bonito com um layout mais amigável e inclusive utilizar isso no Windows, recomendo usar o Hyper Term.
Ferramentas
Além do Visual Studio Code e do terminal ainda utilizo algumas ferramentas que me ajudam muito durante o dia a dia:
- DevDocs – Para baixar e consultar documentação das principais linguagens e bibliotecas existentes;
- Insomnia – Aplicativo para testar API’s REST, muito útil mesmo. É possível configurar variáveis de ambiente e trabalhar em times 🙂
- Sketch – Aplicativo para prototipação no Mac OSX. Como sei que á pago, algumas versões free são o Figma e o Gravit Designer;
- StarUML – App para criação de diagramas UML de qualquer tipo, muito útil e com suporte a plugins para exportar models e classes para a maioria das linguagens.
Playlists no Spotify
Como não poderia faltar, algumas playlists que escuto no Spotify para programar/trabalhar:
- Rock Forever – Apenas rock dos bons;
- TOP Deep House – Músicas eletrônicas com poucas vozes;
- TOP Hip Hop – Músicas de hip hop internacionais;
- TOP Nacionais – Músicas nacionais MPB e Rock.
Fim
Ficamos por aqui… espero que você tenha gostado desse post e se tiver qualquer dica para melhorar ainda mais meu ambiente de desenvolvimento é só deixar aí nos comentários que posso inclusive adicionar ao post se eu achar legal 😀
Não esquece de enviar o post aos amigos que programam em Javascript e compartilhar em seu Facebook/Twitter.
