alphaDev - Copyright (c) 2016 - Todos os direitos reservados.

# plugins

Atom – Meus plugins favoritos [atualizado]
Atom - Meus plugins favoritos

Olá pessoal. Estive afastado do mundo do desenvolvimento durante um longo tempo por ter dedicado minha vida profissional nos últimos anos ao mundo acadêmico. Mas como a vida nos dá oportunidades de resgatarmos nossas origens, por motivos outros optei por voltar a desenvolver, coisa que sempre amei. Na busca do que seria o ambiente ideal (pelo menos para mim), uma das minhas pesquisas sobre as tecnologias atuais, acabei criando uma "listinha" do que devo estudar e me atualizar. Dentre todas elas, destaco algumas abaixo: Ionic PHP + Laravel Python RoR Angular Bootstrap NodeJS Java PhoneGap E antes que vocês me crucifiquem, sei que existem dezenas de outras tecnologias para conhecer. Mas, convenhamos que não é possível abraçar o mundo não é?? Atualmente estou estudando Ionic e tive que escolher um editor de códigos que seja dinâmico, customizável, flexível e de preferência gratuito :) Já conhecia o Sublime Text, que por si só, já adianto que é um excelente editor. Mas como sou um geminiano de carteirinha, sempre estou disponível a dar oportunidades aos outros editores. Na minha busca pelo mundão da internet encontrei algumas opções bem interessantes. São elas: Atom Vim Eclipse Netbeans Visual Studio Code Brackets Alguns deste editores/IDEs são de uso bem específicos e voltados para uma ou mais linguagens. Como é o caso do Eclipse e do Netbeans. Mas como o meu objetivo é estudar novos ambientes, pelo menos novos para mim, optei em instalar o Atom e ver como é o comportamento dele. Chegamos então ao objetivo principal deste post. Falar sobre o Atom, minhas primeiras impressões e relatar a vocês os principais temas e plugins que instalei neste editor. Vamos lá então. Instalação Como de praxe, a instalação do Atom no meu computador é muito simples. Pois como utilizo um MacBook Pro para meus trabalhos, basta acessar o site do Atom, clicar no botão de download e esperar o término. A instalação em sí, é muito trivial, basta clicar em cima do pacote para que seja descompactado o programa. Como resultado deste processo, teremos o arquivo Atom.app. É assim que os programas são chamados no Mac (extensão .app). Depois é só arrastar o Atom.app para a pasta Aplicativos e pronto. Tudo instalado e pronto para uso. Primeiras impressões Ao executar o Atom pela primeira vez, achei muito parecido com o Sublime Text. Foi um carregamento rápido e sem nenhum problema. O Atom, está basicamente dividido em 4 partes, descritas sucintamente a seguir: O menu fica na parte superior da tela onde teremos acesso a todos os comandos do editor. No lado esquerdo podemos observar o painel com a estrutura de arquivos e diretórios do projeto que você está trabalhando. Na parte inferior, vamos encontrar a barra de status com várias informações interessantes. E na parte central, que é a principal parte fica então a área de edição, onde logicamente aparecem os códigos dos seus programas. Sem novidades não é!!!! OBS: Vocês vão observar que do lado direito da tela está aparecendo o minimap. Ele não vem como padrão no Atom. Mas explicarei como instalar este recurso logo abaixo na seção de plugins. Configuração A janela de configuração do editor pode ser acessada através do clicando-se no nome do aplicativo na barra de menus e depois escolhendo-se a opção Preferences. Ao fazer isto, uma janela chamada Settings será aberta com as seguintes opções: Na opção Settings você encontrará as principais configurações do editor. Aqui vale comentar o que eu modifiquei para o meu gosto. Project Home - Aqui defino o local onde coloco meus projetos. Font Family - Posso escolher qual fonte será utilizada no editor de códigos. A minha escolha é pela fonte DejaVu Sans Mono. Font Size - Aqui você define o tamanho da fonte. Gosto de letras grandes :) Line Height - Nesta opção você pode definir a distância entre as linhas no editor de código. No meu caso, optei em deixar com o valor de 1.2. Show Indent Guide - Mostra os indicadores de indentação no editor de código. Show Invisibles - Mostra os caracteres invisíveis. Show Line Numbers - Mostra a numeração de linhas no editor. Zoom Font When Ctrl Scrolling - Esta opção permite que você altere o tamanho da fonte no editor quando utiliza o botão de Scrolling do mouse e a tecla Ctrl ao mesmo tempo. Obviamente nesta tela existem outras opções que vocês podem alterar, então é o caso de se verificar quais outras alterações cada um quer fazer. A opção Keybindings descreve todas as teclas de atalhos que já estão configuradas. Eu particularmente não altero nada nela. Mas vale a pena dar uma olhada para vocês conhecerem as teclas de atalhos e assim aumentar sua produtividade de trabalho. Na opção Packages vocês encontrarão a lista de todos os plugins que estão instalados no Atom. Aqui vale alguns comentários. Vocês verão que nesta tela os pacotes estão divididos em quatro áreas,destas explico abaixo as duas mais importantes: Community Packages - Neste grupo estão descritos os plugins que vocês instalam a mais no Atom para melhorar o desempenho com novas funcionalidades. Core Packages - Neste grupo estão relacionados os pacotes de plugins que já vem instalados no Atom por default. Nos dois casos podemos atuar modificando algumas funcionalidades dos plugins. A imagem abaixo demostra o que podemos fazer. A opção Settings permite que você faça ajustes e personalizações no plugin. A opção Uninstall permite que você desinstale o plugin. A opção Disable, faz com que o plugin seja desabilitado. Além estes botões de ações, podemos observar que a tela mostra outras informações interessantes como por exemplo: O nome do plugin - Nesta imagem representada por atom-css-comb. Na verdade, este ponto é um link que ao ser clicado nele, vocês serão redirecionados para a página do projeto do plugin, onde encontrarão muitas outras informações a respeito. Vale muito a pena a visita. A versão do plugin. A quantidade de downloads. A descrição do plugin. O nome do autor. Na opção Themes vocês poderão fazer duas coisas distintas: Definir o tema que quer utilizar Ter a relação dos temas instalados e poder modificar alguns parâmetros dos mesmos, além de poder também desinstala-los. Você poderá perceber que esta área também está dividida em Community Themes - que são os temas que você instalou a mais e os Core Themes - que são os temas que já vem pré-instalados. A opção Updates contém uma forma fácil para verificar se existem plugins e temas mais novos e assim fazer as suas respectivas atualizações. Por último, temos a opção Install. É nesta opção que a brincadeira acontece, pois aqui poderemos instalar novos plugins e temas no Atom. A imagem abaixo, você encontrará o campo que deve ser utilizado para localizar um novo plugin ou tema que você deseja instalar. Digite o nome do plugin ou do tema no campo e clique em um dos botões, Packages para escolher um plugin ou Themes para temas. Feito isto, você terá a relação de plugins localizados. Basta escolher o que lhe interessa e clicar no botão Install para que o próprio Atom faça o download e instalação de forma automática. A área Featured Packages que aparece como default da janela é a lista dos plugins mais procurados pelos usuário do Atom. Temas Quando se fala de temas de um determinado ambiente de desenvolvimento, estamos falando de algo pessoal. E cada um tem os seus preferidos. Pensando nisto, não vou debater esta questão para não polemizar. Apenas vou relacionar os temas que tenho instalado no meu Atom e deixar os links para que cada um possa acessar as páginas dos autores e assim cada um escolhe os que melhor lhes agradar. atom-material-syntax atom-material-ui gruvbox-plus-syntax monokai seti-ui Plugins Assim como nos temas, os plugins também é uma questão de gosto pessoal e de necessidade profissional, o qual está na maioria das vezes relacionado com as tecnologias e linguagens que vocês trabalharão. Deixarei a lista dos plugins que tenho instalado no meu Atom com suas respectivas descrições e também os links das páginas dos mesmos. Vamos lá então. atom-ccs-comb - Utilizado para formatar o código CSS (LESS|SASS|SCSS). atom-typescript - Este plugin é para aqueles desenvolvedores JavaScript que vão trabalhar com arquivos .ts. Entre as funções estão: Autocomplete; Análise de erros em tempo real; Informações no momento da digitação do código; entre outras. auto-update-packages - Utilizado para manter os pacotes de plugins atualizados. autocomplete-modules - Faz o autocomplete quando estamos escrevendo as instruções require e import. color-picker- Mostra uma determinada cor quando clicamos com Cmd-Shift-C (Mac) ou Ctrl-Shift-C (Win/Linux). Muito útil para código CSS. docblockbr - Este plugin ajuda muito na geração de documentação do seu código. file-icons - Altera os icones que aparecem na janela a esquerda do Atom. Deixa muito mais bonito e facilita a identificação visual dos tipos de arquivos de um projeto. git-plus - Permite interagir com o GitHub sem precisar utilizar o terminal de comandos. highlight-selected - Seleciona todas as palavras iguais quando damos um clique duplo sobre uma palavra. Muito útil quando precisamos rapidamente alterar vários trechos iguais no código. javascript-snippets - Completa com trechos de códigos (snippets) de JavaScript e NodeJS. para ver como funciona, comece a digitar um comando JavaScript ou NodeJS e aperte a tecla  Tab que o plugin completa o código para você. linter - Auxilia o desenvolvedor indicando pontos de possíveis erros de codificação na mesma hora que você está codando. minimap - Instala e ativa um pequeno mapa do código no lado direito do Atom. Mas podemos move-la para o lado esquerdo se quisermos. pigments - Mostra as cores quando estamos definidos marcações em códigos CSS. simple-drag-drop-text - Este plugin permite movermos facilmente um bloco de código de um ponto a outro dentro do editor. terminal-plus - Instala novas features no terminal de dentro do Atom. Seguindo a ideia de sempre passar mais informações para todos que estão me seguindo, descrevo mais alguns plugins interessantes indicados pelo Cassio Cardoso. emmet - Facilita o autocomplete de tags HTML, agilizando a digitação e diminuindo a repetitividade. markdown-preview-plus - Possibilidade de pré-visualizar o Markdown dentro do Atom mesmo. sync-settings - Salva as configs do Atom em um Gist e facilita a sincronização de plugins e temas entre diferentes computadores. minimap-cursorline - Mostra a linha corrente no minimap. minimap-git-diff - Mostra as diferenças entre o código atual e o código armazenado no GitHub. minimap-highlight-selected - Mostra em destaque no minimap as palavras selecionadas no editor de código. Conclusão: Bem, até o momento estou gostando muito da experiência no uso do Atom. Ele tem bastante recursos, é leve e flexível. Até o momento que estou escrevendo este texto, no site do Atom existem disponíveis 4.749 pacotes de plugins e 1.589 pacotes de temas. Ou seja, tem bastante coisa para testarmos não é!!! E você?? Qual o seu editor preferido, quais são os seus temas e plugins que mais lhes agradam e que fazem ser mais produtivos?? Uma abração em todos. Fernando.