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.
Passo 1 – 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:
[code]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’)[/code]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:
[code]transition: color 0.5s linear;[/code]Ao pressionar
CTRL+ALT+X
o plugin adiciona os nossos queridos vendors
[code] -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;
[/code]
Uma peculiaridade desse plugin, é que se pressionarmos repetidas vezes as teclas de atalho dele, o resultado não é muito satisfatório.
Zen Coding Emmet
O Emmet é a nova geração do Zen Coding já esta muito popular entre os desenvolvedores Front-ends, e agiliza o trabalho tanto quando o ZenCoding, se você é um cara que não chegou a conhecer o ZenCoding, não se sinta acanhado, apenas acesse este post sobre o Emmet no Tableless e saia de la um ninja.
Para instalar o ZenCoding,
CTRL+SHIFT+P > Install > Emmet
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:
[javascript] !(function () {// hehehe
console.log(‘iniciando’);
alert(‘é’)
var t,
f = ”,
g = {
a = ”,
b = ”,
c = ”}
})();
[/javascript]
Vai ficar assim:
[javascript] !(function() {// hehehe
console.log(‘iniciando’);
alert(‘é’)
var t, f = ”,
g = {
a = ”, b = ”, c = ”
}})();
[/javascript]
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.
[javascript] !(function () {// hehehe
console.log(‘iniciando’);
alert(‘é’)
var t,
f = ”,
g = {
a = ”,
b = ”,
c = ”
}})();
[/javascript]
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 gerênciar arquivos de uma forma interessante, veja o print:
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”.
GoToOpenFile
Este plugin mostra uma lista dos arquivos que estão abertos em seu Sublime, e basta usar as setas para selecionar o que você quer e apertar o ENTER e voilá, o arquivo fica com foco, é algo que facilita alternar entre arquivos, mais fácil que o CTRL+TAB, haaa, para usa-lo basta pressionar CTRL+SHIFT+O e escolher.. Esse plugin foi uma dica do amigo Alexandre Faria
TrailingSpaces
Este plugin, destaca com uma cor rosa/pink espaços inúteis que não servem para nada no código, dando uma forma fácil e rápida de remover todos os espaços do código, é bem útil.
Na imagem acima, as partes em destaque na cor rosa, são os espaços em branco.
SideBarEnhancements
Este plugin da um UP na sidebar default do Sublime, adicionando varias opções para edição de arquivos entre outras, ele te da super poderemos, e é essencial, para saber mais deste plugin, o TutsPlus tem um post magnifico, mostrando como usa-lo, e mostrando algumas outras coisas interessantes também.
CSS Comb
Este plugin organiza as propriedades do CSS em ordem alfabética automaticamente.
Veja um print antes do uso do plugin:
E um print depois do uso do plugin:
Comment-Snippets
Os amantes de padrões, vão amar este plugin, ele é super simples, ele trás um conjunto de snippets para comentários de código no CSS, PHP e HTML, você digita ‘comm’ o sublime lhe mostra a opção do usar os snippets que trazem comentários bloco, sessões, sub-sessões, muito interessante vale a pena conferir.
sublime-jslint
Esse ferramenta o ajudará a escrever o melhor código possível, depois de instalar, execute a opção jslint: run jslint E ele mostrara o console do Sublime com dicas para melhorar seu código, no meu aqui apareceu isso:
[code] jslint:main.js:3:5:Missing ‘use strict’ statement.jslint:main.js:15:9:Expected ‘nomeItems’ at column 13, not column 9.
jslint:main.js:24:82:’nomeItem’ was used before it was defined.
[/code]
Ai é só ir melhorando linha por linha e executar o jslint novamente =D Dica de configuração do jslint você pode conseguir no Google facilmente, e configurar o jslint do sublime através de JSLint: JSLint Settings
AutoFileName
Este plugin é do tipo essencial, ele nada mais faz do que, completar os diretórios que você esta digitando no seu código, serve para muitas finalidades, mas o exemplo mais claro é o de adicionar uma imagem ao CSS, veja este print, ele autocompleta para mim, mostrando as imagens que estão na pasta ../img/ – See more at: http://tutsmais.com.br/blog/sublime-2/melhores-plugins-para-sublime-text-2/#sthash.HUi59JNY.dpuf
Console Snippets
Este plugin te da vários snippets para você escrever console.log, console.dir etc.. console muito mais rápido, O legal também é que este plugin foi criado por um brasileiro.
veja um exemplo:
Autor: Tutsmais
