Atom, o editor de código do Github, aumenta em popularidade dia após dia. Os desenvolvedores preferem esse editor de código porque é leve, tem uma curva de aprendizado baixa e pode ser estendido com uma variedade de pacotes Atom úteis.

No início, o Atom foi usado como uma ferramenta interna para o Github, mas depois foi lançado como uma ferramenta de código aberto para o público em geral. A comunidade respondeu rapidamente e agora possui um próspero ecossistema de usuários e colaboradores.

Como um editor multiplataforma pronto para uso, o Atom funciona no OS X, Windows e Linux. Possui preenchimento automático inteligente, útil para quem deseja escrever código limpo rapidamente, e possui um navegador de arquivos conveniente, onde você pode abrir e adicionar arquivos rapidamente.

Se você deseja ser um usuário avançado do Atom, aqui está uma lista dos melhores pacotes Atom que aumentarão sua produtividade e tornarão sua codificação muito mais fácil.

Continue lendo mais sobre este tópico neste artigo criado por nossa equipe em wpDataTables, o plugin WP nº 1 para criar tabelas e gráficos.

Descubra quais pacotes Atom valem a pena usar e por quê.

Os melhores pacotes Atom para completar sua configuração de codificação

Alguns dizem que o Atom é o melhor editor de código geral do mercado. Certamente é comparável com Sublime Text e Notepad++, com suas próprias vantagens. O editor de código está repleto de todos os tipos de recursos que melhoram a codificação, entre os quais devemos mencionar:

É multiplataforma – independentemente do sistema operacional que você está usando, o Atom simplesmente funciona
Possui um gerenciador de pacotes embutido — se você quiser instalar os melhores pacotes Atom, não terá que lidar com o gerenciamento deles
Função de preenchimento automático inteligente — você pode escrever código muito mais rápido com esta função
Pesquisa do sistema de arquivos – diga adeus à navegação pelos arquivos por muito tempo, pois você pode fazer tudo em uma única janela
Vários painéis — você pode dividir a interface do Atom em vários painéis
Simplicidade — o maior forte do Atom é que é muito simples de usar

Como você pode ver, o Atom já está equipado com tudo o que você precisa para obter codificação. Para necessidades mais especializadas, você pode recorrer a pacotes de contribuição da comunidade, que serão explicados na próxima seção.

Quais são os melhores pacotes Atom e por que precisamos deles?

Os pacotes Atom são programas de software externos e bits de código que adicionam funções extras ao produto principal, aprimorando assim suas capacidades. Com o Atom, um pacote às vezes também é chamado de “plugin" ou “extensão”.

Ao adicionar pacotes Atom ao programa principal, o Atom se torna muito mais eficiente e ajuda você a fazer mais com menos esforço. Todos os usuários podem fazer sua própria escolha em termos de quais pacotes Atom usar.

Baixar e instalar os pacotes é fácil e eles podem melhorar muito a experiência do usuário do programa principal. Muitos deles podem não se aplicar ao seu fluxo de trabalho ou aos idiomas com os quais você trabalha, portanto, você deve instalar apenas os melhores pacotes Atom para você.

Mas primeiro, vamos ver como instalar um pacote Atom.

Como instalar pacotes Atom

Ao instalar seu primeiro pacote Atom, é melhor ler as etapas com atenção. Você provavelmente os aprenderá de cor e não precisará usar esta lista todas as vezes. Depois de selecionar os melhores pacotes Atom para você, aqui estão duas maneiras de instalá-los:

Clique em Arquivo > Configurações. Isso abrirá a Visualização de Configurações. Aqui, clique em Instalar e digite o nome do pacote que você está planejando instalar. Um atalho para a Visualização de Configurações é ctrl + ,(ctrl e vírgula) no PC e cmd + no Mac.
Você pode usar a Paleta de Comandos da mesma maneira. Acesse-o pressionando ctrl + Shift + P no PC ou cmd + Shift + P no Mac. Digite “instalar pacotes” aqui. Então você pode usar a Visualização de Configurações como acima.

