Utilizando o Atom Editor como uma mini IDE (ou super-editor) para desenvolvimento web

04/09/2016

Logo do editor de código Atom.

Nota: este post foi escrito em 2016, numa era pré-VS Code.

Desde seu lançamento o Atom Editor tem se mostrado uma ótima alternativa a editores como o (até então imbatível) Sublime Text e o Notepad++. Open source e mantido pelo GitHub, o Atom se destaca pela facilidade de se desenvolver e instalar novos plugins — expandindo suas funcionalidades padrão. Tenho utilizado o Atom Editor em projetos pessoais nos os últimos meses e a experiência tem sido bem positiva.

Se você está acostumado com IDEs baseadas na plataforma IntelliJ, (PHP Storm, WebStorm) sabe que elas oferecem zilhões de facilidades out of the box. Só para citar algumas: autoclose de tags HTML/XML, autocomplete de funções/propriedades em objetos JS/PHP, indentação automática, ferramentas de deploy on-the-go, integração com Git e VCS em geral, syntax highlighting de componentes de frameworks, minimap do código e outros.

Pela própria natureza de editor do Atom, a maioria dessas facilidades não vem incluídas na instalação base. Felizmente, o editor tem uma comunidade extremamente ativa e é fácil encontrar extensões para suprir a ausência desses recursos. Sendo assim possível transformá-lo numa mini IDE ou super editor — como preferir.

A seguir, algumas das extensões que tenho utilizado.

double-tag

O Double Tag permite a edição simultânea das tags HTML de abertura e fechamento de forma similar ao que as últimas versões do WebStorm fazem.

https://atom.io/packages/double-tag

atom-beautify

O Atom Beautify indenta código de forma inteligente e automática. Muito útil para edição/análise de código bagunçado ou indentado sem padrões. Tem suporte a uma quantidade enorme de linguagens populares.

https://atom.io/packages/atom-beautify

minimap

Se você já utilizou o Sublime Text, o minimap dispensa apresentações. A extensão exibe uma prévia em miniatura do código fonte completo. Uma ferramenta incrível para não se perder durante a edição de arquivos muito grandes.

https://atom.io/packages/minimap

sftp-deployment

O sftp-deployment é basicamente um “deployer” (existe esse termo?). Permite que você suba arquivos para o servidor via FTP facilmente. O upload ao salvar é um must-have.

https://atom.io/packages/sftp-deployment

autoclose-html

O autoclose-html cria automaticamente a tag HTML de fechamento ao escrever uma tag de abertura. Por exemplo, ao se digitar <p>, automaticamente uma </p> será criada.

https://atom.io/packages/autoclose-html

pigments

O pigments cria um background colorido no trecho de código em que uma cor é declarada, facilitando muito a visualização.

https://atom.io/packages/pigments

color-picker

Se o pigments facilita a visualização da cor declarada, o color picker te ajuda a selecionar uma cor. Funciona muito bem!

https://atom.io/packages/color-picker

autocomplete-paths

O autocomplete-paths sugere os caminhos dos arquivos/pastas no projeto ao utilizar atributos como href ou src.

https://atom.io/packages/autocomplete-paths

platformio-atom-ide-terminal

Essa extensão permite que você utilize o terminal do seu OS em um janela interna dentro do Atom. Depois de alguns testes, posso afirmar que essa é a melhor extensão do tipo se você utiliza sistema operacional Windows.

https://github.com/platformio/platformio-atom-ide-terminal

A principal vantagem de tunar o Atom é ter uma “IDE” extremamente leve — já que apenas funcionalidades que você realmente utiliza serão carregadas com o editor. Uma abordagem especialmente válida para quem quer desenvolver numa máquina antiga, com recursos limitados.

Continue lendo...