Como escolher um EDITOR DE CÓDIGO para PROGRAMAÇÃO WEB (IDE?)

Hoje vamos falar sobre EDITORES DE CÓDIGO para PROGRAMAÇÃO WEB, o que você deve observar ao escolher essa ferramenta que te acompanhará o tempo todo e algumas dicas de como você pode usar e configurar o seu editor.

Aproveita e segue o meu perfil no GitHub e acompanhe também o perfil do Dev.Lawyer para ter acesso aos materiais aqui do conteúdo que disponibilizarei.

Deixo aqui também o vídeo sobre este assunto que gravamos para o nosso canal no YouTube, que é um espaço em que compartilho algumas opiniões, dicas e projetos com outros interessados em tecnologia, seja você programador, advogado ou entusiasta. Aproveita para se inscrever lá e não perder os próximos vídeos, prometo que farei conteúdos interessantes e algumas lives com "coding sessions" bem legais.

Veja aqui: https://youtu.be/h73ZVeWRsj4

Tudo certo? Então vem comigo.

O que é um Editor de Código?¶

Se você tem interesse em codar, já deve ter se deparado com muitas recomendações de programas para escrever o seu código. A discussão sobre qual o melhor editor de código costuma ser polêmica, com cada programador indicando a sua preferência como a única alternativa viável, mas vamos ser objetivos: o melhor editor de código é aquele em que você se encontra melhor, sabe os atalhos e consegue, enfim, trabalhar mais rápido.

Dependendo a linguagem de programação que você quer estudar, há editores específicos com mais funcionalidades ainda e que ajudam no desenvolvimento do seu programa. Por exemplo, se você está desenvolvendo em Python, pode gostar do PyCharm. Se você quer programar em Java, possivelmente pode encontrar vantagens ao usar o Netbeans. As possibilidades são muitas.

Para programação web, no entanto, recomendo que comece a programar usando um Editor de Código que seja leve e funcional, com boas integrações que te ajudarão a conduzir um trabalho mais eficiente.

Um Editor de Código pode ser até mesmo o seu editor de texto comum, como o Notepad, mas é interessante buscar algum programa que ao menos traga uma boa funcionalidade de realce de sintaxe. O que isso quer dizer? Quer dizer que o próprio Editor de Código vai destacar com cores diferentes partes da "gramática" do seu código, melhorando a visualização.

Editor de Código é uma IDE?¶

Você já ouviu falar em IDE? IDE significa "Integrated Development Environment", ou Ambiente de Desenvolvimento Integrado, e a sua proposta é um pouco mais abrangente que um Editor de Código. A IDE possui em regra mais funcionalidades que podem te auxiliar a programar (pode conter emuladores, compiladores, outras bibliotecas, etc.) além do próprio editor de código existente.

O Editor de Código, por sua vez, tem uma proposta mais simplificada, podendo simplesmente ser um editor de texto com "algo a mais" -- em regra, realce de sintaxe e integrações que te ajudam a programar. 

As nossas recomendações 😎¶

Para Programação Web você encontra diversas opções de Editores de Código, mas abaixo seguem alguns bem famosos e utilizados hoje, todos com versões para Windows, Linux e Mac:

1. Visual Studio Code (gratuito, open source);

2. Atom (gratuito, open sorce); e

3. Sublime (pago, mas possui versão de avaliação sem limite de tempo).

Esses editores já possuem realce de sintaxe para as linguagens mais comuns e, se não possuírem, você pode instalar novas sintaxes por meio de plugins no próprio editor. Com qualquer das opções, certamente você estará bem atendido.

Para instalar, basta acessar o site correspondente, realizar o download e seguir as instruções de instalação. Para os meus projetos eu costumo utilizar o Atom já de longa data, mas dado que (i) em um pesquisa preliminar observei que muitos desenvolvedores estão utilizando o VSCode, e (ii) é possível instalar um plugin para usar os mesmos atalhos do Atom no VSCode (Atom Keymap) vou mostrar aqui os aspectos e configurações básicos que você pode fazer para preparar a sua máquina para o desenvolvimento usando o VSCode.

VSCode: Um breve tour¶

Vamos então passar pelas principais funcionalidades de um dos Editores de Código mais utilizados hoje para programação Web: o Visual Studio Code (VSCode). Nesse breve tour vamos te mostrar o que é mais importante para você começar o seu projeto. E essa é a tela inicial que você vai se deparar quando abrir o programa pela primeira vez:

VSCode

1. Barra de Atividades

