25 Melhores Plugins para o Adobe Brackets

Brackets, para quem nunca ouviu falar, é um excelente editor de código-fonte, desenvolvido e distribuído gratuitamente pela Adobe, com o objetivo de servir como uma ferramenta indispensável para o desenvolvimento front-end e web design, principalmente em se tratando em HTML, CSS e JS.

Além de ser gratuito, o Adobe Brackets possui uma gama de extensões que você poderá utilizar de maneira a otimizar  e auxiliar seus projetos.

Pensando nisso, separei para você, os 25 melhores plugins para o Adobe Brackets que utilizo em meus projetos “reais”.

25 melhores plugins para o Adobe Brackets

1 – Emmet

Posso arriscar que um dos melhores plugins para o Adobe Brackets é o  Emmet. Com ele, você economiza tempo na criação de seu código, como por exemplo: imagine criar um menu de navegação com vários submenus e níveis? Com uma linha única de código, o que levaria minutos, com o Emmet, fará em segundos.

Plugin Brackets Emmet

Plugin Brackets Emmet. Fonte: http://beebom.com/best-emmet-tips-to-code-htmlcss-fast

2 – Beautify

Outro que considero um dos melhores plugins para o Adobe Brackets é o Beautify. Se, assim como eu, você gosta de um código bem organizado, bonito e legível de se ver, Beautify é “o” plugin.

Plugin Brackets Beautify

Plugin Brackets Beautify. Fonte: http://beebom.com/brackets-extensions-you-really-need

3 – Minifier

Seus arquivos CSS e JS estão pesados, ocasionando lentidão em seu carregamento? Com a extensão Minifier, você consegue comprimir e otimizar seu arquivos automaticamente. O Minifier, sem dúvida, deve fazer parte da lista dos melhores plugins para o Adobe Brackets.

Plugin Brackets Minifier

Plugin Brackets Minifier. Fonte: http://sixrevisions.com/tools/brackets-extensions

4 – Indent Guide

Indent Guide é uma extensão que nos ajuda a manter o código indentado e verifica se deixamos para trás alguma tag HTML sem fechar. O bom é que, o Indent Guide criar uma linha-guia para facilitar a leitura do código.

Plugin Brackets Indent Guides

Plugin Brackets Indent Guides. Fonte: http://www.partage-it.com/selection-extensions-preferees-pour-brackets

5 – Brackets Icons

Para quem já utiliza o Brackets, certamente sente uma necessidade de identificar melhor os arquivos utilizados em seus projetos. Com o Brackets Icons, essa tarefa fica mais fácil, pois ele exibe ícones de acordo com a tipologia de cada arquivo, facilitando o nosso trabalho.

Plugin Brackets Icons

Plugin Brackets Icons. Fonte:  https://github.com/ivogabe/Brackets-Icons

6 – Documents Toolbar

Mais uma extensão digna dos melhores plugins para o Adobe Brackets é a Documents Toolbar. Com a Documents Toolbar você poderá visualizar as tabs com os arquivos abertos, além de manipulá-las, reposicionando-as, travando-as e mudando de cor.

Plugin Brackets Document Toolbar

Plugin Brackets Document Toolbar. Fonte: https://github.com/dnbard/brackets-documents-toolbar

7 – Brackets Css Color Preview

O plugin Brackets Css Color Preview indica as cores utilizadas em seu arquivo CSS, melhorando a sua visualização. Bastante útil para quem preza pela organização e encontrabilidade das cores.

Plugin Brackets css color preview

Plugin Brackets css color preview. Fonte: https://github.com/cmgddd/Brackets-css-color-preview

8 – Brackets Color Palette

Ainda com o tema cores, o Brackets Color Palette auxilia você a criar sua paleta de cores com base em imagens PNG, JPG, GIF e ícones ICO. O Brackets Color Palette é ideal para quem precisa trabalhar com cores profissionalmente.

Plugin Brackets Color Palette

Plugin Brackets Color Palette. Fonte: https://github.com/sprintr/brackets-color-palette

9 – HTML Skeleton

Cansado de criar a estrutura básica de arquivos HTML? Com o Plugin Brackets HTML Skeleton, você terá em poucos cliques, uma estrutura organizada, já associada a responsividade e muito mais.

Plugin Brackets HTML Skeleton

Plugin Brackets HTML Skeleton. Fonte: https://github.com/le717/brackets-html-skeleton

10 – Brackets Simple To-Do

O plugin Brackets Simple To-Do é bem simples, mas bem útil para quem precisa lembrar do que falta fazer no código. Com o Brackets Simple To-Do você cria uma lista de tarefas com níveis de prioridade, bem direto e usual.

Plugin Brackets Simple To-Do

Plugin Brackets Simple To-Do. Fonte: https://github.com/ovk/brackets-simple-todo

11 – Brackets Git

Se você possui uma conta no Git Hub e precisa integrar seus projetos entre o Brackets e a plataforma, recomendo um dos melhores plugins para o Adobe Brackets: Brackets Git.

