sexta-feira, 23 de dezembro de 2016

Então.

Final de ano, correria mas queria compartilhar este problema que passei com a instalação do Terminal do Linux no Windows 10.

A Instalação é fácil. Se você tiver a atualização de pacote de aniversário do windows ou uma mais recente funciona rapidamente.

1 - Vá em Iniciar e depois Configurações



2 - Atualizações de segurança...



3- Habilita a opção para desenvolvedores do windows 10



4 - Depois através do iniciar pesquise pelo "Ativar ou desativar recursos do windows"



5 - Depois seleciona o windows subsystem pra linux



O Windows vai instalar pra você as atualizações pra que possa usar o Bash...Digite bash no Iniciar do Windows....





Agora é que vem (ou não) o problema. Se correr tudo bem, Ele abrirá o prompt e pedirá as informações pra instalação deste bash. Caso contrário (como foi o meu caso) O Prompt abre e fecha muito rapidamente não fazendo nada no seu PC. Neste caso, você deve abrir uma janela do Console do Windows (digite "cmd" no Iniciar e mande rodar) e digitar "bash", e ai ele mostrará o erro.

"Configurações do console incompativeis. para usar esse recurso, o console herdado deve ser desabilitado"

Obs: este foi o erro apontado para mim. Se aparecer outro pra você me manda uma mensagem que podemos tentar solucionar juntos.

Mas seguindo para resolver este erro é fácil ....

1 Abra o cmd (tecla windows, digite cmd e aperte enter)
2 na barra de título dê um clique com o botão direito do mouse
3 vá em propriedades, aba opções
4 Desmarque a opçao "Usar console herdado (requer reinicialização)

Feito isso, tecla de atalho do windows e digite bash tecle enter e siga as instruções de instalação, feito isso vai funcionar.



É isso ai...Um bom Natal e Feliz Ano Novo pra todos os leitores!

E Obrigado pela força, compartilhamento, comentários, críticas e tudo mais...Vocês são demais!

domingo, 3 de julho de 2016

Ícones personalizados na Sidebar Default Sublime Text


A muito tempo sem colocar nada de post resolvi vir postar alguma coisa pequena.

Pra quem usa o Sublime, experimenta os inúmeros temas mas sempre acaba voltando
pro Tema original porque no final ele é mesmo o mais bacana de todos os temas
que existem ai vai uma pequena alteração mais muito legal no Tema Original dele.

O tema original tem como único problema pra mim a "Treview" original ou "sidebar" como
muitos chamam (inclusive no programa). Quando se trata de projetos e estamos mexendo com
ela fica muito ruim identificar os milhares de documentos referentes ao projeto. Existe
uma solução de UI pra isso que já é usada em muitos outros programas (IDE's, no caso) que
é iconizar os inúmeros arquivos por tipos (.php, .html, .png, .css, etc).

Com isso, fica mais fácil identificar os arquivos dentro das pastas e sub-pastas do
projeto em que está trabalhando (e por que não projeto(s) aninhados).

A dica aqui é simples. O arquivo zipado em anexo (clique aqui para download) contém um pacote de ícones que eu mesmo
criei mantendo o mesmo estilo original do sublime dos poucos ícones que ele tem. Com
isso você deve apenas descompactar a pasta dentro da sua "Browse Package" de usuário.

O tema original do Sublime, assim como qualquer tema que você instala possui um padrão
de pastas que podem ser subscritas se você colocar no local certo e com isso obter o
resultado desejado. Existem arquivos padrões com nomes padrões e nesta pasta que
estou anexando zipada pra você eles já estão com os devidos nomes aplicados.

A notícias é que esta pasta, dependendo da instalação do Sublime pode mudar de endereço.

Algumas ficam dentro da pasta "packages" e outras simplesmente ficam soltas, dentro da pasta
"Browse packages" mesmo do Usuário.

Para fazer isso, basta ir no menu superior em "Preferences..." -> "Browse Packages" (por isso
chamo a pasta com esse nome, por referência). Então você pode começar tentando diretamente
nesta pasta, se não funcionar 'e' se tiver dentro dela outra pasta chamada simplesmente "packages", você pode (se não funcionar), jogar dentro dela depois.

1 - Crie uma pasta nova chamada "Theme - Default" e pegue os arquivos dentro da pasta descompactada e cole todos lá dentro (ou descompacte o arquivo compactado daqui da matéria diretamente dentro dela).

2 - Abra seu Sublime text que já vai estar funcionando.

Lembre-se, se não funcionar tente recortar esta pasta e colar dentro da pasta "packages" (se existir) e ai vai funcionar.


Conhecimento Adicional :)


