Brackets.io lançou a versão 1.2 recentemente, com alguns novos recursos que você pode ler em seu blog. Nós compilamos uma lista de 10 das melhores e mais úteis extensões de Brackets (sem nenhuma ordem específica), junto com instruções completas para cada extensão.
Extensões de suportes
Dobradura 1.Code
Ao contrário de muitos outros IDEs e editores de código, os Brackets não possuem uma opção de dobragem de código disponível por padrão. Com o Code Folding, você pode facilmente recolher grandes partes do seu código em uma única linha. A extensão Code Folding está disponível no Github e no gerenciador de extensões Brackets.
Como usar
Para dobrar qualquer tag aninhada, basta clicar na seta para baixo à esquerda da tag pai, como mostrado acima. Mesmo princípio para Javascript ou qualquer outro formato. Basta clicar na seta para baixo à esquerda do elemento pai para dobrar todas as instruções aninhadas em uma linha. Para expandir, basta clicar no sinal de mais.
Os números de linha das linhas dobradas estão ocultos, por isso é fácil identificar linhas dobradas quando você está se concentrando no código.
2. Lorem Pixel
Há muitas maneiras de gerar texto de espaço reservado, mas os desenvolvedores da web de front-end geralmente precisam de imagens de espaço reservado. Em vez de tentar criar uma imagem de espaço reservado em branco, use a extensão Lorem Pixel. Ele permite inserir lindas imagens de espaço reservado de qualquer tamanho que você desejar. A parte legal sobre o Lorem Pixel é que ele permite escolher a categoria da qual você deseja uma imagem.
Se isso não for bom o suficiente, as imagens de espaço reservado mudam sempre que você recarregar a página! As imagens podem, muitas vezes, alterar os esquemas de cores, de modo que o Lorem Pixel também oferece uma opção de 'escala de cinza' para usar somente imagens de espaço reservado de b / w. Esta extensão é fornecida por lorempixel.com e está disponível no gerenciador de extensões de colchetes.
Como usar
Depois de instalar a extensão Lorem Pixel, o logotipo Lorem Pixel - um quadrado marcado - aparece no painel de extensão (o painel à direita com o botão Live Preview). Clique no logotipo para exibir uma caixa de configurações. Defina o tamanho de imagem desejado e a categoria de imagem preferida. Se você quiser imagens em tons de cinza, verifique a opção de tons de cinza. Copie o link para a área de transferência e use-o conforme necessário ou insira na posição atual do cursor.
3. Autoprefixer
Adicionar prefixos de fornecedores ao seu código é penoso. A extensão Autoprefixer pode poupar muito tempo (e muito trabalho!) Porque adiciona automaticamente os prefixos de fornecedores necessários ao seu código. Ele não precisa de nenhuma configuração e atualiza seus prefixos toda vez que você salva seu código. Você também pode selecionar o código e prefixá-lo automaticamente, se quiser.
Como usar
Para usar o Autoprefixer, comece a escrever código sem prefixo. A extensão adicionará automaticamente o código prefixado assim que você salvar. Para prefixar automaticamente algum código selecionado, primeiro selecione o código e depois a aba Editar ⇒ Seleção de prefixo automático.
Autoprefixer também permite adicionar prefixos personalizados em suas configurações. Para ir para as configurações de extensão: Editar ⇒ Configurações do autoprefixer.
Para ter um código bonito, em cascata e com prefixo, ative a opção Cascata visual nas configurações da extensão.
4. Visualização de Markdown
O Markdown é uma linda linguagem de marcação de texto simples que é facilmente convertível em HTML. O Markdown Preview fornece o Markdown renderizado logo abaixo da versão em texto. Ele permite que você escolha entre dois estilos diferentes, Github Flavored Markdown e Standard Markdown.
Existem três temas que você pode escolher para a janela de visualização - Light, Dark e Classic. O Markdown Preview também possui uma opção de sincronização de rolagem (ativada por padrão). A extensão pode ser baixada do Github ou do gerenciador de extensões de colchetes.
Como usar
Abra um arquivo .md ou .markdown . Se você instalou o Markdown Preview, o botão M ↓ deve aparecer à direita. Clique nele e você verá o Markdown renderizado. Para alterar o tema ou desativar a sincronização de rolagem, basta clicar no ícone de roda dentada no canto superior direito da seção Visualização de remarcação.
5. Suportes de ícones
É sempre divertido incrementar o seu editor de código com ícones de arquivos. Os ícones de colchetes adicionam ícones coloridos, com base no tipo de arquivo, a todos os arquivos listados na barra lateral. Ele possui ícones para a maioria dos tipos de arquivo e você pode postar solicitações de ícones na página do Github.
Dica de bônus:
Brackets Icons usa ícones do projeto Ionicons. Você também pode verificar a extensão File Icons (um fork do projeto Brackets Icons) que usa ícones do projeto Font Awesome. Tudo se resume a preferência pessoal no final.
Como usar
Basta instalar a extensão e recarregar os suportes (F5).
6. Barra de Ferramentas de Documentos
Suportes não possui guias. Fato claro e simples. A extensão da barra de ferramentas Documentos adiciona essa funcionalidade. Todos os arquivos que estão na seção 'ativa' da barra lateral aparecem como guias nesta extensão. Você também pode ocultar a barra lateral e usar apenas a Barra de ferramentas de documentos para obter uma interface agradável.
Como usar
Instale a extensão e recarregue os suportes (F5).
7. Suportes Git
Tudo tenta se integrar com o Git nos dias de hoje; é de longe o Sistema de Controle de Versão (VCS) mais popular. Suportes Git é facilmente o melhor entre Extensões de Suportes Similares. Tem todos os recursos do git que você precisa. Você pode facilmente cometer alterações de dentro dos próprios colchetes, pressionar e puxar as alterações com um único clique, visualizar o histórico do arquivo e também o histórico total de confirmações. Se você é bom com o Git, você não encontrará nenhum problema com esta extensão.
Nota: Para usar o Brackets Git você precisa ter o Git instalado no seu computador. Depois de instalar a extensão, você pode precisar inserir o caminho para o seu arquivo executável do Git (se ele não estiver no caminho padrão).
Como usar
Usando Brackets Git é bastante simples. Faça a sua pasta de repo do Github local a pasta do projeto em Colchetes. Em seguida, abra um arquivo, faça algumas alterações e salve-o. Então você pode ir em frente e clicar no ícone do Git à direita e isso abrirá o painel Gits Brackets na parte inferior. Ele listará todas as modificações feitas em seus arquivos.
Verifique os arquivos que você deseja confirmar e, em seguida, clique no botão Confirmar. Isto irá abrir um popup listando as mudanças feitas. Digite sua mensagem de confirmação e clique em OK. E você cometeu com sucesso um arquivo para o Git diretamente do Brackets!
Depois de confirmar basta clicar no botão (também mostra o número de confirmações não sincronizadas, como você pode ver no GIF acima).
Configurando Configurações
Abra o painel Gits Brackets e clique no botão Settings (segundo da direita). Sinta-se à vontade para configurar Brackets Git como quiser.
Para ver o arquivo e confirmar histórico
Basta clicar nos respectivos botões para visualizar o Histórico de Arquivos e o Histórico de Confirmações. Nós mencionamos que você pode mudar o avatar para um avatar preto e branco, um avatar colorido ou seu Gravatar?
8. Lint TODAS AS COISAS
Lint todas as coisas. Tudo. Essa extensão exibe todos os seus arquivos de uma só vez. Muito útil quando você tem um projeto grande com muitos arquivos conectados. Todos os erros de fiapos aparecem bem em um painel.
Como usar
Para usar Lint ALL Things, vá até a aba View e clique em Lint whole Project .
9. Colchetes Todo
Brackets Todo é uma pequena extensão que mostra todos os comentários TODO em um formato de lista. Por padrão, ele suporta 5 tags - TODO, NOTE, FIXME, CHANGES e FUTURE. Você também pode marcar os comentários como Concluído. Nas opções de exibição, você pode filtrar comentários por tags. Brackets Todo permite que você defina cores personalizadas para tags, bem como suas próprias tags também, caso você queira ser criativo com seus comentários.
Se você estiver trabalhando em um projeto grande e precisar manter o controle de comentários de vários arquivos, poderá alterar o escopo da pesquisa do Suporte Todo. Deseja excluir alguns arquivos e pastas, como pastas de fornecedores? Não se preocupe. Basta adicionar o caminho na lista de exclusão. Você pode personalizar as configurações de cada projeto adicionando um arquivo .todo no diretório do projeto raiz.
Você pode passar por todas as opções de configuração na documentação do github.
Como usar
Para usar Brackets Todo, basta adicionar um comentário ao seu código com uma tag dentro. O nome da tag deve estar em letras maiúsculas, seguido de dois pontos (:). Para ver todos os Todo's, basta clicar no ícone Todo no painel de extensão do lado direito.
Configurando:
- Para permitir o Todo's para comentários HTML: Basta abrir as configurações - Clique no ícone Todo → Configurações (ícone de roda dentada) - e clique para abrir o arquivo .todo. Para este arquivo, adicione este código:
{"regex": {"prefixo": "(? :)"}}
- Para alterar o escopo da pesquisa: Adicione este código ao arquivo .todo:
{"search": {"scope": "meu projeto"}} - Para excluir qualquer arquivo / pasta / extensão de arquivo do escopo de pesquisa: Adicione este código ao arquivo .todo:
{"search": {"scope": "meu projeto","ExcludeFolders": ["yourfolder"]
"excludeFiles": ["yourfile"] "excludeFiles": [".rextensão"]}}
10. embelezar
Embelezar faz seu código parecer bom. Ele corrige espaços, recuo e linhas.
Como usar
É muito fácil usar o Beautify. Tudo o que você precisa fazer é selecionar algum código> Clique com o botão direito > Embelezar .
Alternativamente, você pode ir até a aba Editar e clicar em ' Embelezar '.