Plugin Brackets Git.

Plugin Brackets Git. Fonte: https://github.com/zaggino/brackets-git

12 – Live Preview for Responsive

Precisa visualizar seus projetos de maneira responsiva? Com o plugin Live Preview for Responsive, essa ação será possível rapidamente, sem que tenha que acessar sites específicos ou utilizar outras ferramentas. Muito bom mesmo.

Plugin Brackets Live Preview for Responsive

Plugin Brackets Live Preview for Responsive. Fonte: https://github.com/mikankari/multireso

13 – eqFTP

Com o plugin eqFTP você poderá enviar seus arquivos diretamente ao servidor de hospedagem, ganhando tempo e melhorando sua performance.

Plugin Brackets eqftp

Plugin Brackets eqftp. Fonte: https://github.com/Equals182/eqFTP

14 – Brackets Lorem Pixel

Lorem Pixel é uma extensão bem interessante. Sua função é gerar espaços reservados para a inserção de futuras imagens, dando-lhe algumas opções de edição.

Plugin Brackets Lorem Pixel

Plugin Brackets Lorem Pixel. Fonte: https://github.com/dnbard/brackets-lorem-pixel

15 – ACB GIMEpix Placeholder

O plugin ACB GIMEpix Placeholder é semelhante ao anterior, porém, ele inseri imagens diretamente de um diretório próprio o que lhe proporciona um desenvolvimento mais ágil e fácil de testar.

Plugin Brackets ACB GIMEpix Placeholder

Plugin Brackets ACB GIMEpix Placeholder

16 – jQuinter

Definiu classes, ID’s, variáveis? Para associá-los sem esforço, o plugin jQuinter faz essa tarefa esplendidamente. É um recurso que eu já vi em editores famosos como o Dreamweaver. Show.

Plugin Brackets jQuinter

Plugin Brackets jQuinter, Fonte: https://github.com/Wikunia/brackets-jQuinter

17 – HTML Designer for Brackets

Com o HTML Designer for Brackets é possível injetar anabolizantes ao Brackets e transformá-lo em um editor mais robusto, utilizando ferramentas para responsive design. Baixe já o HTML Designer for Brackets, é sensacional.

Plugin Brackets Html Designer

Plugin Brackets Html Designer. Fonte: https://github.com/swmitra/html-designer

18 – Brackets Pixlr

Que tal ter um editor de imagens diretamente no Adobe Brackets? Com o plugin Brackets Pixlr, você consegue adicionar o editor online pixlr.com.

Plugin Brackets Pixlr

Plugin Brackets Pixlr. Fonte: https://github.com/dnbard/brackets-pixlr

19 – HTML Special Chars

Vez ou outra preciso utilizar caracteres especiais do HTML para ganhar uns bits ao invés de inserir imagens. Para essa tarefa, o HTML Special Chars é campeão.

Plugin Brackets HTML special character

Plugin Brackets HTML SpecialChars. Fonte: https://github.com/Y0nnyy/SpecialChars

20 – Brackets Outline List

Com o Brackets Outline List é possível visualizar funções ou definições de documentos abertos e suas respectivas extensões, como JavaScript, CoffeeScript, CSS, SCSS, LESS, XML, HTML, SVG, Markdown e PHP.

Plugin Brackets Outline List

Plugin Brackets Outline List. Fonte: https://github.com/Hirse/brackets-outline-list

21 – HTML Wrapper

Incrível a função do HTML Wrapper. Excelente plugin para agilizar a criação de menu de navegação ou listas com pouco esforço.

Plugin Brackets HTML Wrapper

Plugin Brackets HTML Wrapper

22 – Brackets CSSfier

Excelente extensão e indispensável para quem deseja converter elementos do HTML e CSS/SCSS/LESS automaticamente. Baixe um dos melhores plugins para o Adobe Brackets: Brackets CSSfier.

Plugin Brackets CSSfier

Plugin Brackets CSSfier

23 – Brackets oneliner extension

Transforme blocos de conteúdo e linhas de código em uma linha única com o plugin Brackets oneliner extension.

Plugin Brackets oneliner extension

Plugin Brackets oneliner extension

24 – Brackets Autoprefixer

Você que é fera no CSS, sabe que existem alguns prefixos que servem para criar algumas adaptações e versões de navegadores. Para trabalhar tais hacks automaticamente, use o Brackets Autoprefixer.

Plugin Brackets Autoprefixer

Plugin Brackets Autoprefixer. Fonte: https://github.com/mikaeljorhult/brackets-autoprefixer

25 – Export as PDF

E, encerrando este post – 0s 25 melhores plugins para o Adobe Brackets, o Export as PDF exporta seus códigos em PDF.

Plugin Brackets Export as PDF

Plugin Brackets Export as PDF

Até a próxima!

CarlosHPS Webdesigner 8)


Posts Relacionados
Deixe uma resposta
Captcha Clique para atualizar o código