domingo, 21 de junho de 2015

DICAS FUNDAMENTAIS PARA ATOM EDITOR - Snippets, Extensões, Temas, personalização...



O Atom é o Editor de Códigos criado pela comunidade do GITHUB. Em um post anterior falo sobre ele e você pode ler pra saber mais. Mas se você já conhece ele (ou ainda não conhece) aqui vão algumas dicas pessoais de como melhorar este Editor de Códigos tão bacana. 

1- Baixe e instale a versão Zipada, a versão executável, além de se instalar em um lugar bastante estranho (pelo menos no windows) também tem o péssimo hábito de não fazer instalação limpa, deixando versões anteriores e outras pastas e arquivos se acumulando em seu computador então o melhor mesmo é baixar a zipada e descompactar diretamente na raiz do seu Sistema. 




2 - Proxy - Se você usa já é melhor configurar de cara:
Isso foi uma coisa que apanhei bastante na empresa onde trabalho. Configurar o Proxy no Atom pode tomar bastante tempo pesquisando e configurando mesmo. Ele não possui opção manual pra você configurar e vai ter de ser na mão com código mesmo. O Atom cria uma pasta de perfil de usuário dentro da sua pasta de perfil de usuário (no caso falo do windows) chamada ".atom". Esta pasta possui alguns arquivos onde ele salva suas preferências, extensões, arquivo de estilos e snippets. 

Dentro desta pasta é necessário adicionar dois arquivos configurando o Proxy. Dentro desta pasta você deverá criar um arquivo (se ele não instalar por conta própria) chamado ".apmrc" e dentro dele declarar as configurações de proxy de sua rede, neste formato.

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

OU

http-proxy=http://usuario:senha@IP DO PROXY:3128
https-proxy=http://usuario:senha@IP DO PROXY:3128

proxy=http://usuario:senha@proxy.dominio.com:3128
proxy=http://usuario:senha@IP DO PROXY:3128

****Também coloque as regras gerais de acesso dos pacotes igual abaixo:***

registry=http://registry.npmjs.org/
strict-ssl=false

Obs: Vale à pena lembrar que seu proxy pode ter a porta no final do endereço onde eu coloquei 3128 com outro número, isso é, outro endereço da porta. No caso mais comum é esse 3128 mesmo. No meu caso coloquei todas as linhas digitadas pra não me incomodar qual nomenclatura seria aceita, indico fazer o mesmo. 

Em alguns casos é necessário também criar um arquivo dentro desta mesma pasta chamado ".npmrc" e apenas copie estas linhas e cole nele também e salve os dois dentro da pasta ".atom" dentro do seu perfil de usuário do windows ou seu sistema. Por exemplo, no meu caso é 
"C:\Users\Thiago\.atom"

Com isso seu ATOM passará a aceitar o proxy para atualizar, instalar extensões, e se comunicar com a rede externa na web.

