Melhores Plugins para Sublime Text 2 e 3 (Download / Baixar )[Instalar] 2015 Shine Musick

Melhores Plugins para Sublime Text 2 e 3 (Download / Baixar )[Instalar] 2015 Shine Musick

Nesta post, irei listar vários plugins do Sublime Text 2 e Sublime Text 3 que ajudam muito na hora de escrevermos nosso código.

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 gerenciador de pacotes do Sublime Text(link)

Este gerenciador de pacotes, serve para que possamos instalar facilmente todos os plugins descritos neste post e é muito fácil a instalação siga os passos deste post para aprender a instalar-lo e depois continue lendo este post.

Como instalar um plugin no Sublime

Para instalar algum plugin plugin é fácil, depois que você instalar o package control basta seguir estes passos.

1. Pressione CTRL+SHIFT+P ou COMMAND+SHIFT+P
2. Digite “Install” e tecle ENTER
3. Espere carregar a lista de plugins
4. Digite o nome do plugin que você quer instalar
5. Use as setas para cima e para baixo para navegar entre os plugins
6. Quando encontrar o plugin que quer, tecle ENTER. O plugin será instalado
7. Qualquer dúvida sobre como usar o plugin instalado, você pode procurar onde está o site ou repositório do plugin, sempre tem informações úteis de como usar o máximo do plugin

Agora, vamos a lista \o/

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 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 indentado 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 indentaçã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 seus 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.

Local History

Mantém um histórico do seu arquivo local, muito útil para backups, comparações, diferenças, replace, etc.

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..

Se você está a procura de uma forma rápida de abrir arquivos procurando pelo nome do arquivo, este post vai te ajudar.

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, escrevi um post (este aqui) que fala mais sobre este plugin e como ele post ser útil.

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:

Propriedades em ordem alfabéticas podem até mesmo diminuir o tamanho de arquivos,leia este post em que falo a respeito.

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

Essa ferramenta o ajudará a escrever o melhor código possível, depois de instalar, execute a opção jslint: run jslint ele mostrara o console do Sublime com dicas para melhorar seu código, por exemplo:

1 2 3

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.

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 - Default

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/

Console Snippets

Este plugin te da vários snippets para você escrever console.log, console.dir etc.. console muito mais rápido.

Como instalar um plugin no Sublime

Para instalar algum plugin plugin é fácil, depois que você instalar o package control basta seguir estes passos.

1. Pressione CTRL+SHIFT+P ou COMMAND+SHIFT+P
2. Digite “Install” e tecle ENTER
3. Espere carregar a lista de plugins
4. Digite o nome do plugin que você quer instalar
5. Use as setas para cima e para baixo para navegar entre os plugins
6. Quando encontrar o plugin que quer, tecle ENTER. O plugin será instalado
7. Qualquer dúvida sobre como usar o plugin instalado, você pode procurar onde está o site ou repositório do plugin, sempre tem informações úteis de como usar o máximo do plugin

Agora, vamos a lista \o/

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 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 indentado 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 indentaçã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 seus 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

Mantém um histórico do seu arquivo local, muito útil para backups, comparações, diferenças, replace, etc.
Dica de Gabriel Mateus

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..

Se você está a procura de uma forma rápida de abrir arquivos procurando pelo nome do arquivo, este post vai te ajudar.

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, escrevi um post (este aqui) que fala mais sobre este plugin e como ele post ser útil.

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:

Propriedades em ordem alfabéticas podem até mesmo diminuir o tamanho de arquivos,leia este post em que falo a respeito.

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

Essa ferramenta o ajudará a escrever o melhor código possível, depois de instalar, execute a opção jslint: run jslint ele mostrara o console do Sublime com dicas para melhorar seu código, por exemplo:

1 2 3

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.

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 - Default

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/

Console Snippets

Este plugin te da vários snippets para você escrever console.log, console.dir etc.. console muito mais rápido, veja um exemplo: