Skip to content

3.1 BRACKETS

Davi Ramos edited this page Jul 27, 2016 · 1 revision

Um editor de textos Open Source que vem crescendo a uma grande velocidade, alcançando alguns editores de texto já consolidados no mercado.

3.1.1 Atalhos do teclado

O Brackets, assim como outros editores e softwares, tem seus atalhos para agilizar o dia-a-dia de quem trabalha com tais ferramentas. Abaixo alguns atalhos interessantes:

Crtrl+Shift+A: Abre um input para você digitar uma tag e teclar “Enter”. Fazendo isso, ele irá inserir a tag completa com seu fechamento e seus atributos no html. Ex.: Digite link e tecle “Enter”, ele vai retornar <link rel=”stylesheet” href=””>. E quando você dá “Enter” o “ponteiro” do mouse vai para dentro das aspas do atributo href. Daí, basta você começar a digitar o endereço que ele vai mostrando as opções em forma de codehint.

Crtrl+Shift+D: Esse atalho de grande utilidade também está presente no Brackets. Serve para duplicar uma linha.

Crtrl+D: Atalho utilizado para deletar uma linha.

Crtrl+E: Uma das grandes novidades do Brackets. Com esse atalho você pode editar o CSS sem ter que abrir o arquivo .css. Basta ir em um arquivo .html ou .php clicar sobre o elemento que deseja alterar as propriedades e pressionar Ctrl+E para abrir a tela de edição.

3.1.2 Extensões

Apesar de ser um editor com pouco tempo no mercado já conta com uma grande quantidade de plug-ins para dar aquela incrementada no workflow. Segue alguns deles que podem ser utilizados:

Brackets Git: Bastante completo, disponibiliza uma interface para você usar o controle de versões mais utilizado por todos. Para aqueles que não gostam de usar o git através de interfaces, ele te dá, de fácil acesso, um botão que leva diretamente para o terminal, aberto já na pasta do projeto, sem ter que navegar até o projeto pelo terminal.

Emmet: Disponibiliza abreviações para agilizar o desenvolvimento de HTML e CSS.

Code Folding: Esse plug-in agiliza a organização do seu código. Ele disponibiliza a função de comprimir um determinado bloco de código em uma linha (e, claro, posteriormente você pode expandir novamente), deixando assim o código mais curto para se navegar entre o arquivo com mais legibilidade.

Indent Guide: Muito bom para facilitar a leitura do código e evitar que você deixe tags HTML abertas sem querer. Ele cria uma linha guia ligando a tag de abertura e a tag de fechamento de determinado elemento, assim você pode verificar se está tudo identado e fechado corretamente.

Clone this wiki locally