· ferramentas  · 2 min read

Plugins do Sublime Text para Desenvolvimento Web

Plugins do Sublime Text para Desenvolvimento Web Front End

Em meus posts anteriores eu deixei algumas dicas de configuração do Sublime e instalação no Ubuntu, alguns atalhos legais. Agora vou citar alguns plugins que eu utilizo no dia-a-dia para melhor aproveitar o editor.

sublime text

Para instalar plugins no Sublime você já sabe que é pelo Package Control que instalamos anteriormente no Post de configuração. Então pressione Ctrl + Shift +P e digite Install. Vai aparecer uma lista com algumas opções, selecione Package Control: Install Package. Agora é só digitar o nome do plugin, localizar na lista e selecionar ele.

Alguns plugins maneiros

Emmet - É um plugin que vai ajudar na codificação de HTML e CSS através de algumas expressões. Para conhecer todas as expressões é necessário dar uma olhada no site do Plugin.

Jquery Snippets - Alguns exemplos de códigos JQuery (Pra você não precisar ficar entrando no site para relembrar).

ColorHighlighter - Quando você clica em uma linha com nome de cor ou código hexadecimal, o plugn preenche o fundo da palavra com a cor específica.

HTML snipppets - Parecido com JQuery Snippet, porém trás códigos HTML.

BracketHighlighter - Destaca as chaves/tags/parênteses.

ColorPicker - Abre uma paleta de cores. No Linux e Windows usamos Ctrl + Shift + C no Mac CMD + Shift + C para abrir a paleta.

ClipboardHistory - Guarda uma lista dos seus Ctrl + C e digitando Ctrl + Alt + V é exibida essa lista.

** JavaScript Next** - Aplica Highlighting no código JS e ainda vem com os padrões do ES6!

AutoFileName - Auto completa os nomes dos arquivos e pastas que você for digitando.

FileDiffs - Compara arquivos com algum outro, com histórico no Clipboard ou modificados, mas não salvos.

Eu uso alguns Highlighters também que são:

Less,** Sass**,** Stylus**,** CSS3 e HTML5.**

Se você digitar lorem e pressionar o Ctrl + Space (Ou o comando que for para autocompletar em seu Sublime) ele cria um bloco com um lorem ipsum.

E tem muito mais! Só cuidado para não deixar seu editor uma carroça de tanto plugin. Instale somente os que você realmente utiliza e será feliz por muito tempo! ;D

Você conhece algum outro plugin maneiro? Comenta ae.

Referências:

  • <css-tricks.com/sublime-text-front-end-developers>
  • <martineau.tv/2014/07/sublime-text-for-front-end-development>
  • <github.com/kemayo/sublime-text-2-clipboard-history>
  • <github.com/BoundInCode/AutoFileName>
  • <github.com/colinta/SublimeFileDiffs>
Back to Blog

Related Posts

View All Posts »

O que é e para que serve debounce em JavaScript

Uma dica importante de performance em JavaScript quando estamos trabalhando em aplicações web ricas ou as famosas SPAs. O debounce é muito útil e importante no universo JavaScript, por isso confira este texto e os exemplos até o final.