Melhores Plugins para Sublime Text 2

sublime_text_icon_2181

Nesta publicação, irei listar vários plugins/extensões do Sublime Text 2 que ajudam pouco/muito na hora de escrevermos nosso código, bom como eu sou Desenvolvedor Front-end, não espere aqui plugins que o ajude a escrever PHP ou linguagens do tipo, espere plugin que o ajude de modo geral a agilizar seu trabalho ao escrever HTML, CSS, JavaScript, e cito também que eu uso Windows, então vários comandos que irei mostrar aqui provavelmente não funcionaram em seu Mac, Linux, porém não deve ser difícil encontrar o atalho, com certeza ele existe.

Gostaria que nos comentários, vocês dissessem os plugins que são acostumados a usar, e dessem suas opiniões sobre os plugins que irei citar aqui.

Passo 1 – Instale o Sublime Text 2

Na instalação do seu Ubuntu 12.10

sudo add-apt-repository ppa:webupd8team/sublime-text-2
sudo apt-get update
sudo apt-get install sublime-text

Passo 2 – Instale o gerenciador de pacotes do Sublime Text 2

Este gerenciador de pacotes, serve para que possamos instalar facilmente todos os plugins descritos neste post, e é muito fácil a instalação.

O Sublime Package Control esta disponível no site wbond.net e para instalar, basta abrir o terminal do Sublime em View->Show Console e colar este este código:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Assim que ele terminar de instalar, ele ira mostrar a frase “Please restart Sublime Text to finish installation” reinicie o sublime pressione CTRL+SHIT+P e digite install e pressione ENTER, o programa ira listar uma lista quase infinita de plugin pra você instalar no Sublime.

Tome cuidado, uns plugin são ótimo e outros podem te dar uma grande dor de cabeça, aqui neste post tem plugins que são úteis para Front-ends, então é uma boa ideia começar instalando os plugins que estão listados aqui.

Para instalar este plugin é fácil, CTRL+SHIFT+P -> Install -> Nome do plugin

Prefixr

Este plugin permite a você adicionar todos os vendors de maneira rápida e prática, por exemplo você escreve

1
transition: color 0.5s linear;

Ao pressionar CTRL+ALT+X o plugin adiciona os nossos queridos vendors

1
2
3
4
5
-webkit-transition: color 0.5s linear;
-moz-transition: color 0.5s linear;
-o-transition: color 0.5s linear;
-ms-transition: color 0.5s linear;
transition: color 0.5s linear;

Uma peculiaridade desse plugin, é que se pressionarmos repetidas vezes as teclas de atalho dele, o resultado não é muito satisfatório.

Zen Coding

Zen Coding é muito popular entre os desenvolvedores Front-ends, agiliza de mais a escrita, ao ponto de o desenvolvedor ficar extremamente irritado ao ter que escrever caracteres por caractere de uma tag.

Pra você que quer saber os atalhos do Zen Coding, para pressionar CTRL+SHIFT+P e digitar “Zen Coding:” os atalhos são mostrados na frente da descrição dos comandos.

JSFormat

Se seu JavaScript não esta identado de uma forma que te agrade, e gostaria de fazer isso de forma automática, usamos este plugin, pressione CTRL+SHIFT+P e escreva ‘format’, seu JavaScript que antes estava assim:

1
2
3
4
5
6
7
8
9
10
11
12
!(function () {
    // hehehe
            console.log('iniciando');
    alert('é')
    var t,
    f = '',
g = {
  a = '',
        b = '',
c = ''
}
})();

Vai ficar assim:

1
2
3
4
5
6
7
8
9
!(function() {
    // hehehe
    console.log('iniciando');
    alert('é')
    var t, f = '',
        g = {
            a = '', b = '', c = ''
        }
})();

Muito melhor certo? Se você quiser uma alternativa ao JSFormat, você pode experimentar a identação do próprio Sublime, pressione CTRL+SHIFT+P e escreva ‘reindent’. Seu JavaScript ficara organizado da seguinte forma.

1
2
3
4
5
6
7
8
9
10
11
12
!(function () {
    // hehehe
    console.log('iniciando');
    alert('é')
    var t,
    f = '',
    g = {
        a = '',
        b = '',
        c = ''
    }
})();

O resultado também é satisfatório né? Pois bem fica a seu critério.

Placeholders

Em todo projeto, precisamos de conteúdo temporário para testes, isso é uma tarefa realmente chata. Este plugin traz uma série de snippets para nos ajudar, deste imagens, listas ordenadas e não ordenadas, formulário. Para saber todos os snippets pressione CTRL+SHIFT+P, digite ‘placeholders’ e seja feliz :)

Alignment

Este plugin faz com que possamos alinhar o cursor durante uma múltipla seleção, é algo bem simples, mas que é útil.

Clipboard History

Este plugin guarda um histórico dos nossos CTRLs+Cs e para ver uma lista do que já copiamos, pressionamos CTRL+ALT+V (é perfeito)

Bracket Highlighter

Este plugin é interessante para quem vive se perdendo dentro do escopo de uma função ou tag, ele cria uma marcação ao lado do número da linha.

Sublimipsum

Este plugin, é pra quem precisa gerar o Lorem Ipsum da vida, mas quer fazer isso rapidamente. Pressione CTRL+1, ou CTRL+2, ou CTRL+3 e o plugin te da diferentes quantidades de texto aleatório :)

AdvancedNewFile

Este plugin permite criar um novo arquivo com opções interessantes como:

FileDiffs

Mostra as diferenças do arquivo comparando-o com outro arquivo, com o histórico do clipboard e modificações não salvas
Dica de Arthur Alvim

Local History

Mantem um histórico do seu arquivo local, muito útil para backups, comparações, diferenças, replace, etc.
Dica de Gabriel Mateu’s

jsMinifier

jsMinifier é um plugin que minifica seu JavaScript e CSS sem ter muito trabalho, tem até uma opção interessante que o plugin já cria um arquivo com o nome do seu arquivo, e adicionando um sufixo .min.js ou .min.css, vale a pena conferir :)

Para usar, basta pressionar CTRL+SHIFT+P Digite “minify” e terá as opções, por exemplo “Minify JavaScript to File”

Fonte: http://tutsmais.com.br/blog/2012/melhores-plugins-para-sublime-text-2/

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s