O Sublime possui ainda uma forma de estilizar a Sidebar do tema original. Pra mim bastou pouca
coisa pra ficar satisfeito. As vezes tenho dificuldade de ler os arquivos por causa do espaçamento original e o tamanho das letras usadas nele. Então bastou mexer um pouquinho no afastamento entre linhas e aumentar um pouco o tamanho da fonte pra poder deixar do jeito que me agradasse. Então é o seguinte.

No mesmo menu superior - "Preferences..." -> "Browse Packages" do seu Sublime, ao abrir a pasta entre na pasta "User". Dentro dela, se não existir, crie um arquivo chamado "Default.sublime-theme" (caso existe abra ele com um editor de texto ou editor de código como o próprio sublime text por exemplo).

Se ele existir, repare nos códigos que ali existem. Vai perceber um padrão (porque não vou te ensinar a programar aqui né...). De qualquer forma, no meu pessoal deixei apenas...

[
//Sidebar Label
{
"class": "sidebar_label",
"color": [9, 9, 9],
"font.size": 12.5
},
// Sidebar container
{
"class": "sidebar_container",
"layer0.opacity": 1,
"content_margin": [0,0,0,0]
},
// Sidebar tree || entries
{
"class": "sidebar_tree",
"indent_offset": 12.5,
"indent": 15,
"row_padding": [6,6],
"layer0.opacity": 1.0,
"indent_top_level": true
},
]

Se reparar vai ver que estou tratando de forma separada cada padrão de funcionamento da sidebar. Primeiro tratei a label, depois tratei o container (contenedor da sidebar e seu conteúdo) e depois os detalhes da Tree-view. Os comandos são basicamente declarar o local a ser implementado as alterações logo abaixo...

- declaro a class que vai ser afetada (classe css de estilo): "class": "sidebar_label",
- declaro qual item da classe deve ser alterado e o valor : "font.size": 12.5


Para conhecer melhor estes códigos e como eles trabalham no Sublime Text, basta pesquisar pela internet um pouco mais. Uma dica legal é você instalar um tema (SETI_UI por exemplo) e inspecionar este mesmo arquivo de configuração e ver como ele declara o arquivo e como ele funciona. Indico este tema porque é de um dos desenvolvedores do Sublime Text mesmo que criou, então é um bom tema pra estudar e conhecer melhor o Sublime.

Pra quem como eu gosta do Tema Default mas gostaria de fazer os "acertos detalhados das arestas" vai gostar de estudar um pouco sobre isso, o pouco que se estuda trás grande satisfação na hora de usar o programa.

É isso ai pessoal, espero ter ajudado com a foforização do seu Sublime.
Vlw !





domingo, 10 de abril de 2016

Instalando e configurando JAVA no seu Linux

Todo mundo que desenvolve precisa, seja pra rodar máquina virtual ou pra acessar seu banco ou outra necessidade essencial o JAVA está presente como a propaganda mesmo fala em milhões de dispositivos pelo mundo. Para os desenvolvedores em especial ainda é muito importante ter o JAVA instalado e configurado na sua máquina. No Linux, mais especificamente no Ubuntu e suas distros tem milhares de posts falando em como instalar (incluindo este né...) o bendito na sua máquina. 

Me deparei com este problema aqui, não porque não tinha mas porque não estava corretamente configurado. Então aproveitando a problemática resolvi fazer minhas consultas pra solucionar o problema. 

Praticamente em todos os posts a repositório é sempre o mesmo, o PPA. Então resolvi ir direto na fonte e pesquisar pois lá tem a informação de como instalar passo a passo. Geralmente as pessoas vão em posts como este para poder saber como fazer isso, então vou ser o mais reto possível nisso passando a informação da forma PPA de instalar que deve ser a mais correta, certo?

Primeiro se desejar fazer o mesmo segue o link do PPA para isso:

Mas para os mais preguiçosos segue os comandos abaixo, ele é pra instalação e configuração do mesmo. 


Vai ter usar o terminal (Digita ai as teclas em conjunto...CTRL+SHIFT+T) pra abrir seu amigo:

sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer
A primeira linha baixa e instala e configura o repositório PPA do Java na sua máquina. A segunda atualiza a sourcelist de atualizações do seu linux e a terceira instala efetivamente o JAVA na versão 8 que é a última agora. Demora mesmo mas ele vai mostrando o progresso da instalação passo a passo. 
Quando acabar...verifica se a instalação está OK...digitando no terminal :

java -version
e digite também ...
javac -version

Se ele informar que o comando não foi reconhecido (o que era o meu caso) então você vai ter de configurar as variáveis de ambiente. Tem o jeito manual pra quem gosta...digitando linhas de comando direto pra gravação das paths e tem o jeito automatizado, que o JAVA possui dentro dele como script pra fazer isso pra você...Vamos primeiro a mais fácil, automatizada. 

sudo apt-get install oracle-java8-set-default

Com este comando você configura as suas variáveis de ambiente. Repita os comandos anteriores java -version e javac -version para se assegurar. Então, se der tudo certo pode partir pro abraço. 

Mas caso não funcione, ai vamos pra configuração mais complicadinha...a pros teimosos...

Primeiro configura a variável JAVA_HOME:
export JAVA_HOME=/opt/jdk1.8.0_66
Depois a Variável JRE_HOME:
export JRE_HOME=/opt/jdk1.8.0_66/jre
E finalmente a variável PATH:
export PATH=$PATH:/opt/jdk1.8.0_66/bin:/opt/jdk1.8.0_66/jre/bin
Depois disso, você tenta de novo, deve funcionar agora...o java -version e o javac -version

Espero ter ajudado....pra mim funfou ;)





Conheça o Gerador de Templates em Branco para Wordpress Online


Se você desenvolve Sites para clientes particulares como eu, o famoso Freela-man, com certeza já utilizou a plataforma CMS para desenvolver estes Sites. Quando o assunto é criar Sites para clientes que precisam gerenciar conteúdo e não querem depender dos desenvolvedores o CMS é uma alternativa quase certa, poupa tempo, já te dá a interface necessária para administrar via back-end o front dos Sites. 

Os que mais utilizo são o Wordpress e o Joomla. Particularmente acho o Joomla mais Profissional, sua interface Administrativa é bem mais intuitiva e a nível de UI mais bem elaborada que o Wordpress que possui um painel de controle confuso e plugins que se comportam da forma mais diferente possível. 

Em compensação de um tempo pra cá o Joomla tem se tornado uma ferramenta mais difícil de se trabalhar, encontrar bons plugins gratuitos e extensões que não exijam um nível maior de conhecimento para se desenvolver com ele. Isso é, tem se tornado uma ferramenta mais chata de se desenvolver. Ainda prefiro ele, mesmo com as dificuldades que ando observando pelos motivos ditos anteriormente. 

No entanto, o Wordpress se difundiu muito mais entre os leigos e a internet, as pessoas preferem ele pois tem mais plugins, mais templates e mais opções. Como as pessoas comuns não ficam fazendo nada além de geralmente fazer posts, então o Wordpress é o líder do Segmento. Ele também é mais fácil de se Desenvolver, possui estrutura fragmentada (ou particionada) e além de milhares de materiais na internet de consulta, é o campeão de gente comum, não desenvolvedor. 

