10 extensões de suportes impressionantes que você realmente precisa

30 de abril de 2020 0 173

O Brackets.io lançou a versão 1.2 recentemente, com ótimos novos recursos, sobre os quais você pode ler em seu blog. Nós compilamos uma lista das 10 melhores e mais úteis extensões de colchetes existentes (em nenhuma ordem específica), juntamente com instruções completas para cada extensão.

Extensões de colchetes

1. código dobrável

Ao contrário de muitos outros IDEs e editores de código, o Brackets não possui uma opção de dobra 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 emGithub e do gerenciador de extensão Brackets.

Funciona lindamente ...>

Como usar

Para dobrar qualquer marca aninhada, basta clicar na seta para baixo à esquerda da marca 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 das linhas dobradas estão ocultos; portanto, é fácil identificar as linhas dobradas quando você está concentrado no código.

2. Lorem Pixel

Existem várias 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. Permite inserir imagens maravilhosas de espaço reservado de qualquer tamanho que você desejar. A parte interessante do Lorem Pixel é que ele permite que você escolha a categoria da qual deseja uma imagem.

Se isso não for suficiente, as imagens do espaço reservado mudam sempre que você recarrega a página! As imagens costumam perturbar os esquemas de cores, portanto, o Lorem Pixel também oferece uma opção de ‘escala de cinza’ para usar apenas imagens de espaço reservado em preto e branco. Esta extensão é fornecida por lorempixel.com e está disponível no gerenciador de extensões Brackets.

lorem pixel demo
Usando pixel Lorem
>

Como usar

Depois de instalar a extensão Lorem Pixel, o logotipo Lorem Pixel – um quadrado marcado – aparece no painel de extensões (o painel à direita com o botão Visualização ao vivo). Clique no logotipo para abrir uma caixa de configurações. Defina o tamanho de imagem necessário e a categoria de imagem preferida. Se você deseja imagens em escala de cinza, marque a opção Escala 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 é uma tarefa árdua. A extensão Autoprefixer pode economizar muito tempo (e muito trabalho!) Porque adiciona automaticamente os prefixos de fornecedor 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 desejar.

demonstração do autoprefixer>

Como usar

Para usar o Autoprefixer, basta começar a escrever um 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, em seguida,  guia Editar ⇒ Seleção automática de prefixo.

configurações do autoprefixer>

O autoprefixer também permite adicionar prefixos personalizados em suas configurações. Para acessar as configurações de extensão:  Edite   Configurações do Autoprefixer.

Para ter um código bonito, em cascata e com prefixo, ative a  opção Cascata visual  nas configurações de extensão.

4. Visualização Markdown

Markdown é uma adorável 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, o Github Flavored Markdown e o Standard Markdown.

Existem três temas que você pode escolher para a janela de visualização – Claro, Escuro e Clássico. A Visualização Markdown também possui uma opção de sincronização de rolagem (ativada por padrão). A extensão pode ser baixada emGithub ou no gerenciador de extensões de colchetes.

demo de pré-visualização de descontos>

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

5. Ícones de colchetes

É sempre divertido incrementar seu editor de código com ícones de arquivo. Ícones entre colchetes adiciona ícones coloridos, com base no tipo de arquivo, a todos os arquivos listados na barra lateral. Possui ícones para a maioria dos tipos de arquivos, 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 (uma bifurcação do projeto Brackets Icons) que usa ícones do projeto Font Awesome. No final, tudo se resume à preferência pessoal.

ícones de colchetes>

Como usar

Basta instalar a extensão e recarregar os colchetes (F5).

6. Barra de ferramentas Documentos

Suportes não possuem guias. Fato puro 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 são exibidos como guias nesta extensão. Você também pode ocultar a barra lateral e usar apenas a barra de ferramentas Documentos para uma interface agradável.

barra de ferramentas do documento de colchetes>

Como usar

Instale a extensão e recarregue os suportes (F5).

7. Suportes Git

Tudo tenta se integrar ao Git atualmente; é de longe o mais popular sistema de controle de versão (VCS). Suportes O Git é facilmente o melhor entre as extensões de suportes semelhantes. Tem todos os recursos de git que você precisa. Você pode facilmente confirmar alterações dentro dos colchetes, pressionar e puxar alterações com um único clique, visualizar o histórico de arquivos e o total de histórico de confirmação também. Se você é bom com o Git, não encontrará problemas 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, talvez seja necessário inserir o caminho para o arquivo executável do Git (se não estiver no caminho padrão).

