Saiba como configurar o Atom para web e propiciar o ambiente mais favorável para desenvolvimento JavaScript, HTML e CSS, afinal, um editor de texto pode aumentar ou quebrar a nossa produtividade.
Para programadores iniciantes até desenvolvedores sênior, o Atom é o melhor editor de código. Você pode customizá-lo o quanto quiser para qualquer ambiente através das suas configurações nativas ou através de pacotes externos da comunidade.
Eu não tenho viés para falar do Atom, pois eu particularmente já passei por diversos editores, gostei do Sublime Text e trabalhei com ele por cerca de 4 anos até começar a usar o Atom e ver que é muito mais vantajoso, especialmente para o desenvolvimento web.
Configurando o Atom para desenvolvimento web
Nativamente, o Atom já é um excelente editor para desenvolvimento web. Ele vem com as principais linguagens já instaladas, mas podemos melhorar ainda mais adicionando alguns pacotes externos.
Se você trabalha com frameworks específicos como React ou Angular, recomendo que pesquise por pacotes para sintaxe JSX, por exemplo, além dos pacotes que vou abordar neste artigo.
Como instalar pacotes
Um package (pacote) ou plugin é um componente de software externo ao Atom que pode melhorar alguma funcionalidade existente ou trazer novas funcionalidades ao editor.
Um pacote pode ser instalado com apenas alguns cliques, basta seguir os passos abaixo:
- Com o Atom aberto, pressione Ctrl + , (ou Cmd + , no Mac OS) para abrir o menu de configurações.
- Clique em "+ Install".
- No campo "Search packages", digite o nome do pacote.
- Clique em "Install", o pacote será instalado e vai aparecer na aba "Packages".
Ou se preferir você pode usar o comando shell apm install nome-do-pacote.
Lista de pacotes para JavaScript, HTML e CSS
Chegamos no principal ponto deste artigo. Abaixo listo todos os pacotes recomendados para configuração do Atom para desenvolvimento web e mais abaixo falo um pouco sobre a funcionalidade de cada um.
Utilidades
JavaScript
HTML
CSS
file-icons
Ao invés de se orientar apenas pelo nome da extensão, que tal ver também o ícone do arquivo? Adicionando um toque mais visual à sua árvore de arquivos.
atom-beautify
Formate automaticamente seu código com Atom Beautify. Ele funciona para várias linguagens e pode ser utilizado com o comando Packages > Atom Beautify > Beautify.
todo-show
Mostra todos os To dos (A fazer), deixados no seu código, assim se você esquecer de alguma coisa, vai poder lembrar e encontrar facilmente. Para encontrar TODOs em seu projeto, vá em Packages > Todo-Show > Find in Project.
linter
O linter ajuda a analisar o seu código para identificar erros de programação. Esse pacote é a base para outros pacotes específicos de cada linguagem.
prettier-atom
Formate código JavaScript automaticamente via save (precisa configurar) ou rodando o comando "Prettier: Format". Ou utilize o atalho: Ctrl + Alt + F (Windows) / Ctrl + Option + F (Mac).
script
Rode código JavaScript direto no Atom. Serve também para outras linguagens. Não é muito útil se um arquivo depende de outros, mas para debugar um único arquivo .js ele é útil.
linter-jshint
Plugin do Linter para JavaScript que funciona com arquivos .js ou dentro de tags script. É necessário instalar antes o linter.
atom-html-preview
Permite que você possa visualizar as modificações que está fazendo em um arquivo HTML em tempo real. Muito útil para não ter que ficar alternando janelas o tempo todo.
Use Ctrl + Shift + H para abrir ou fechar a visualização de HTML.
emmet
Excelente pacote para autocompletes HTML, CSS e abrevições. Recomendo procurar mais sobre este pacote (existem vários tutoriais no Youtube) e você vai descobrir atalhos bem legais. Seu funcionamento é simples, escreva uma abreviação e pressione tab. Ex: html[tab], ou ul.list>li*3[tab].
less-than-slash
Feche qualquer tag HTML automaticamente digitanto apenas sinal de menor e barra </.
linter-htmlhint
Plugin do Linter para HTML. É necessário instalar antes o linter.
atom-css-comb
Ajuda a formatar o CSS, LESS ou SCSS ordenando as propriedades de uma forma que faz sentido. Para usar, selecione o trecho de CSS desejado, clique com o botão direito e clique em "Css comb".
color-picker
Pacote muito útil para rapidamente alterar cores, não só em CSS como qualquer outra extensão de arquivo. Para usar, selecione a cor, clique com o botão direito e clique em "Color Picker", ou use o atalho Ctrl + Shift + C (ou Cmd + Shift + C no Mac).
linter-csslint
Plugin do Linter para CSS. É necessário instalar antes o linter.
Sobre temas
Os temas servem para estilizar a sintaxe e o visual do editor. Essa é uma questão bem subjetiva, mas você precisa escolher um tema que seja funcional e ao mesmo tempo visualmente agradável.
No Atom, temas são instalados da mesma forma que pacotes e são separados em duas categorias: UI Theme e Syntax Theme, sendo usados para estilizar a interface do editor e o código respectivamente.
O tema que utilizo já vem embutido no programa e é o One Dark. Uso ele tanto para UI quanto para sintaxe.
Por que o Atom é melhor?
- É de graça: Nada daquelas pop-ups chatas pedindo para comprar toda vez que der um Ctrl + S.
- Open source: Com uma comunidade altamente ativa desenvolvendo packages, descobrindo bugs e enviando pull requests, o Atom tem uma vantagem competitiva muito grande em relação aos concorrentes.
- Gerenciador de pacotes embutido: É extremamente fácil instalar, configurar ou remover pacotes externos no Atom. Essa é uma das funcionalidades que eu mais gosto e que se diferencia muito dos outros editores.
- Tem Git e Github embutidos: Antes de começar a usá-lo eu só utilizava o terminal para controlar os meus repositórios. Mas a integração com o Git foi feita de uma forma tão boa que ficou mais produtivo gerenciar seu repositório através da interface.
Relacionados
Caso tenha interesse, deixo aqui outros dois artigos que escrevi sobre o Atom neste site:
Publicidade