3- Instale e configure uma fonte de texto do editor leve. A original dele já serve mas eu particularmente prefiro e fonte "Ubuntu Mono" da familia Ubuntu. Ela é leve, perfeita pra codificar e faz toda diferença quando temos milhares de linhas de código. Mas a do Atom Nativa também é boa. 
Você pode baixar gratuitamente ela em (http://font.ubuntu.com/). Instale em seu PC e depois vá em seu Atom no menu superior em Files > Settings e configure a fonte. Deixo a minha imagem abaixo:


4 - Crie seus próprios Snippets dentro das suas necessidades. 
Quem inventou a possibilidade de criar Snippets nos Editores é uma pessoa muito inteligente. Você poder fazer seus próprios códigos e usar eles onde quiser, isso é muito útil pois só o desenvolvedor sabe do que precisa. Então já aconselho de cara a você criar os seus próprios snippets. É fácil no Atom. Você deverá ir em Files > Open your Snippets.


Ao abrir o arquivo, você vai perceber que existe uma série de comentário comentados falando em como criar um snippet. Existe um de exemplo lá que é igual ao abaixo:
'.source.coffee':
 'Console log':
  'prefix': 'log'
  'body': 'console.log $1'

O que acontece é que ao abrir um documento novo, digitando a palavra "log" e digitando a tecla "TAB" ele irá inserir um bloco de código pré-definido na última linha ali, a "body". O uso da variável $1 ali é pra indicar para o Atom onde termina o seu código a ser inserido, mas não é obrigatório. Você pode criar vários outros até sem mesmo colocar estes caracteres. 

Na internet tem um vasto campo de consulta sobre como fazer Snippets pra Atom mas pra facilitar sua vida, deixo aqui o meu Snippets pessoal que utilizo no atom e assim você poderá perceber como é feito e fazer você mesmo, não precisa ser programador pra isso. Só uma dica, para inserir Snippets HTML nele é necessário color o '*': antes de começar a declarar seus snippets HTML. Isso porque colocando este asterisco você declara ele genericamente e assim não dá problema. 

Para baixar meu Snippets pessoal que possui Snippets de estrutura HTML, HTML5  para responsividade, Bootstrap, Icon Awesome, Jquery e outros, clique no link abaixo. Você deverá salvar e substituir pelo seu já existente que está na pasta ".atom" na raiz do seu Sistema como falado na dica anterior. 


5 - Estilize seu Atom:
Você pode estilizar seu Atom. A versão atual é muito bonita e por isso quase não mudo nada nela. Apenas mudei por exemplo algumas pequenas cores, definição de tamanho de fontes da árvore de arquivos, e fontes dos menus, e a cor de fundo do editor porque quando bate luz na tela ou em ambientes muito iluminados a cor de fundo mais clara faz pouco contraste com as cores das fontes. Também deixo aqui a minha pra você poder baixar, se quiser e ela também se encontra no mesmo lugar das dicas anteriores, na pasta ".atom" dentro do seu perfil de usuário do seu sistema. 

Para acessar, basta ir em Files > Open your Stylesheet

Você pode personalizar tudo que desejar no seu ATOM. Para isso basta inspecionar o editor com um inspetor de códigos igual o do chrome navegador. Você ativa ele indo no menu superior.. View > Developer > Toogle Developer Tools.

Ai você inspeciona o que deseja, pega o nome da classe CSS dela dentro do editor e coloca no seu arquivo Stylesheet mudando cores ou outra coisa que desejar, salva e é subscrito sobre a classe original, fazendo parte do seu Editor. Quando a versão é atualizada não se perde porque ele fica na sua pasta de personalização do Atom.






6 - Dicas de Extensões ou Packages como é chamado pela comunidade.  Para inserir pacotes vá em Files > Settings






Atom Minimap : Como no Sublime Text, o Atom possui um Minimap pra adicionar no editor, ele funciona muito bem e possui um design legal. Rápido também e pode ser instalado digitando no campo de pesquisa Minimap. 



Seu endereço no Github é: https://github.com/atom-minimap/minimap




Tool-bar: 
Pacote muito legal criado pelo Suda (https://github.com/suda/tool-bar) que cria uma barra lateral (você pode colocar em qualquer lado do editor que quiser, esquerdo, direito, em cima ou em baixo) com ícones de atalhos de funções dos menus ou que você mesmo crie. Basta digitar "tool-bar" no "install" do Settings do Atom. Ele não aparecerá sozinho, você precisará baixar mais um pacote que irá inserir pra você os icones na barra e mostrá-la....logo abaixo explico.



Tool-bar-iconshortcuts :
Já aproveito pra indicar a minha própria extensão que trabalha com o Toolbar e vai deixar seu ATOM com a Toolbar igual a da imagem acima ai. Para baixar você deverá ir no meu GITHUB do Pacote que criei e baixar a última versão lá zipada e colar dentro da pasta ".atom/packages",  que é a pasta como citado anteriormente onde ficam guardados seus arquivos personalizados. 



Obs: Caso queira, você pode baixar diretamente o tool-bar-main do SUDO também via Settings do ATOM. Ele também vai adicionar os ícones como explicado e também vão acionar a sua toolbar mas no caso possui menos ícones que pra mim deixam a desejar por isso criei meu próprio pacote pra toolbar. 
De qualquer forma basta digitar os nomes mostrados na imagem abaixo em  seu menu "install" 



O atalho Github dele é : https://atom.io/packages/tool-bar-main



Atom Beautify: Com ele você pode identar ou formatar seus códigos CSS, JS, HTML e quase todas as linguagens suportadas pelo ATOM. Ele é parecido com o Beautify do Sublime Text, tem o mesmo papel de deixar o código bonito visualmente pra poder trabalhar. 



Atom Synced Sidebar: É como a Sidebar Enhancement do Sublime Text. Ela acrescenta várias funcionalidades a barra de arvore de arquivos do lado esquerdo dos editores de código. 





Color Picker: Adiciona a funcionalidade de escolher a cor desejada em seu código através de uma tooltip de cores onde você escolhe como num editor de cores. Você escolhe, digita enter e ele insere a cor desejada. Também converte as cores de RGB e RGBA, etc. 




Webbox-Color: Ele adiciona ao lado do código da cor a cor dela. Complicado de explicar mas fácil de entender ao visualizar. É realmente muito útil. O legal deste pacote é que ao contrário da maioria ele adiciona depois do código a cor no formato de bolinha e ele não afeta nem atrapalha de ver com clareza o código da cor como na maioria mas você se gostar da cor sobre o código basta ir nos settings da extensão e habilitar a função "Fill Color as Background". 



Abaixo deixo outros pacotes que também são muito bons e uso. Sempre a mesma forma de instalar. Basta ver a descrição na própria imagem em questão abaixo do nome do pacote.







Por fim, os Temas...Bom Temas nem preciso falar. A versão default dele é linda, não precisa de mais nada. Mas se você quer ver algo diferente...Bom, tem a opção no settings "Themes", olhando lá você vai encontrar outros temas pra implementar. Mas realmente, nas minha andanças a Original dele é a mais bonita. Se você não gostou do tema de cores dos códigos e quer mudar ou gostar por exemplo do Monokai igual ao original do Sublime, você pode baixar o tema do editor chamado "Monokai" mas realmente não aconselho. 

Espero que tenham gostado...das dicas ai...qualquer coisa malha ai...ou comenta. 















36 comentários:

  1. muito bom, parabéns..
    mas thiago, eu nao consigo inserir a barra inversa, no meu teclado o atalho é Alt Gr + q

    ResponderExcluir
  2. Obrigado Fábio.
    Não entendi o que seria "barrainversa"?
    Poderia me explicar melhor para que eu possa ajudá-lo?
    Grande abraço.

    ResponderExcluir
    Respostas
    1. Pelo que eu entendi você está com dificuldades de usar a barra invertida do seu teclado. No caso não se trata somente do ATOM correto? Você está com este problema em qualquer outro programa que estiver usando. Neste caso o que posso lhe dizer é que seu teclado deve estar configurado errado. Essa configuração muda dependendo do teclado mas no geral os teclados com teclas com caracteres brasileiros usam o padrão ABNT-2. Veja nas configurações regionais do seu Windows se seu teclado está configurado para este padrão.
      Caso queira me mandar uma imagem de seu teclado por e-mail fique à vontade para poder lhe ajudar.
      thiagolucio@gmail.com

      Excluir
    2. Blz Thiago?
      Meu nome é Tiago. Estou tendo um problema parecido. Quando uso a barra invertida, Altgr+q, no meu notebook e cursor vai por final do código.

      Excluir
    3. Olá semi-Xará.
      Então, primeiro queria te pedir desculpas por não te responder mais cedo mas é que a vida tá bastante enrolada e ai só tive como vir aqui agora. Espero que seu problema já esteja resolvido mas de qualquer forma vou lhe escrever algo aqui pra ajudar.

      Eu tinha respondido o Luiz Fábio por e-mail esta dúvida, descobri umas informações num FORUM sobre esse assunto e era o que eu suspeitava mesmo, configuração regional do teclado. No caso dele acho que era Notebook, não sei se o seu caso é o mesmo mas geralmente pelo que pesquisei o problema parece ser nos Notebooks da Samsung e não é somente com Windows não, é com Linux também.
      A melhor resposta que vi em comum em vários lugares foi o vídeo que deixo abaixo, parece que este resolveu 90% dos casos e nada como um vídeo pra ensinar passo a passo né. Mas de qualquer forma deixo todos os links abaixo por ordem de importância pra você também pesquisar e dar uma olhada.
      Espero que tenha lhe ajudado mas se não manda a resposta que eu continuo com você nessa questão sem problemas.
      O vídeo:
      https://www.youtube.com/watch?v=WaY_mOCB21w&feature=youtu.be

      Os links encontrados...por ordem de importância, isso é, os que achei mais úteis primeiro...
      https://br.answers.yahoo.com/question/index?qid=20150616064710AAezpsI

      http://www.linhadefensiva.org/forum/topic/164934-tecla-alt-gr-parou-de-funcionar-corretamente/

      http://answers.microsoft.com/pt-br/windows/forum/windows_xp-performance/problemas-com-as-teclas-alt-e-alt-gr/085bc63c-1a1e-4605-ae8c-89c3c9be351e?auth=1

      http://forum.clubedohardware.com.br/topic/1121128-tecla-alt-gr-n%C3%A3o-est%C3%A1-funcionando/

      Solução pra quem tem Linux:
      http://blog.mazolini.com.br/2009/04/resolvendo-alt-gr-w-alt-gr-q-no-teclado.html

      Excluir
    4. Este comentário foi removido pelo autor.

      Excluir
    5. Este comentário foi removido pelo autor.

      Excluir
    6. Eu uso um laptop Samsung onde a barra ('/') é digitada através do altGr+q, e também estava com problema para digitar esse caracter no Atom.

      O que resolveu meu problema foi desabilitar o keybinding para a combinação ctrl-alt-q. É só adicionar isso aqui no seu keymap ("File/Open your keymap"):

      '.platform-win32 atom-text-editor, .platform-linux atom-text-editor':
      'ctrl-alt-q': 'unset!'

      (São só duas linhas. Na segunda é preciso colocar 2 espaços no início da linha)

      Espero que ajude!

      Excluir
    7. rsrsrs, obrigado Kennedy. Está desatualizado. Acho que em breve vou fazer outro post atualizado pois este é o mais acessado. A Galera tá começando a conhecer mais sobre este editor.

      Excluir
    8. salvou mesmo, rodei muito atras de uma solução

      Excluir
    9. Obrigado Wagner, bom saber que foi útil este meu post. Fico à disposição.

      Excluir
  3. Esta questão do proxy ai foi top +1

    ResponderExcluir
    Respostas
    1. Obrigado Gabriel.
      Lembro que quando passei por este problema o ATOM ainda era um editor recente sem nem versão de lançamento estável oficial. Fiquei muito tempo tendo de baixar dependências e packages na mão, muito chato isso. Na empresa onde trabalho tem proxy até pra abrir a torneira do banheiro então demorei um bom tempo pra descobrir. Mas desde então nunca mais tive nenhum problema. Se tiver me avisa pra gente tentar resolver juntos. Grande abraço.

      Excluir
  4. Beleza Thiago! Gostaria de saber como faço na barra Atom Synced Sidebar ficar igual a Sidebar Enhancement do Sublime Text, porque eu acrescentava meu projetos através dos diretórios no Sublime e assim ficava gravado, só que no Atom quando fecho e abro um arquivo ex: html fora dos meu projetos(folder) ai apaga todos os folders da barra lateral. Valeu e muito obrigado pelas dicas!!!

    ResponderExcluir
    Respostas
    1. Boa noite Rogério.
      Pelo que entendi, se você abre um projeto a partir de uma pasta a mesma fica gravada ao reabrir o Atom mas se abrir um arquivo somente ao reabrir o atom, o projeto é perdido na barra lateral. Se eu estiver entendido corretamente esse não é um problema do Atom Synced Sudebar e sim um comportamento do Editor, do Atom. Ele guarda o último estado da última vez que foi fechado. Se você abre um arquivo no atom ele guarda esse comportamento e ao abrir ele novamente, ele vai abrir o arquivo mas não o projeto que estava na "treeview".

      Uma das coisas que você pode fazer é colocar o caminho do seu projeto no settings do Atom, assim ele não perderá e sempre abrirá na pasta daquele caminho de seu projeto apontado. Esse é o campo "Project Home" no settings e você pode colocar dentro dele o caminho.

      Eu sou suspeito para falar pois deixo o "Open Empty Editor Panel on startup" habilitado e com isso sempre abre em branco, sem qualquer projeto no meu ATOM, isso porque pessoalmente prefiro assim.

      Uma forma de isso não acontecer no seu ATOM é você escolher a opção...
      "File -> Add Project Folder" e adicionar um projeto a tree-view logo abaixo da já existente. Mas como está falando de arquivos ai já não sei se o comportamento seria o mesmo pra eles.

      No entanto, o synced sidebar é um pacote extensivo que não vai mudar o comportamento do editor desta forma acredito. Ele apenas vai ter dar a opção de "Add Folder" seguindo o mesmo processo que lhe citei acima.

      Nem mesmo no caso do Sublime text ele muda o comportamento do programa, é o próprio sublime text que possui isso em sua engenharia de funcionamento.

      Se eu tiver entendido errado sua pergunta por favor me fale, pois posso ter escrito até mesmo tudo a tôa.
      Grande abra e obrigado por vir aqui...

      Excluir
  5. Existe uma forma de instalar os Packages offline? Pois baixei e colei na pasta atom/packages porem da erro e o package nao inicia. tem algum macete para instalar offline? Obg

    ResponderExcluir
    Respostas
    1. Opa. Desculpe Henrique, somente ví agora sua pergunta. Já tem um tempo legal né...Desculpe mesmo.
      Então. Tem sim e é fácil. Basta você fazer o download manualmente do arquivo do package (todos são repositórios do GitHub). Baixa o arquivo ZIP no master do repositório. Uma vez que tenha feito o download você deve descompactar a pasta com o nome original dela sem o final "-master" que o github coloca por default.

      Depois disso copia ou recorta a pasta e cola dentro da pasta "packages" que fica dentro da pasta ".atom" no seu perfil de usuário. Se for windows geralmente fica dentro da sua pasta de usuário padrão, por exemplo...
      Se for Windows ... C:\Users\Henrique\.atom\packages
      Se for Linux ... ./home/henrique/.atom/packages/

      Qualquer dúvida, avisa ai...

      Excluir
  6. Thiago, excelente post... acabo de conhecer o Atom e seu material publicado foi de suma importância.
    Gostaria de uma ajuda sua para tentar solucionar uma questão.
    Após instalado o emmet, criei um arquivo index.php (Assim como faço no SublimeText) e quando digito "html" e pressiono tab, é criada a estrutura html corretamente, no entanto, se eu digitar: ul>li*5 e pressionar tab, não é expandida a estrutura como no SublimeText. Essa extrutura é expandida somente se a extensão do arquivo for html.

    Sabe me dizer como resolvo isso? Ficaria grato.

    Um abraço,

    Rodrigo Siqueira

    ResponderExcluir
    Respostas
    1. Olá Rodrigo.
      Então, me responde uma coisa. Quais os packages você instalou na sua versão do ATOM? Pergunto isso porque o Emmet dá muito conflito com outros packages. Ele tem muitos recursos e por isso vive bugando com outros.
      Esse ai por exemplo pode ser um conflito com o nativo do próprio ATOM porque no ATOM se você digitar "ul" e apertar TAB ele completa o par de tags. Mesma coisa com outros pares de tags.

      O ideal é você dar uma olhada no seu arquivo config.cson e ver se as configurações do Emmet para o ATOM. Ou ir em "Settings -> Packages" e procurar o Emmet e dar uma olhada na configuração dele diretamente.

      Provavelmente é um problema simples que até mesmo desinstalando o emmet e instalando novamente resolva. Ou pode ser simplesmente um problema como disse anteriormente de conflito. Neste caso uma das soluções é o link: https://atom.io/packages/emmet (lá pro final da página em título "Tab key" em diante. Tava vendo que no "default keybindings" a configuração de expansão do teclado é a seguinte.
      Expand Abbreviation: tab or ctrl + e
      Expand Abbreviation (interactive): ctrl + alt + enter

      A princípio essa seria a orientação. Eu particularmente não uso o Emmet, não curto muito, prefiro fazer meus Snippets eu mesmo e não ficar sobrecarregando com peso o Atom mas é válida.

      Pelo que li na documentação do Emmet, está correto sua nomenclatura de atalho para a ação:
      http://docs.emmet.io/cheat-sheet/

      Me dá um retorno nisso pra poder te ajudar...Eu não mexo com Emmet mas ajudar é o que vale.

      Excluir
  7. Valeu pela dica do proxy, estava batendo cabeça com isso...

    ResponderExcluir
    Respostas
    1. Desulpe a demora Antônio. Eu somente ví agora. Eu fico feliz em saber que ajudei mesmo que tempos depois. Eu acho que hoje em dia a questão de proxy nem existe mais problema com isso. Mas enfim. Muito obrigado por comentar e muito sucesso!

      Excluir
  8. Ele quando instalado na versão setup, se localiza na pasta AppData do Windows. Eu não sabia que na versão setup se instalava outras versões anteriores. Mas valeu a dica.

    ResponderExcluir
    Respostas
    1. Opa. Adriano, então...
      No momento atual eu nem sei se ele ainda se instala da mesma forma. Podem ter mudado isso, essa parte do Atom não mexo e sou mais Usuário Linux mas é bom conferir porque ficar acumulando versão na pasta, mesmo com os HD's de hoje com maior capacidade não é boa idéia. Cada versão hoje em dia depois de instalada chega a quase 200MB umas cinco versões vai ocupar o mesmo espaço no Netbeans ou Eclipse, dai não compensa. Obrigado ! e grande abraço.

      Excluir
  9. Olá Thiago. Estou com o seguinte erro ao tentar instalar seu package de icones para tool-bar: https://s29.postimg.org/r3v9a875z/Captura_de_tela_de_2016_12_18_20_22_15.png
    Teria como me ajudar? Desde já, agradeço.

    ResponderExcluir
    Respostas
    1. Problema resolvido. Dei um "npm install" na pasta do package.

      Excluir
    2. Oi, desculpa a pergunta noob mas como eu faço o "npm install"?

      Excluir
    3. Resolvi também, aprendi na marra kkk

      Excluir
    4. Pessoal.
      Peço desculpas por não ter tido tempo de respondera tempo pra vocês. Muitas vezes eu não recebo no email o informe de comentários e a vida não deixa eu vir a tempo pra lhes ajudar. Quanto ao problema que enfrentaram hoje em dia indicaria a vocês o uso do yarn ao invés do npm. Mas o npm é do nodejs. Ele é a base dos outros então vale à pena também se dedicar isso pra ele.

      Excluir
  10. Respostas
    1. Opa. Olá desconhecido.
      Então. A fonte usada no editor no momento deste post foi a "Consolas".
      Você pode baixar ela facilmente da Internet. Pra facilitar sua vida eu tenho ela num repositório de fontes para editores de código que eu tenho no Github.

      Segue a URL e ali pode baixar ela e todas as outras que eu uso. Tem um monte delas.

      https://github.com/thiagolucio/code-editor-fonts.git

      Grande abraço e obrigado!

      Excluir
  11. https://lucarb999.com/ Much obliged to you for constantly raising the degree of execution and accomplishment

    ResponderExcluir