Ambiente Javascript: Dicas, VSCode e terminal

Node.js 24 de Abr de 2018

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:

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;
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;
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!!
Para conseguir utilizar ainda melhor o autocomplete do VSCode, utilizar alguma biblioteca de tipagem como TypeScript ou Flow pode ajudar muito 🙂
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.