Se você é como eu e odeia ter de ficar pegando templates para Wordpress na Internet e ficar horas tentando entender como ele funciona e desvendando como alterar o template para se adequar aos desejos de seus clientes e geralmente ou prefere recorrer aos "builders" de Wordpress ou Frameworks para criar seus templates do zero, ou ainda ficar bastante tempo criando na mão mesmo existe uma ferramenta na internet muito boa que pode lhe ser uma "mão na roda" na hora de iniciar um novo projeto WP. E ele se chama Underscores (http://underscores.me/).

Basicamente, o que ele faz é criar uma estrutura em branco de template para Wordpress, você entra no Site, digita o nome do template (ou do projeto) para dar um nome ao template e faz o download dele clicando no botão ao lado do campo que digitou o nome (generate).

Depois é instalar normalmente no seu Wordpress como um template qualquer. Ele vem em branco. Analisando a estrutura dele você vai ver que ele é bem comum, fácil de entender sua estrutura dando bastante liberdade e com alguns layouts já criados dentro dele referentes a posicionamento de menu entre outros (sidebar, footer, search, error404, etc). Vale bastante à pena fuçar nem que seja pra conhecer ou estudar como ele funciona, sempre acrescenta.

Ele também vem com uma estrutura básica de css e html que você pode implementar o framework que desejar como bootstrap ou material design ou outra desejada...ele já vem com o mínimo para que você possa detectar o que vai aonde. 
Vai lá e confere, vale à pena.









domingo, 3 de abril de 2016

ScreenFetch – Seu terminal Linux incrementado com Logo da Distro


Depois de ficar bastante tempo sem escrever nada porque ferreiro de casa, espeto de pau. Principalmente na nossa área pra quem trabalha com Tecnologia é complicado ter tempo pra ficar dedicando a alimentar Blog, atualizar o próprio site, estas coisas…afinal estamos sempre com clientes pra atender, trabalhos pra fazer, estudo pra por em dia, compromissos acadêmicos e outros que acabam com nosso tempo, resolvi escrever esse post que é pequeno mas pra quem, como eu,  curte incrementar suas distros linux (e tudo que tem dentro delas) pode ser bem legal.  Mas chega de papo furado…
Quem usa muito o terminal do Linux e tá a fim de dar uma cara legal nela e ainda de plus ter as informações do sistema com facilidade existe um pequeno (pequeno mesmo) aplicativo pra Bash que se chama ScreenFecth. Ele faz basicamente é informar pra você via terminal as informações do seu sistema e coloca a logo que representa sua distro desenhada em ASCII no seu terminal.
Tem muito artigo ensinando a instalar via linha de comando mas muitos são chatos e complicados pra quem não é usuário avançado do Linux. Então resolvi fazer este post ensinando de forma muito fácil, usando um arquivo “.DEB” atualizado sempre na última versão a instalar baixando ele direto do PPA atualizado e instalando via instalador gráfico do Ubuntu ( ou distros baseadas nele).
Primeiro passo, é baixar a versão do ScreenFetch atualizada no link PPA dele, o arquivo .DEB. Para isso entre no link abaixo:
OBS: Lembrando que são pras distros Ubuntu incluindo ele mesmo. Eu particularmente gosto mais do pacote criado pela “vivid” pois é um pacote para sistemas 64 bits enquanto o “Trusty” e o “precise” usam pacotes 32bits, então se sua distro for 64 bits baixe o “Vivid” que é a primeira opção de download.
Baixe o pacote “.deb” para o seu micro e depois simplesmente clique nele pra começar a fazer a instalação direto pelo instalador de programas visual do seu Linux.
Uma vez instalado, abra seu terminal e digite “screenfetch” para executar o programa e ele mostrar na tela do seu terminal a imagem com os dados da sua distro.

No meu caso estou usando no meu Notebook mais antigo a distro Mint então a logo que aparece é a dele, se o seu for Ubuntu por exemplo, vai aparecer a logo do Ubuntu, sempre a referente a sua distro, isso é automático. Também irá aparecer os dados do seu micro e do S.O e estas informações são sempre úteis.
Existem vários outros comandos mostrando estas informações em outros formatos (screenfetch -v, screenfetch -e, screenfetch -V, screenfetch -n, etc…) Para ver todas as variações digite “screenfetch -h”.
Depois disso fica a pergunta quase sempre que é “Como eu faço pra colocar default no meu terminal toda vez que eu abrir ele para que mostre o screenfetch com a logo?”
Isso é fácil (de certa forma é…). Basta você ir no seu arquivo de configuração do terminal, o arquivo “.bashrc” no seu diretório home e editar ele, pode ser até mesmo no gedit por exemplo e adicionar (colar) na última linha o seguinte comando:
if [ -f /usr/bin/screenfetch ]; then screenfetch; fi
Salve seu arquivo editado e reinicie seu terminal e quando abrir novamente voalá…ele executará toda vez que abrí-lo.
Para facilitar, caso desejem segue ai em anexo meu próprio arquivo .bashrc para download, dai é só salvar (não se esquece de fazer backup do seu caso não goste do visual do meu) na sua pasta home do linux. CLIQUE AQUI
Espero que tenham gostado…Dúvida é só colocar nos comentários que SEMPRE respondo.

Abraços.


sexta-feira, 10 de julho de 2015

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.