Você pode abrir a pasta de um projeto seu aqui no VSCode acessando o menu File > Open Folder (ou Arquivo > Abrir Pasta) e selecionando a pasta raiz do projeto que você quer editar. Uma vez aberto, vamos ver as opções abertas aqui na Barra de Atividade, que é aquela barra de menu na esquerda. As opções que quero mostrar são essas:

O que vamos olhar hoje

a. Explorador de Arquivos

O primeiro menu tem o explorador de arquivos, que vai mostrar a estrutura do seu projeto em visão de árvore. Para abrir um arquivo do projeto, basta clicar no seu nome e ele será aberto no espaço à direita:

Explorador de Arquivos

b. Controle de Versão

O segundo menu é do controle de versão. Ao invés de usar o Git pelo terminal para dar os comandos necessários, você pode fazer isso aqui. É possível fazer git commit, push, pull e tudo mais. 

Controle de versão usando o Git no VSCode

Ele também mostra um registro das alterações efetuadas antes do seu commit ocorrer, com a visualização instantânea das diferenças entre o arquivo antes e depois das alterações.

Alterações e diferenças entre versões

Não sabe como Git funciona? Veja o nosso conteúdo passado sobre o assunto aqui: Como usar o Git e o GitHub na prática: um guia simplificado para leigos

c. Extensões

O último menu que mostraremos é o de extensões. Ele permite que você expanda a utilidade do VSCode com funcionalidades interessantes. 

Você pode adicionar suporte para linguagens de programação que não estejam pré-configuradas no editor, por exemplo, mas existem ainda muitas outras funcionalidades interessantes que valem a pena explorar. Vamos sugerir algumas aqui ainda neste conteúdo.

Extensões do VSCode

2. Barra de Comandos

A barra de comandos contém todos os comandos existentes no VSCode e pode ser muito útil na sua operação do dia a dia. Para acessá-la, basta pressionar Ctrl + Shift + P e a barra será aberta. Você pode abrir também pelo menu View > Command Pallete, mas o atalho de teclado é mais fácil de acessar uma vez decorado.

Alguns comandos interessantes que você pode procurar na barra de comandos (e o que digitar para encontrar a opção rapidamente):

zen (toggle View: Zen mode) - Modo ZEN. Ele tira as distrações da sua tela deixando você focar apenas no arquivo em que está trabalhando. Para desabilitá-lo, basta pressionar novamente Ctrl + Shift + P e digitar zen também, para abrir essa opção.

theme (Preferences: color theme) - Temas. Você pode mudar o esquema de cores do VSCode para algum dos temas listados conforme a sua preferência. Mas, por favor, a menos que você seja um psicopata, use um tema escuro. Seus olhos agradecem.

format (Format Document) - Formatar documento. Esta opção permite que o seu código seja "arrumado" quanto ao espaçamento, linhas puladas e demais aspectos visuais de organização. É muito útil para melhorar a visibilidade dele e deixá-lo bem organizado.

terminal (View: toggle Terminal) - Abrir Terminal. Aqui você tem rápido acesso ao terminal, que pode ser muito útil para rodar alguns comandos necessários.

3. Barra de Status

A barra de status traz algumas informações importantes, como o "branch" que você está dentro do seu projeto Git (falaremos mais sobre isso em um conteúdo próprio), erros e avisos de seu programa, linguagem de programação do arquivo atual e notificações.

Barra de status

4. Terminal

No VSCode, você pode acessar o terminal clicando no ícone de erros e avisos na barra de status e clicando em TERMINAL, ou ainda pode acessá-lo pela barra de comandos, pressionando Ctrl + Shift + P e digitando "terminal" (View: toggle Terminal).

O terminal é algo que pode parecer intimidador no começo mas com o tempo você verá que ele é o seu maior aliado. Comandos dados no terminal poupam muito tempo quando bem usados.

O fato de o VSCode ter acesso direto ao terminal em sua interface é um grande ponto positivo.

Terimnal no VSCode

VSCode: Algumas configurações adicionais¶

Agora que você já sabe como está organizado o VSCode, vamos fazer algumas configurações adicionais que são opcionais mas podem ajudá-lo no dia a dia.

1. Conecte a sua conta do GitHub

Você pode conectar a sua conta do GitHub no VSCode de forma a sincronizar as suas configurações em dispositivos diferentes. Para isso, acesse "File > Preferences > Setttings" (ou na engrenagem ao final da Barra de Atividade) e clique no botão "Turn on Setttings Sync", deixando todos os itens marcados. 

O VSCode vai te levar para uma tela de login e autenticação do GitHub. Basta autorizar e pronto.

Sincronizando o VSCode em vários devices

2. Indentação

