Blog e Artigos Tecnologia

Blog e Artigos Tecnologia

Who am I?

Sou ūüíĽ Desenvolvedor PHP | Laravel #Fullstack #Dev #DevOps #Laravel #PHP #lucena


What I write about


Recent Posts

7 Plugins do sublime text

Conheça 7 plugins de Sublime Text que podem ajudar a sua produtividade diária.

Resultado de imagem para sublime text

O Package Control

Antes de tentar instalar qualquer pacote e come√ßar a brincadeira, √© importante que voc√™ j√° tenha instalado em seu Sublime o ‚Äúpackage control‚ÄĚ de acordo com sua vers√£o:¬†Sublime Text 2¬†ou¬†Sublime Text 3.

O Package Control é um plugin para Sublime que vai gerenciar todos os outros plugins. Com ele você vai instalar, desinstalar e configurar todos os plugins do seu Sublime.

1 ‚Äď Emmet

O Emmet (anteriormente conhecido como Zen Coding) √© simplesmente um conjunto de ferramentas de desenvolvimento web que ajudam a codifica√ß√£o de HTML e CSS. Ele permite que voc√™ crie, com mais velocidade, seus elementos atrav√©s de express√Ķes espec√≠ficas, seguidas da tecla TAB. Saiba mais em¬†http://emmet.io/

Escrita da express√£o:

ul # nav> li.item $ * 4> a {item $} + TAB

Resultado:

<Ul id = "nav">
   <Li class = "Item1"> <a href=""> </a> News Item 1 </ li>
   <Li class = "Item2"> <a href=""> </a> Item 2 </ li>
   <Li class = "Item3"> <a href=""> </a> ponto 3 </ li>
   <Li class = "Item4"> <a href=""> Novamente, 4 </a> </ li>
</ Ul>

2 ‚Äď jQuery

Esse plugin pode facilitar bastante na momento da criação de bibliotecas em seus projetos. Ele é um pacote que fornece alguns trechos para a maioria dos métodos do jQuery, muito usados no dia a dia.

03

3 ‚Äď ColorHighlighter

Esse √© um plugin maneir√≠ssimo e serve para o Sublime Text 2 e 3. Ele inspeciona discretamente os valores de cores hexadecimais selecionados em diferentes estilos e √≠cones. Al√©m disso, o plugin adiciona o seletor de cores eum conversor de formato de cor. Seria um tipo de ‚Äúinspecionar elemento‚ÄĚ para cores em tempo real. =]

04

4 ‚Äď AlignTab

Esse plugin √© bem interessante para sua forma de organiza√ß√£o de c√≥digos. Ele vai te auxiliar a permanecer com uma indenta√ß√£o 100% padronizada. √Č um plugin de alinhamento usando express√£o regular. Confira abaixo suas caracter√≠sticas:

  • Alinha usando express√£o regular
  • Espa√ßamento personalizado, preenchimento e justificado
  • Detec√ß√£o inteligente para alinhamentos se linhas s√£o selecionadas
  • Suporte a m√ļltiplos cursores
  • Modo de mesa e modo de visualiza√ß√£o ao vivo

05

5 ‚Äď ColorSchemeSelector

Esse plugin costuma chamar de ‚Äúplugin para design‚ÄĚ, porque ele vai permitir que voc√™ crie uma customiza√ß√£o no seu Sublime Text. Resumidamente ele serve para selecionar esquema de cores atrav√©s do Painel. Infelizmente isso s√≥ s√£o adotados cores padr√Ķes escolhidas pela ferramenta.

06

6 ‚Äď CSS3 Syntax ou CSS3

Esse plugin serve para manter uma boa organiza√ß√£o no CSS. Existem casos onde queremos acabar ir logo embora para casa e acabamos esquecendo um simples ‚Äú;‚Äú. O CSS3 Syntax ou apenas CSS3 √© bem abrangente, pois se baseia nos mais recentes projetos e especifica√ß√Ķes atuais.¬†Uso: Navegue at√© View > Syntax > CSS3

Todas as propriedades deverão terminar com ponto e vírgula.

07

Todas as propriedades dever√£o ser escritas em min√ļsculo.

08

OBS: O plugin¬†CSS3 Syntax¬†estava para ser substitu√≠do pelo¬†‚ÄúCSS3‚ÄĚ. Na hora de instalar, pesquise pelo 2 nomes e instale o que for de sua prefer√™ncia.

7 ‚Äď JavaScriptNext

Bom. Como a gra√ßa √© sempre deixar o melhor pro final, te apresento o¬†JavaScriptNext.¬†Este √© um pacote de sintaxe melhorada para JavaScript. Baseia-se nos arquivos de linguagem comumente usados ‚Äč‚Äče tamb√©m inclui novos recursos de ECMAScript 6 como m√≥dulos, m√©todos, arrows functions, classes, geradores e acessores (ES5).

Se voc√™ quiser us√°-lo para cada arquivo js, voc√™ ‚Äč‚Äčcria ou abra um arquivo JavaScript, e dai clica no nome de sintaxe no canto inferior direito do Sublime, em seguida, clique em ‚ÄúAbrir todos com extens√£o atual e depois selecione JavascriptNext ‚Äď ES6 > JavascriptNext.

Você já vai poder ir testando as novas funcionalidades que o ES6 tem para apresentar, e é claro, ir se familiarizando com essa parada nota 10.

10

Extra plugin

  • √ćcones de linguagens (A File Icon)

    Installation

    Package Control

    The easiest way to install is using Sublime's Package Control. It's listed as A File Icon.

    1. Open Command Palette using menu item Tools → Command Palette...
    2. Choose Package Control: Install Package
    3. Find A File Icon and hit Enter
    4. https://github.com/ihodev/a-file-icon
    A File Icon

    Concluindo

    Pesquise e estude suas ferramentas de trabalho. Seu editor pode se tornar muito mais poderoso do que você pode imaginar. De repente todo mundo estava usando Sublime Text e isso faz com que esse editor seja poderoso. Há outros editores surgindo e ganhando espaço no mercado, como o Atom e o Brakets, mas o Sublime foi um acontecimento inesperado e feliz.

Fonte:Tablesless