Logotipo Design Interativo

Dicas para você começar a utilizar o editor de texto Atom


Para quem não conhece o editor de texto Atom é uma ferramenta para front-ends e devs muito semelhante ao Sublime mais com alguns diferenciais que fará você mudar sem pensar. O Atom é open-source, criado pela comunidade do Github, possui muitas características do Sublime e uma interface bem amigável quando se diz respeito ao instalador de temas e plugins.

Já existe muitos posts na internet falando sobre o Atom mas também quero deixar minha contribuição e dicas para resolver problemas de proxy, dicas e pacotes essenciais para front-end.

Proxy

Em algumas empresas para acessar a internet é necessário fazer o login na rede e acessar os sites através do browser, no Atom isso também ocorre quando tentamos procurar por themes e packages através do instalador da ferramenta,  se não for configurado corretamente o editor não consegue acessar os repositórios para fazer as instalações.

Caso você tenha este problema siga os passos abaixo para ter acesso, é bem simples.

Criar na raiz da pasta c:\users\nomedousuario\.atom um arquivo chamado .apmrc, com o seguinte sintaxe

http-proxy=http://usuario:senha@proxy.dominio.com:3128
https-proxy=http://usuario:senha@proxy.dominio.com:3128

Fácil assim, agora o Atom já consegue acessar a internet para fazer o download dos pacotes e temas para instalar.

 

Dicas

Remover a Linha Guia: Desinstalar o package: wrap-guide

Inserir guias de identação de código: Entrar em configurações File>Settings, na aba Settings e habilitar Show Indent Guide

Para instalar os Package: Acesse no menu Packages > Settings View > Open, clique na aba install e digite o nome do plugin abaixo na busca.

 

Themes

Monokai Darkhttps://atom.io/themes/monokai-dark
Um dos temas mais utilizados por desenvolvedores.

 

Packages

Minimaphttps://github.com/atom-minimap/minimap
Cria o mapa de navegação do código na direita, semelhante ao sublime

Emmethttps://atom.io/packages/emmet
Um dos melhores plugins para desenvolvedores front-end, o emmet é um facilitador de código, completando sintaxe e multiplicando códigos de forma rápida.

Toolbarhttps://atom.io/packages/tool-bar
Cria uma barra lateral bem interessante onde você pode trocar de lugar com ícones de atalhos de funções dos menus ou que você mesmo crie.

Atom Beautifyhttps://atom.io/packages/atom-beautify
Identa ou formata códigos CSS, JS, HTML e quase todas as linguagens suportadas pelo ATOM. Ele é parecido com o Beautify do Sublime Text. Deixa o código mais bonito.

Highlight Selectedhttps://atom.io/packages/highlight-selected
Semelhante ao Sublime este package deixa os textos selecionados com outline facilitando a visualização.

Pigmentshttps://atom.io/packages/pigments
Mostra a cor diretamente no códigos de cores, um excelente color view.

Color Pickerhttps://atom.io/packages/color-picker
Seleciona cores diretamente no editor, e converte também rgba e rgb além do hexa.

Auto Prefixerhttps://atom.io/packages/autoprefixer
Adiciona os prefixos dos user-agents -moz -webkit etc… automaticamente no css quando necessário;

Autocomplete Pathshttps://atom.io/packages/autocomplete-paths
Mostra o caminho das pastas na hora de inserir imagens no html.

Autocomplete Javahttps://atom.io/packages/autocomplete-java
Completa código de java, facilitando a criação dos códigos e evitando erros de fechamento.

Auto Close HTMLhttps://atom.io/packages/autoclose-html
Completa o código HMTL criando a tag de fechamento.

 

E é isso pessoal, espero que tenham gostado, se tiverem mais dicas postem nos comentários.

Comentários
  1. Michael Borges disse:

    Ótima publicação, ajudou-me muito, rapaz parabéns pelo site e pela publicação!

  2. Rafaela disse:

    O brackets é muito top.
    – leve
    – interface muito boa.
    – fácil manuseio.
    Irei testar o Atom………..

  3. Rodrigo disse:

    eu parei de usar o atom, devido indentação, tentei configurar, colocar packages, mas nenhum arrumava certo, outra coisa, toda vez que abria um projeto, eu tinha que colocar novamente o emmet, desativar e ativar, ele nunca ativa sozinho, não consegui arrumar isso, alguem sabe se existe forma de arrumar isso?

  4. Wendel disse:

    Ainda não consegui resolver o problema do proxy aqui.

  5. Tenho verdadeira paixão pelo Atom pois além da interface ser bonita e agradável, me parece que também é mais leve que o Sublime. Agora vou testar o Brackets.

    • Robson Moulin disse:

      Depois que comecei a trabalhar com ele, não larguei mais, gosto bastante do Sublime também mas se você não comprar é um pouco chatinho aquele aviso que aparece bem quando você esta desenvolvendo. O Brackets ainda não usei mais um colega de trabalho só usa ele.

  6. FiguraWeb disse:

    Já usou Web Matrix da Microsoft? eu tentei utilizar aqui mas tive problemas de compatibilidade, no entanto eu gosto muito mesmo é do Phpstorm e Netbeans

    • Robson Moulin disse:

      Olá,
      Nunca usei, prefiro softwares free, já utilizei o Netbeans mais achei a interface dele um pouco ruim e com alguns bugs, e como utilizava o Sublime o Atom é praticamente uma cópia mas com melhorias e totalmente open source.

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade