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


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.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

6 comentários em “Dicas para você começar a utilizar o editor de texto Atom

  1. Rodrigo 17 de outubro de 2016 8:52

    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?

  2. Wendel 24 de setembro de 2016 11:01

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

  3. Isabella Felix 27 de março de 2016 0:29

    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 6 de abril de 2016 15:58

      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.

  4. FiguraWeb 7 de março de 2016 16:20

    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 8 de março de 2016 9:28

      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

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>