sábado, 23 de agosto de 2014

Como Colocar novos temas no WebStorm, o melhor editor de Textos JavaScript (e na minha opinião Angular JS) do mundo.

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 :)






















4 comentários:

  1. Oi João.
    Então. Que eu saiba não tem em português mas acho que pode conseguir baixar um pacote pra ele na nossa língua atualmente.

    Particularmente falando não acho boa ideia. As traduções não costumam ser boas e inglês e a língua da maior parte da bibliografia e tutoriais do editor de forma que tem de ficar traduzindo pra conseguir seguir os passos dos tutos.

    Tambem tem o fato de na nossa área tudo ser em inglês entao quanto mais acostumado melhor.

    Fazendo uma pesquisa rápida encontrei a resposta no phpstorm que deve ser igual no webstorm.
    https://br.answers.yahoo.com/question/index?qid=20161114202132AAE16e1&guccounter=1

    Se pesquisar no Google deve achar hoje em dia. Lembrando que atualmente a ferramenta evoluiu muito. Hoje tb tem o InteliJ que é a IDE completa.

    QQ coisa fala comigo que ajudo.
    Grande abraço!

    ResponderExcluir