Atom: Configuração Definitiva para Web - JavaScript, HTML, CSS e mais

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:

  1. Com o Atom aberto, pressione Ctrl + , (ou Cmd + , no Mac OS) para abrir o menu de configurações.
  2. Clique em "+ Install".
  3. No campo "Search packages", digite o nome do pacote.
  4. 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.

file-icons

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.

todo-show

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.

atom-html-preview

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".

atom-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).

color-picker

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.

atom one dark

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

Este artigo foi útil pra você?

Ricardo Metring

Ricardo Metring

Sou desenvolvedor full stack e co-fundador da Criar.io.
Trabalho há 10 anos com programação e sempre interessado em aprender mais.