Bem-vindo a uma superprecoce pré-visualização de Brackets, um novo editor open-source para a próxima geração da web. Nós somos grandes fãs dos padrões e queremos construir melhores ferramentas para JavaScript, HTML e CSS e relacionadas tecnologias abertas da web. Este é o nosso humilde começo.
Você está olhando para uma versão precoce de Brackets. De muitas maneiras, Brackets é um tipo diferente de editor. Uma diferença notável é que este editor é escrito em JavaScript. Assim, enquanto Brackets poderia não estar pronto para seu uso no dia-a-dia ainda, estamos usando-o todos os dias para criar Brackets.
Ao editar HTML, use o atalho Cmd/Ctrl + E para abrir um editor rápido embutido que exibe todos os CSS relacionados. Faça um ajuste ao seu CSS, pressione ESC e você estará de volta editando HTML. Ou simplesmente deixe as regras CSS abertas e elas se tornarão parte de seu editor HTML. Se você pressionar ESC fora de um editor rápido, todos eles vão recolher. Sem mais comutação entre documentos perdendo seu contexto.
Quer vê-lo em ação? Coloque o cursor sobre o tag acima e pressione Cmd/Ctrl + E. Você deverá ver um editor rápido de CSS aparecer acima. À direita, você verá uma lista de regras CSS que estão relacionadas com esta tag.Simplesmente role as regras com Alt + Up/Down para encontrar o que deseja editar.
Você sabe aquela "dança salvar/recarregar" que temos feito há anos? Aquela onde você faz mudanças no seu editor, clica em salvar, alterna para o navegador e então recarrega a pagina para finalmente ver o resultado Com Brackets, você não precisa fazer essa dança.
Brackets vai abrir uma conexão ao vivo com o seu navegador local e vai empurrar atualizações CSS enquanto você digita! Você já deve estar fazendo alguma coisa como esta hoje com ferramentas baseadas em navegador, mas com Brackets não há necessidade de copiar e colar o CSS final de volta para o editor. Seu código é executado no navegador, mas vive em seu editor!
Se você tem o Google Chrome instalado, você pode tentar fazer isso sozinho. Clique no ícone em forma de raio no canto superior direito ou pressione Cmd/Ctrl + Alt + P. Quando a Visualização ao Vivo (Live Preview) é habilitada em um documento HTML, todos os documentos CSS vinculados podem ser editados em tempo real. O ícone vai mudar de cinza para ouro quando Brackets estabelecer uma conexão com o seu navegador. Agora, coloque o cursor sobre o tag acima e use Cmd/Ctrl + E para abrir as regras CSS definidas. Tente mudar o tamanho da borda de 10px para 20px ou alterar a cor de fundo de "transparent" para "hotpink". Se você tem Brackets e seu navegador rodando lado a lado, você vai ver as alterações refletidas instantaneamente no seu navegador. Legal, certo?Atualmente, Brackets suporta Visualização ao Vivo (Live Preview) apenas para CSS. Iremos adicionar suporte à Visualização ao Vivo (Live Preview) para HTML e JavaScript em uma versão futura. Visualizações ao vivo atualmente só são possíveis com Google Chrome. Nós queremos trazer esta funcionalidade para todos os principais navegadores, e estamos ansiosos para trabalhar com os fornecedores.
Brackets é um projeto open-source. Desenvolvedores web de todo o mundo estão a contribuir para criar um editor de código melhor. Diga-nos o que você pensa, partilhe as suas ideias ou contribua diretamente para o projeto.