Por padrão o VSCode usa 4 espaços quando vai alinhar o código (chama-se indentação). Por exemplo, o que ocorre ao começo de cada linha na figura abaixo e que serve para organizar a estrutura do seu código e deixá-lo mais legível. Em regra a indentação não segue uma função específica, mas há linguagens que a consideram na interpretação da sintaxe, como Python.

Indentação padrão

Se você considerar 4 espaços um espaço muito grande de indentação, pode alterá-lo clicando em "File > Preferences > Setttings" (ou na engrenagem ao final da Barra de Atividade) e alterando o número em Editor: Tab Size.

Alterando o espaçamento de indentação

3. Alterando o terminal (Windows)

Com o tempo, será bem comum você usar o terminal para rodar alguns comandos diretamente. Eu uso no dia a dia o terminal para acessar arquivos, navegar entre pastas e mesmo para rodar comandos do Git (acho mais fácil pelo terminal). 

Como vimos, no VSCode você pode acessar o terminal clicando no ícone de erros e avisos na barra de status e clicando em TERMINAL, ou ainda pode acessá-lo pela barra de comandos, pressionando Ctrl + Shift + P e digitando "terminal" (View: toggle Terminal).

No Windows, o terminal carregará como padrão o PowerShell. Para os nossos propósitos, vamos alterar esse terminal padrão para usarmos o Git Bash que já instalamos anteriormente. 

Se você não tem o Git instalado em sua máquina, veja o conteúdo abaixo: Como usar o Git e o GitHub na prática: um guia simplificado para leigos

Para fazer isso, abra o "File > Preferences > Setttings" (ou na engrenagem ao final da Barra de Atividade), procure por "Features > Terminal" e role a tela até encontrar a opção "Integrated > Default Profile: Windows". Nessa caixa de seleção, escolha o Git Bash.

Definindo o perfil padrão do terminal para o Windows

Agora, abra o terminal novamente pressionando Ctrl + Shift + P e digitando "terminal" (View: toggle Terminal). Clique no botão de "+" e selecione o Git Bash. Uma vez aberto, você pode até mesmo excluir o perfil de powershell existente antes, clicando no ícone de lixeira.

Habilitando o Git Bash para o terminal

Você pode agora excluir o perfil para o powershell

VSCode: Algumas extensões interessantes¶

Finalmente, vamos instalar algumas extensões que serão úteis ao desenvolvimento. Comece instalando a sintaxe para linguagem que não venham como padrão no VSCode e que você pretenda usar (Python, e PHP, por exemplo). Instalar uma linguagem é simples e limita-se a apertar um botão:

Instalando o suporte à linguagem Python

Mas, mais que linguagens de programação, vamos instalar também algumas outras extensões úteis:

a. Live Server: Permite que você crie com apenas um clique um servidor local para testar o seu código localmente

Live Server

b. CSS Peek: Permite que você acesse rapidamente uma classe ou elemento css diretamente do código, e pode ser muito útil durante o desenvolvimento de seu aplicativo web.

CSS Peek

c. Auto Close Tag: Essa extensão fecha automaticamente tags HTML e XML abertas. 

Auto Close Tag

d. JavaScript (ES6) code snippets: Esta extensão contém partes de sintaxe para Javascript para serem usados no VSCode. Isso acaba autocompletando o seu código muitas vezes, economizando um tempo considerável.

JavaScript (ES6) code snippets

e. ESLint: Um linter é uma ferramenta de análise de código que pega erros de programação existentes. Com o ESLint você consegue, enquanto está programando, já visualizar potenciais problemas de sintaxe no seu código fonte.

ESLint

f. Prettier: Formate o seu código com prettier e o deixe mais bonito. Serve para usar com aquele comando do "Format Document" no VSCode.

Prettier

g. Better Comments: Categorize os comentários no seu código, deixando-os com uma leitura mais fácil. Após instalar, basta iniciar a linha do seu comentário com um caracter diferente para destacá-lo (por exemplo, linhas importantes começam com asterisco, Exclamação para chamar a atenção, interrogação para questionamentos, TODO, etc).

Better Comments

h. Blockman: Destaque em seu código blocos de código que estão no mesmo escopo (nível). Útil quando o seu código começa a ficar grande demais e é difícil para se achar.

Blockman

Conclusão¶

Enfim, existem inúmeras formas de se programar, e com certeza escolher o editor de código certo para você fará toda a diferença do mundo, principalmente quando falamos em produtividade. Esperamos que essa introdução aos editores de código e, em especial ao VSCode que abordamos aqui possam te fornecer um bom caminho inicial para acompanhar o restante do nosso conteúdo por aqui, bem como te guiar nessa jornada para um carreira dev.

/* fim do post, até a próxima */