Alguns pacotes vêm incluídos com o Atom por padrão. Eles são chamados de Pacotes Principais e podem ser desabilitados. No entanto, é recomendável não desativá-los, pois eles influenciam o comportamento geral do editor. Os outros pacotes que você instalará serão listados em Pacotes da comunidade.

Uma lista dos melhores pacotes Atom para instalar imediatamente

O Atom é versátil e seria uma pena não expandi-lo com novos recursos a apenas alguns cliques de distância.

Dito isto, existem mais de 8.000 pacotes por aí e tomar uma decisão pode ser muito difícil se você não souber exatamente o que deseja.

Para ajudá-lo em sua busca, veja nossa lista dos melhores pacotes Atom abaixo:

Emmet

O Emmet é um dos melhores pacotes Atom porque é universalmente útil em muitos idiomas.

É uma ferramenta de snippet de código que ajuda os desenvolvedores front-end a criar HTML e CSS rapidamente, e também pode ser usada para criar snippets de código personalizados para qualquer outra coisa. Para fazer isso, Emmet usa abreviações que são convertidas em cadeias de texto mais longas.

Perguntar pilha

Nenhum desenvolvedor acha conveniente mudar do navegador para o editor e vice-versa durante todo o dia. O Ask Stack Overflow é um pacote que permite pesquisar o Stack Overflow e obter suas amostras de código diretamente no Atom, sem precisar vasculhar as respostas para encontrá-las por conta própria.

culpa

Outro dos melhores pacotes Atom, git-blame permite alternar anotações no editor Atom. Para fazer isso, você só precisa pressionar ctrl + B ou clicar com o botão direito do mouse no arquivo e selecionar Git Blame.

Certifique-se de fazer isso no arquivo correto; caso contrário, você pode alternar o item errado ou recolher suas pastas em uma barra lateral de exibição em árvore.

Linter

Este é um pacote que não faz muito por si só, mas fornece uma base que você pode usar no Atom para adicionar plug-ins de linter mais rapidamente. Tem suporte para a maioria das linguagens e funciona com HTML, HAML, JSON, CSS, SCSS, Java e muito mais.

O Linter também possui plugins para idiomas de back-end. Há uma lista completa na página inicial do pacote.

Em geral, os linters são usados para melhorar a qualidade do código e reduzir o número de erros.

git-time-machine

Às vezes, ter um visual de todas as suas ações passadas bem na sua frente pode ser de grande ajuda. É por isso que o git-time-machine merece estar na lista dos melhores pacotes Atom do mercado.

Ele permite que você visualize a plotagem visual de seus commits de arquivo e também é interativo. Você pode clicar no gráfico de tempo e ver os commits em um intervalo de tempo específico.

Atom Embelezar

Código claro é muito mais fácil de percorrer e corrigir se algum bug for encontrado. Torná-lo legível sem envolver muito esforço é possível com o Atom Beautify, um pacote Atom que requer um único clique para limpar centenas de linhas de código.

Aqueles que trabalham em equipes maiores podem achar este pacote muito útil, pois o código será formatado de maneira padrão para que todos possam ler sem problemas. O pacote suporta vários idiomas, incluindo HTML, CSS, Python, Ruby, C e muito mais.

Turbo JavaScript

Se você usa o Atom para codificar em JavaScript, esse pacote não pode faltar na sua lista. Ele permite que você use trechos de código JavaScript que melhoram seu fluxo de trabalho e otimizam seu código.

Esses snippets funcionam bem para ECMAScript 6 e são muito fáceis de aprender, pois seus nomes são intuitivos, curtos e cativantes. Um exemplo seria “if” que representa um bloco “if” inteiro.

linguagem-líquido

Os desenvolvedores de front-end que usam a linguagem de modelo Liquid da Shopify podem usar language-liquid para destacar sua sintaxe.