Como usar

Brackets Git Demo
Confirmando um arquivo usando o Brackets Git
>

Usando suportes O Git é bastante direto. Torne a pasta de repositório local do Github a pasta do projeto entre parênteses. Em seguida, abra um arquivo, faça algumas alterações e salve-o. Então você pode ir em frente e clicar no ícone Git à direita e isso abrirá o painel Git de colchetes na parte inferior. Ele listará as modificações que você fez nos seus arquivos.

Marque os arquivos que você deseja confirmar e clique no botão Confirmar. Isso abrirá um pop-up listando as alterações feitas. Digite sua mensagem de Confirmação e clique em Ok. E você comprometeu com sucesso um arquivo no Git diretamente do Brackets!

Após confirmar, basta clicar no botão (ele também mostra o número de confirmações não sincronizadas, como você pode ver no GIF acima).

Definindo configurações 

Abra o painel Brackets Git e clique no botão Configurações (o segundo à direita). Sinta-se à vontade para configurar o Brackets Git da maneira que quiser.

configurações de suportes git>

Para visualizar o arquivo e confirmar o histórico

Basta clicar nos respectivos botões para visualizar o histórico de arquivos e o histórico de confirmação lindamente listados. Nós mencionamos que você pode alterar o avatar para um avatar em preto e branco, um avatar colorido ou seu Gravatar?

histórico de confirmação do git
Confirmar histórico
>

histórico de arquivos git>

8. Lint TODAS AS COISAS

Lint TODAS AS COISAS  . Tudo. Esta extensão elimina 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

demonstração do histórico de arquivos git>

Para usar o Lint ALL Things, basta ir para a  guia View  e clicar em  Lint whole Project .

9. Suportes Todo

Parênteses Todo é uma pequena extensão organizada que mostra todos os comentários do TODO em um formato de lista organizado. Por padrão, ele suporta 5 tags – TODO, NOTE, FIXME, CHANGES e FUTURE. Você também pode marcar comentários como Concluído. Nas opções de exibição, você pode filtrar comentários por tags. Suportes Todo permite definir cores personalizadas para as tags, bem como suas próprias tags, caso você queira ser criativo com seus comentários.

Se você estiver trabalhando em um projeto grande e precisar acompanhar os comentários de vários arquivos, poderá alterar o escopo da pesquisa do Brackets 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 raiz do projeto.

Você pode percorrer todas as opções de configurações em a documentação do github.

Como usar

brackets todo demo>

Para usar o Brackets Todo, basta adicionar um comentário ao seu código com uma tag dentro. O nome da tag deve estar em maiúsculas, seguido de dois pontos (:). Para visualizar todos os itens de tarefas, clique no ícone Todo, no painel de extensão à direita.

Configurando:

  • Para permitir que Todo’s faça comentários em HTML:  Basta abrir as configurações – Clique no ícone Todo → Configurações (ícone de engrenagem) – e clique para abrir o arquivo .todo. Para este arquivo, adicione este código:
    { " regex " : { " prefix " : " (? :) " }}

    suportes configurações de todo
    Como o menu de configurações Todo aparece
    >

  • Para alterar o escopo da pesquisa:  Adicione este código ao arquivo .todo:
    { " search " : { " scope " : "my project " }}
  • Para excluir qualquer extensão de arquivo / pasta / arquivo do escopo da pesquisa:  Adicione este código ao arquivo .todo:
    { " search " : { " scope " : "my project " ,

    ExcludeFolders : [ “yourfolder ]

     " excludeFiles " : [ "yourfile " ] "excludeFiles": [".yourextension"]}}

10. Embelezar

Embelezar faz com que seu código pareça bom. Ele corrige espaços, recuo e linhas.

embelezar demonstração>

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 .

Como alternativa, você pode ir para a  guia Editar  e clicar em ‘ Embelezar ‘.

VEJA TAMBÉM: 20 melhores dicas do Emmet para ajudá-lo a codificar HTML / CSS Crazy Fast

Dev