




O nome dado ao Editor foi ATOM (https://atom.io/). E o que começou se baseando no Famoso e consagrado Sublime Text, hoje possui identidade própria, pegando as melhores idéias do ST3 e adicionando características ainda melhores e mais bem boladas e hoje pelo menos comigo já concorre empatado com minha produtividade e uso diário em desenvolvimento.
Além de estar tão eficiente (ou mais) que o Sublime Text, o ATOM é completamente gratuito, com plugins e extensões atualizadas diariamente e a possibilidade de ser completamente personalizável pelo usuário.
O Editor que inicialmente possuia versões apenas para Mac, posteriormente criou versões para Linux e finalmente para Windows.
Sou usuário Windows e o Atom roda excelentemente em minha máquina(s). Hoje na versão 0.208.0 ele possui uma interface com identidade própria e muito agradável de se trabalhar no melhor estilo FLAT UI.
Instale a versão Zipada no Windows, “Atom.zip”:
Mesmo já existindo uma versão Windows do Atom, não aconselho a instalar a mesma. O melhor mesmo é você baixar o arquivo zipado do atom e descompactar na raiz do seu computador. Não se preocupe, toda vez que sai uma versão nova ele avisa e você vai lá e baixa de novo e descompacta novamente na raiz do seu PC.
A instalação usando o instalador automático no windows cria muita sujeira no seu PC, deixando versões anteriores instaladas e deixando a pasta do programa enorme sem necessidade. O Arquivo ZIP permite uma instalação limpa sem coisas desnecessárias, seu micro agradece.
O Editor possui uma excelente performance editando JavaScript, e não perde em nada também com CSS, HTML e outras linguagens. A única linguagem que na minha opinião ainda pode ficar melhor é o PHP mas já tá muito bom na versão atual. O tema do editor é excelente, uma conjugação de cores muito boa, dá pra trabalhar horas sem irritar a vista e você acha os trechos de código desejados muito facilmente.
Ele possui o mesmo sistema de navegação de arquivos e de execução de comandos do Sublime Text, usando as teclas CTRL+SHIFT+P ( mesmas teclas proporcionais nos outros SO´s) e digite ou pesquise todos os comandos do editor em questão.
Com o comando CTRL+P, você navega em todos os arquivos do projeto. Para busca de arquivos, o conhecido CTRL+F e CTRL+ALT+F para busca e substituição na pasta do projeto é similar a todos os outros editores.
FACILIDADE NA GERENCIAMENTO DO ATOM…
Ao contrário do Sublime Text, o Atom possui uma interface para as configurações básicas, como escolher a fonte do editor, instalar e atualizar plugins e extensões assim como gerenciar as opções das mesmas. Bastando ir no menu superior ( File > Settings) para que a página se abra no campo do editor. Com ela você pode instalar novas extensões procurando-as pelo nome ou nome que sugira a função desejada na extensão. Também pode definir em settings o tamanho e nome da fonte do editor desejada. Também é possível verificar extensões que necessitem de atualização bem como o sistema.
Você também poderá mudar o tema tanto da aparência do programa quando do editor especificamente falando, as cores das letras do codificador. Você consegue fazer tudo isso apenas clicando em botões e com isso eles fizeram um baita melhoramento para aqueles que não manjam de codificação como no caso do sublime text.
O Atom também permite total personalização de sua interface entre outros itens do editor. Agora entramos um pouco no mundo dos códigos, então se você não quer saber disso pode parar a leitura. Mas não desista lhe aconselho porque é bem fácil.
Ele no menu File > …. possui várias opções onde você poderá personalizar o navegador.
Open your config – permite que você determine parâmetros ou critérios de funcionamento dos elementos, plugins e comportamentos do editor.
Open your Keymap – permite que você crie comandos de teclado para os plugins e extensões do editor ou mudar as existente para outras conjugações que sejam do seu agrado.
Open Your Snippets – permite que você crie Snippett personalizado para seu editor, existem um texto comentado explicando como se faz um Snippet e você não precisa saber programar pra poder fazer atalhos que lhe ajudem a inserir trilhas de códigos desejadas ou outros.
Open Your Stylesheet – permite que você edite o arquivo css que contém a personalização do editor, alterando cores, fontes e tudo mais do editor, você pode personalizar tudo nele, muito legal.
Se não sabe o que personalizar ou o nome você pode usar o inspetor igual o existente no google crome e inspecionar os locais desejados do editor pra poder saber quais são as classes que quer mudar. Indo em View > Developper > Toggle Dev Tools (veja imagem abaixo)
Você habilita o inspetor e analisa tudo dentro do editor.
Existem muitas versões ou falando corretamente distribuições do Linux no mercado. Devido a esta grande variedade é muito comum as pessoas não saberem qual é a melhor para o seu caso ou para seu computador ou notebook. Se você for pesquisar na internet verá que existem horas infinitas de discussões sobre o assunto em sites, blogs e fóruns. É gigantesca a quantidade de material pra leitura no assunto, sempre recheada de opiniões pessoais e tendenciosas pois quem gosta de uma determinada distribuição na maior parte dos casos defende fervorosamente a mesma de forma que no final sempre fica a dúvida.
Eu por exemplo gosto bastante do Ubuntu, mas existe muitas outras e pra você não ficar na dúvida existe um site com um questionário bastante imparcial que com meia dúzia de perguntas lhe ajuda a escolher a melhor distribuição para o seu caso. Com isso você não fica perdendo tempo procurando por ai esta informação preciosa na hora de decidir usar o linux em seu computador.
Não precisa ter conhecimento técnico nenhum para responder o questionário que nem sequer vai pedir a configuração de seu micro. Basta acessar o link abaixo e responder as perguntas e escolher a desejada, muito simples.
http://www.zegeniestudios.net/ldc/
Até a próxima! 🙂
Quando estamos trabalhando com uma arvore de projetos em nossos editores de código onde os arquivos possuem ramificação muito extensas
ferramentas e plugins que produzem a função “Reveal in the Sidebar” ou traduzindo toscamente ” mostrar este arquivo na barra lateral”
é extremamente útil de forma a não termos de ficar localizando o arquivo em questão na estrutura de pastas da Sidebar geralmente localizada do lado
direito da maior parte dos IDE´s de desenvolvimento que temos hoje.
Os únicos IDE´s que possuem essa função default que me lembro são o Eclipse e o WebStorm. Mas neste post vou mostrar uma solução para o Sublime Text que
fará com que você usufrua desta facilidade.
O Sublime text desde sua versão 2 já possui essa função nativa mas não de forma automática, você precisa clicar com o botão direito com o arquivo em questão aberto
em sua área de edição e clicar no opção “Reveal in the Sidebar” e ele lhe mostrará (imagem abaixo).
Outra solução mas pra quem gosta de códigos, é ir em “Preferênces -> Key Bindins – User” e inserir o seguinte código abaixo:
[
{ “keys”: [“ctrl+shift+r”], “command”: “reveal_in_side_bar”}
]
Com este código, ao clicar a as teclas conjugadas CTRL+SHIFT+R você habilita esta função, podendo ver o arquivo em questão sendo destacado
na Sidebar.
Mas a solução que eu mais gostei mesmo foi um plugin. Na verdade existem dois que vou deixar o URL aqui mas o que mais gostei sem sombra de dúvidas foi o
SyncedSideBar (https://sublime.wbond.net/packages/SyncedSideBar)
Com ele sem compplicação nenhuma tudo funciona de forma automática como default, instalou e ele começa a funcionar imediatamente sem necessidade de
reiniciar nem ficar fazendo nenhuma configuração e funciona maravilhosamente bem e muito rápidamente. Esse é o meu predileto que indico.
O Segundo que nem cheguei a testar mas sei que precisa ativar é o Focus File on Sidebar (https://sublime.wbond.net/packages/Focus%20File%20on%20Sidebar)
Mas ai você tem de instalar pra testar você mesmo.
Lembrando que pra instalar qualquer um dos dois basta no Editor Sublime Text, digitar as teclas CTRL+SHIFT+P e digitar “Install”
Quando a caixa de texto abrir na parte supoerior digite “SyncedSideBar” e ele aparecendo na primeira opção clique nele e se instalará sozinho.
Obviamente você tem de ter o PackageControl no seu sublime text, sem ele nenhum plugin vai ser instalado. Não sabe o que é? Então neste caso deixo por sua conta
estudar um pouco sobre o editor pois vale à pena e vou estar lhe prestando um serviço melhor do que lhe dando tudo de bandeja…Vale à pena conhecer esse IDE que
na minha opinião é o melhor que existe (sem competir com o Eclipse e Netbeans é claro).
A pouco tempo comecei a me dedicar mais no estudo da Linguagem do Java Script. Tudo por causa do Angular JS, novo Framework criado por dois funcionários do Google Misko Hevery e Adams Abrons que em 2009 durante 3 semanas e com 1500 linhas de código, conseguiram perder uma aposta com seu chefe que conseguiriam em 2 semanas (grande derrota heim, o que uma semana a mais não faz, rsrsr) conseguiu transformar o JS em uma ferramenta que com certeza está revolucionando o uso do Java Script no mercado e no mundo de TI. Hoje o projeto é mantido pelo Google e como (quase) tudo que o Google põe a mão tá decolando. Mas depois desta curiosidade vamos ao que interessa….
Bom, desde que comecei sempre ouvi falar do WebStorm pra lá e pra cá..Pesquisando descobri que ele é de longe cotado como o melhor IDE JS do mundo. Como estou fazendo um Curso de Angular JS com o Rodrigo Branas, um fera da área e ele mesmo usava, resolvi dar uma chance pra ele e conhecer, deixando os amados Sublime Text e Brackets Sprint de lado. E não é que a ferramenta é boa mesmo!
Usando ele por dois dias achei muito boa as suas funcionalidades pra JS e ele possui integração nativa com o Angular que estão me deixando “de queixo caído”, facilitando e viciando minha iniciação no AngularJS. Não deu outro, com uma semana lá fui eu desembolsando uma grana pra comprar sua última versão que neste momento está na 8.4. Você pode visitar o Site pra conhecer (http://www.jetbrains.com/webstorm/).
Na documentação oficial não encontrei sobre isso, então fui atrás das não oficiais. Pesquisando fontes alternativas descobri temas para o PHPWebStorm que contém arquivos “.JAR” para download.
http://ideacolorthemes.org/themes/
Depois de escolher o Tema do Sublime Text 3 eu baixei e descompactei o arquivo JAR de forma que criou pastas e dentro da pasta “colors” eu encontrei o esquema de cores do tema no formato .XML e joguei dentro da mesma pasta do meu perfil de usuário (no Windows) com o mesmo nome e ai dentro do WebStorm consegui escolher o esquema de cores dele. Deixo abaixo o passo a passo pra você poder fazer o mesmo.
1-Baixe o tema desejado do link:
http://ideacolorthemes.org/themes/
http://ideacolorthemes.org/home/
2-Depois descompacte o arquivo “.JAR” pois este arquivo é para o Webstorm PHP.
Dentro da pasta criada pega o arquivo .”XML” dentro da pasta “colors”
3-Vá para o seu perfil de usuário do windows e cole o arquivo “.XML” em questão dentro da pasta:
C:\Users\USUARIO\.WebStorm8\config\colors
Depois faça a busca dentro do seu WebStorm de duas formas:
A) File > Settings > Editor > Colors & Font
B)Clicando CTRL+SHIFT+A e digite “Colors & Font” para lhe mostrar esta opção.
Escolha o tema desejado que colou na pasta.
Para deixar a janela do programa escura, indico o tema Darcula, nativo do programa e a interface escolhida pra trabalhar indico a do Microsoft Visual Studio que é muito bonita. Ai ele fica igual abaixo:
Caixa de pesquisa:
Você pode acessar várias funcionalidades que deseja, usando as teclas de atalho pra abrir a caixa de diálogo de pesquisa (parecida com o Sublime Text). No Windows, use as teclas CTRL+SHIFT+A para abrir a caixa de diálogo. Digite o que busca no programa como “colors” por exemplo ou “font” e ele lhe mostrará as opções variadas para aquele item. Ele é bem fácil e intuitivo pra usar.
Teclas de atalho:
Você pode criar seus próprios atalhos para as coisas. Por exemplo para mudar o tamanho da fonte que acho bem pequena a default, basta que usando as teclas de atalho para a caixa de pesquisa digite “keymap”. Ele vai lhe mostrar as opções para personalisar as teclas de atalho…Eu por exemplo criei a tecla de atalho “SHIFT+” para aumentar a fonte sem conflitos e “SHIFT-” para diminuir. Os Keymaps podem ser de grande ajuda.
Minimap:
Para quem como eu já tá acostumado com o Minimap do lado direito como no Sublime Text ou ATOM ou Brackets também tem como instalar ele no WebStorm. Para isso basta ir no instalador de plugins do programa, isso mesmo ele tem um. Ao invés de usar as teclas de atalho dessa vez indico o caminho padrão que é
File -> Setting
na caixa de diálogo, digite na pesquisa “plugins”, na parte de baixo da janela clique em “Browse repositories”
o nome do plugin é “Code Glance”. Depois de instalar reinicie e pronto está do lado direito como na imagem acima.
Conclusão.
Ainda estou fuçando mas ainda tem muito que descobrir do programa. Uma coisa com certeza posso afirmar que ele leva o título com louvor, merecido. Não coloco mais coisas pois ainda tem muito que fuçar. Deixo aqui dois links com dicas muito boas sobre ele, tudo em video.
https://laracasts.com/series/how-to-be-awesome-in-phpstorm/episodes/24
Espero que tenham gostado 🙂
A pouco tempo comecei a me dedicar mais no estudo da Linguagem do Java Script. Tudo por causa do Angular JS, novo Framework criado por dois funcionários do Google Misko Hevery e Adams Abrons que em 2009 durante 3 semanas e com 1500 linhas de código, conseguiram perder uma aposta com seu chefe que conseguiriam em 2 semanas (grande derrota heim, o que uma semana a mais não faz, rsrsr) conseguiu transformar o JS em uma ferramenta que com certeza está revolucionando o uso do Java Script no mercado e no mundo de TI. Hoje o projeto é mantido pelo Google e como (quase) tudo que o Google põe a mão tá decolando. Mas depois desta curiosidade vamos ao que interessa….
Bom, desde que comecei sempre ouvi falar do WebStorm pra lá e pra cá..Pesquisando descobri que ele é de longe cotado como o melhor IDE JS do mundo. Como estou fazendo um Curso de Angular JS com o Rodrigo Branas, um fera da área e ele mesmo usava, resolvi dar uma chance pra ele e conhecer, deixando os amados Sublime Text e Brackets Sprint de lado. E não é que a ferramenta é boa mesmo!
Usando ele por dois dias achei muito boa as suas funcionalidades pra JS e ele possui integração nativa com o Angular que estão me deixando “de queixo caído”, facilitando e viciando minha iniciação no AngularJS. Não deu outro, com uma semana lá fui eu desembolsando uma grana pra comprar sua última versão que neste momento está na 8.4. Você pode visitar o Site pra conhecer (http://www.jetbrains.com/webstorm/).
Na documentação oficial não encontrei sobre isso, então fui atrás das não oficiais. Pesquisando fontes alternativas descobri temas para o PHPWebStorm que contém arquivos “.JAR” para download.
http://ideacolorthemes.org/themes/
Depois de escolher o Tema do Sublime Text 3 eu baixei e descompactei o arquivo JAR de forma que criou pastas e dentro da pasta “colors” eu encontrei o esquema de cores do tema no formato .XML e joguei dentro da mesma pasta do meu perfil de usuário (no Windows) com o mesmo nome e ai dentro do WebStorm consegui escolher o esquema de cores dele. Deixo abaixo o passo a passo pra você poder fazer o mesmo.
1-Baixe o tema desejado do link:
http://ideacolorthemes.org/themes/
http://ideacolorthemes.org/home/
2-Depois descompacte o arquivo “.JAR” pois este arquivo é para o Webstorm PHP.
Dentro da pasta criada pega o arquivo .”XML” dentro da pasta “colors”
3-Vá para o seu perfil de usuário do windows e cole o arquivo “.XML” em questão dentro da pasta:
C:\Users\USUARIO\.WebStorm8\config\colors
Depois faça a busca dentro do seu WebStorm de duas formas:
A) File > Settings > Editor > Colors & Font
B)Clicando CTRL+SHIFT+A e digite “Colors & Font” para lhe mostrar esta opção.
Escolha o tema desejado que colou na pasta.
Para deixar a janela do programa escura, indico o tema Darcula, nativo do programa e a interface escolhida pra trabalhar indico a do Microsoft Visual Studio que é muito bonita. Ai ele fica igual abaixo:
Outras dicas:
Caixa de pesquisa:
Você pode acessar várias funcionalidades que deseja, usando as teclas de atalho pra abrir a caixa de diálogo de pesquisa (parecida com o Sublime Text). No Windows, use as teclas CTRL+SHIFT+A para abrir a caixa de diálogo. Digite o que busca no programa como “colors” por exemplo ou “font” e ele lhe mostrará as opções variadas para aquele item. Ele é bem fácil e intuitivo pra usar.
Teclas de atalho:
Você pode criar seus próprios atalhos para as coisas. Por exemplo para mudar o tamanho da fonte que acho bem pequena a default, basta que usando as teclas de atalho para a caixa de pesquisa digite “keymap”. Ele vai lhe mostrar as opções para personalisar as teclas de atalho…Eu por exemplo criei a tecla de atalho “SHIFT+” para aumentar a fonte sem conflitos e “SHIFT-” para diminuir. Os Keymaps podem ser de grande ajuda.
Minimap:
Para quem como eu já tá acostumado com o Minimap do lado direito como no Sublime Text ou ATOM ou Brackets também tem como instalar ele no WebStorm. Para isso basta ir no instalador de plugins do programa, isso mesmo ele tem um. Ao invés de usar as teclas de atalho dessa vez indico o caminho padrão que é
File -> Setting
na caixa de diálogo, digite na pesquisa “plugins”, na parte de baixo da janela clique em “Browse repositories”
o nome do plugin é “Code Glance”. Depois de instalar reinicie e pronto está do lado direito como na imagem acima.
Conclusão.
Ainda estou fuçando mas ainda tem muito que descobrir do programa. Uma coisa com certeza posso afirmar que ele leva o título com louvor, merecido. Não coloco mais coisas pois ainda tem muito que fuçar. Deixo aqui dois links com dicas muito boas sobre ele, tudo em video.
https://www.youtube.com/watch?v=xIxDar8CbJA&index=8&list=PLQ176FUIyIUb0zTe7k4ZKkhMsR-slKu3w
https://laracasts.com/series/how-to-be-awesome-in-phpstorm/episodes/24
Espero que tenham gostado 🙂
É um post bem pequeno mas pode ser de grande ajuda porque pode-se perder bastante tempo a procura desta funcionalidade. Para ativar o Auto-completar do Eclipse faça o seguinte:
1 – No menu superior escolha – “Window -> Preferences”
2 – Na janela que se abre navegue no menu do lado esquerdo pelo caminho:
Java -> Editor -> Content Assist -> Advanced
Aconselho marcar todas as opções tanto na caixa superior quanto na inferior. Menos a opção “Word proposals”.
Pronto, o auto-completar está ativado. Veja imagem abaixo para tirar a dúvida.
A maior parte dos desenvolvedores Front-End como eu adora um Editor de códigos pouco conhecido entre os desenvolvedores convencionais (que adoram o Eclipse), chamado Sublime Text (http://www.sublimetext.com/). Realmente ele é fantástico. Possui ferramentas muito boas a práticas, um Design fenomenal, toda uma gama de plugins, e personalizações possíveis além de aceitar todos os tipos de códigos e linguagens. É um IDE de primeira pode se dizer.
No entanto, no meu dia a dia um outro Software muito bom tem cada vez ganhando mais espaço na minha produtividade e a cada dia está chegando mais perto do Sublime Text. Em sua versão 39 (no momento deste post) o Brackets Sprint possui funcionalidades default em sua versão que são extremamente úteis e algumas delas nem sequer existem no Sublime text com plugins. Com isso a cada dia mais o Brackets Sprint está acolhendo mais e mais seguidores, usuários satisfeitos e fazendo com que mais e mais pessoas participem do crescimento deste programa criando cada dia mais plugins e extensões. No momento deste post o Brackets Sprint já possui extensões suficientes para se igualar ao Sublime Text e o que é melhor, completamente Gratuito, sem registros nem nada do gênero para usar sem pagar.
Sua interface apesar de não ter um acabamento retina como do Sublime Text também é bastante bonita e permite todo tipo de personalização que não deixa a desejar em relação ao Sublime text. Ele também é mais leve que o Sublime text e possui a mesma estrutura de barra de funcionalidades.
Como funcionalidades padrões além das mais comuns que encontramos em todos os outros editores mais conhecidos como o Sublime Text, Dreamweaver, etc, como destaque para abertura e fechamentos de tags, redução de código por clique, alteração de conjunto de mesmas propriedades, tematização da área de edição o Brackets Sprint possui como funcionalidade padrão o Auto apontamento de caminho onde você vai digitando o URL de um arquivo desejado como uma imagem ou icone ou outro itens e ele vai lhe mostrando os arquivos contidos naquela pasta ou caminho para mais fácil seleção…
Outra característica muito legal por padrão é que ele mostra as cores referente ao código CSS cujo foi criado. Ao colocar o mouse sobre a cor em questão o Brackets mostra um tooltip com a cor referente aquele código, seja Hexa, RGA, RGB, etc.
O mesmo acontece com uma imagem. Ao colocar-se o mouse sobre o nome da imagem no caminho URL de um código CSS ou HTML ou outro qualquer como JavaScript por exemplo um tooltip com a imagem é mostrado para que saiba que imagem é essa referida no nome.
Com uma farta biblioteca de extensões a ser utilizada basta clicar na peça igual ao de lego na barra lateral direita para que se abra uma janela de busca para estas extensões bastando procurar pelo nome delas de forma intuitiva e clicar a instalar e pronto, é só usar clicando no Menu Superior Editar…elas vão se acumulando no final da mesma.
Para que o navegador abra a página que deseja dentro do editor, basta clicar no icone de raio logo acima da de extensões e a mesma se abrirá no seu navegador padrão.
Para quem não gosta da fonte default do programa ai vai uma dica, fuçando no funcionamento do Brackets, descobri uma forma de mudar a mesma. Eu por exemplo, gosto da fonte do Eclipse, a Consolas. Para aplicar a mesma eu editei o arquivo “brackets.min.css”
Dentro da pasta (windows 8.1 x64):
C:\Program Files (x86)\Brackets\www\styles
Abrindo este arquivo em um editor como o Notepad++ como administrador, você deve aplicar a formatação para melhor visualização dos códigos CSS. Procure pela classe “CodeMirror”. Nela é apontado a fonte do editor, cor, e espaçamento da mesma. O código é esse abaixo…
Nele você deve substituir a fonta padrão “SourceCodePro” pela que deseja. Como está na imagem acima.
Poucas linhas acima você vai encontrar a declaração @font-face da fonte padrão. Copie e cole no final da última destas e altere para sua fonte.
Uma vez feito isso, salve o arquivo e o feche. Crie a pasta com o arquivo de sua fonte escolhida dentro para a pasta “C:\Program Files (x86)\Brackets\www\styles\fonts”
Reinicie o Brackets e pronto. Veja como ele está usando sua fonte no editor.
Não perca mais tempo com este tutorial, vai lá conhecer o Editor…O site é..