O Atom tem uma opção de destaque incluída por padrão, mas não está disponível ao usar o Liquid. É aqui que o language-liquid entra em cena e evita que os usuários percam horas verificando seu código.

Se você usa outro idioma que precisa de suporte extra para realce de sintaxe, tente procurar um pacote semelhante com outro nome de idioma.

Destaque selecionado

Na mesma nota que o realce de sintaxe, mas com uma função diferente, Highlight Selected é usado para apontar as ocorrências de uma palavra específica em seu código.

Você pode selecionar qualquer palavra clicando duas vezes nela e Highlight Selected mostrará todos os outros lugares onde essa palavra aparece. Simples, mas extremamente conveniente!

Ei, você sabia que os dados também podem ser bonitos?

wpDataTables pode torná-lo assim. Há uma boa razão pela qual é o plugin nº 1 do WordPress para criar tabelas e gráficos responsivos.

Um exemplo real de wpDataTables em estado selvagem

E é muito fácil fazer algo assim:

Você fornece os dados da tabela
Configure e personalize
Publique-o em um post ou página

E não é apenas bonito, mas também prático. Você pode criar tabelas grandes com até milhões de linhas, ou pode usar filtros e pesquisas avançadas, ou pode enlouquecer e torná-las editáveis.

“Sim, mas eu gosto demais do Excel e não tem nada disso em sites”. Sim, existe. Você pode usar a formatação condicional como no Excel ou no Planilhas Google.

Eu te disse que você também pode criar gráficos com seus dados? E isso é apenas uma pequena parte. Existem muitos outros recursos para você.

Teletipo

O Teletype merece seu lugar na lista dos melhores pacotes Atom, pois traz algo novo para a mesa: permitir que você e sua equipe colaborem em um espaço de trabalho.

Teletype permite que você compartilhe seu código com outro programador e concede acesso para editá-lo em tempo real. Em alguns casos, isso é muito útil porque os programadores iniciantes são incentivados a acompanhar os programadores mais experientes e aprender suas maneiras de lidar com um projeto.

O teletipo também pode ser usado para fazer colaborações baseadas em equipe, portanto, não se restringe ao compartilhamento de código com uma única pessoa, mas com várias. Este pacote é resultado da criatividade e inovação da equipe do GitHub.

Desde 2017, o Teletype está entre os pacotes favoritos de muitos desenvolvedores por aí, incentivando conceitos como programação em pares e codificação social.

Arquivo aberto avançado (por Osmose)

Advanced Open File é um pacote Atom que ajuda os usuários a abrir arquivos e navegar em pastas com mais facilidade. Você também pode criar novos no Advanced Open File, o que reduz o tempo necessário para fazer isso no Atom. Você pode acessá-lo pressionando Alt + cmd/ctrl + O.

Menos que barra

Aqueles que usam mais HTML em comparação com outras linguagens devem experimentar o Less Than-Slash. Dos melhores pacotes Atom, Less Than-Slash diferencia-se pela sua simplicidade e eficácia.

O pacote adiciona uma tag HTML de fechamento depois que você digita </. Além disso, o pacote pode reconhecer qual tag deve ser fechada e a adiciona automaticamente enquanto ignora tags semelhantes ou semelhantes.

Você também pode especificar todas as tags que prefere que sejam ignoradas no painel de configurações do pacote. Além disso, você pode aproveitar a opção de retorno do cursor, que envia o cursor para o início da tag de fechamento, tornando a reescrita menos trabalhosa.

Ícones de arquivo

O Atom está programado para exibir o nome do arquivo na visualização em árvore ao acessar a janela do editor. Isso às vezes é percebido como um inconveniente, considerando que algumas pessoas preferem saber o nome do arquivo em que estão trabalhando no ícone do arquivo.

Como o nome sugere, o File Icons é o pacote Atom que faz exatamente isso. É uma pequena mudança com um grande efeito, então você deve tentar e ver como seu fluxo de trabalho melhora.

Layout do painel mais

Enfrentando problemas com a organização de painéis no Atom? O Page Layout Plus permite controlar a distribuição de cada painel, oferecendo também a opção de usar atalhos. Usando os atalhos, você pode pular entre colunas ou definir layouts.

Pacote Git Plus

Tomar ações no Gitis é bastante difícil porque você sempre precisa alternar para o terminal. O Git-Plus ajuda você a realizar ações do Git sem precisar alternar para isso. Ele é baseado em shortcodes e você só precisa pressionar cmd/ctrl + Shift + H. Todos os comandos do Git podem ser executados com este pacote.

Pigmentos (por abe33)

No web design, os códigos de cores são tudo. Pigments é um pacote conveniente que escaneia seu arquivo e detecta os códigos de cores existentes que são então exibidos. Pigmentos abrange HEX, RGB e HSL.

Se você trabalha com funções de transformação de cores como LESS ou Stylus CSS, Pigments também pode ajudá-lo, pois possui recursos prontos para uso. Você pode personalizar o tipo de marcador ou configurar palavras de cores diferentes para cada arquivo.

Seletor de cores

Falando sobre os melhores pacotes Atom em termos de gerenciamento de cores, Color Picker merece um lugar aqui. Você pode ajustar os valores de cores muito mais rapidamente em um arquivo CSS, que é um recurso útil para quem trabalha no setor de web design.

O seletor de cores aparecerá na tela pressionando cmd/ctrl + Shift + C. Descobrir quais cores você está usando com tanta facilidade reduz o tempo necessário para ajustar os matizes.

Minimapa (por átomo-minimapa)

Para aqueles que estão familiarizados com o Sublime Text, um minimapa é um recurso útil para desenvolvedores que gostam de ver uma prévia do conteúdo do arquivo na janela do editor de código. Ter um desses na tela ajuda os desenvolvedores a manter sua direção e foco.

Minimap é um pacote para Atom que permite fazer o mesmo. Além de sua funcionalidade principal, você também pode exibir marcadores, marcadores de linter e cores de pigmentos.

TODO-Show

Você quer todos os comentários TODO, FIXME e CHANGED listados na tela? Se sim, use TODO-Show. É um pacote legal que é muito útil para desenvolvedores que preferem escrever suas notas diretamente no código.

Entre os melhores pacotes Atom, este parece ser um dos mais úteis. Lembre-se de que você também pode criar comentários personalizados além dos pré-fabricados.

Gestor de projeto

Alternar rapidamente entre projetos não é o forte do Atom. É por isso que você deve experimentar este pacote que permite mudar muito mais facilmente.

Salve seus projetos usando a Paleta de Comandos digitando Project Manager: Save Project. Então, depois de salvá-los, você pode filtrar seus projetos e alternar entre eles facilmente.

Abas Atom expostas

Este pacote Atom oferece a possibilidade de guiar os arquivos abertos no programa. Se você estiver familiarizado com o Mission Control do Mac, é bem parecido. O pacote mostrará os painéis ativos e uma visualização de cada guia.

Considerações finais sobre os melhores pacotes Atom

Embora esta lista deva lhe dar o suficiente para mastigar, dificilmente é exaustiva de todos os melhores pacotes Atom disponíveis. Lembre-se de que existem mais de 8.000 deles, então reserve um tempo para encontrar os mais aplicáveis aos idiomas que você usa.

O Atom é poderoso o suficiente sem todos esses pacotes, mas esses pacotes Atom facilmente instaláveis disponíveis gratuitamente expandirão suas funcionalidades para torná-lo mais conveniente de usar.

Se você gostou de ler este artigo sobre os melhores pacotes Atom, você deve conferir este sobre os temas Sublime Text.

Também escrevemos sobre alguns assuntos relacionados, como plugins Sublime Text e como se tornar um desenvolvedor front-end.

Fonte de gravação: wpdatatables.com